/* /App.razor.rz.scp.css */
/* The root component renders no element of its own; pages and layouts carry the styles. */
/* /Components/AccountMenu.razor.rz.scp.css */
/* The menu is a white panel without a shadow, as the artboards draw it; it stands in a layer that lets clicks
   through around it. */
.account-menu[b-hxju1bs6et] {
    border-radius: var(--radius-xl);
    background: var(--color-white);
    color: var(--color-gray-20);
    pointer-events: auto;
}

.avatar[b-hxju1bs6et] {
    overflow: hidden;
    border: var(--border-1) solid var(--color-gray-60);
    border-radius: 50%;
    background: var(--color-gray-87);
}

.camera[b-hxju1bs6et] {
    --icon: url("/assets/icons/camera-2.svg");
    color: var(--color-white);
}

/* The thin line that runs from the avatar through the dots of the numbers. */
.spine[b-hxju1bs6et] {
    background: var(--color-gray-60);
}

.link[b-hxju1bs6et] {
    color: var(--color-primary);
}

.count-label[b-hxju1bs6et] {
    color: var(--color-gray-60);
}

.rule[b-hxju1bs6et] {
    background: var(--color-gray-81);
}

.row-icon[b-hxju1bs6et] {
    color: var(--color-gray-73);
}

/* With «مدیریت سامانه» the panel is one row longer, and «خروج از حساب کاربری» stands one row lower: the distance of the
   rows of #21. */
.account-menu.extended.host[b-hxju1bs6et] {
    --box-height: calc(var(--account-menu-host-height) + var(--added) * var(--account-menu-manage-row));
}

.account-menu.extended.preacher[b-hxju1bs6et] {
    --box-height: calc(var(--account-menu-preacher-height) + var(--added) * var(--account-menu-manage-row));
}

.moved .rule[b-hxju1bs6et],
.moved .row[b-hxju1bs6et] {
    translate: 0 calc(var(--shift) * var(--account-menu-manage-row));
}
/* /Components/AddressFields.razor.rz.scp.css */
/* The fields are OutlinedField; the form around them places them with the boxes of its design. */
/* /Components/AddressListSheet.razor.rz.scp.css */
/* The sheet fills the panel that the popup layer places; what it holds stands where #8 has it. */
.address-list[b-urnhfwounq] {
    position: absolute;
    inset: 0;
}

.sheet[b-urnhfwounq] {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-30);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-urnhfwounq] {
    white-space: nowrap;
    color: var(--color-gray-19);
}

.subtitle[b-urnhfwounq] {
    white-space: nowrap;
    color: var(--color-gray-73);
}

.heading[b-urnhfwounq] {
    white-space: nowrap;
    color: var(--color-gray-60);
}

.drawing[b-urnhfwounq] {
    inline-size: 100%;
    block-size: 100%;
}

/* An address: its photo cut by the corners of the design, its name, where it is; the words of a row start at its right
   end, not in the middle where a button sets them. */
.address .title[b-urnhfwounq],
.address .text[b-urnhfwounq] {
    text-align: start;
}

.photo[b-urnhfwounq] {
    overflow: hidden;
    border-radius: var(--radius-30);
    box-shadow: var(--shadow-lg-gray-89);
}

.text[b-urnhfwounq] {
    white-space: nowrap;
    color: var(--color-gray-45);
}

.line[b-urnhfwounq] {
    background: var(--color-gray-81);
}

.add[b-urnhfwounq] {
    color: var(--color-gray-19);
}

.add > span[b-urnhfwounq] {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* Phone: the addresses one below the other, each in its outline with the arrow of the frames; the sheet is as long
       as the rows need, the frame drawing three. */
    .mobile .sheet[b-urnhfwounq] {
        block-size: calc(100% + (var(--rows) - 3) * var(--address-list-row-pitch));
        border-radius: var(--address-list-row-radius);
    }

    .mobile .address[b-urnhfwounq] {
        inset-block-start: calc(var(--box-top) + var(--n) * var(--address-list-row-pitch));
        border-radius: var(--address-list-row-radius);
        box-shadow: inset 0 0 0 var(--request-page-field-border) var(--color-gray-45), var(--shadow-lg-gray-89);
    }

    .mobile .add[b-urnhfwounq] {
        inset-block-start: calc(var(--box-top) + (var(--rows) - 3) * var(--address-list-row-pitch));
        border-radius: var(--address-list-row-radius);
        box-shadow: inset 0 0 0 var(--request-page-field-border) var(--color-gray-80), var(--shadow-lg-gray-89);
    }
}
/* /Components/AddressNewSheet.razor.rz.scp.css */
/* The sheet and what it holds stand where #10 has them, measured from the panel the popup layer places. The fields
   are the fields of the forms; the map is the picture of the design cut by its corners. */
.address-new[b-87ccdme504] {
    position: absolute;
    inset: 0;
}

.sheet[b-87ccdme504] {
    border-radius: var(--radius-30);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-87ccdme504] {
    white-space: nowrap;
    color: var(--color-gray-19);
}

.heading[b-87ccdme504] {
    white-space: nowrap;
    color: var(--color-gray-60);
}

/* A refused address: the heading says why, in red. */
.heading.refused[b-87ccdme504] {
    color: var(--color-red);
}

.drawing[b-87ccdme504] {
    inline-size: 100%;
    block-size: 100%;
}

.map[b-87ccdme504] {
    overflow: hidden;
    border-radius: var(--radius-30);
    box-shadow: var(--shadow-lg-gray-89);
}

/* the pin stands over the map, which moves under it */
.pin[b-87ccdme504] {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    /* Phone: the sheet, the map and the fields of the frame; the buttons on white. */
    .mobile .sheet[b-87ccdme504] {
        border-radius: var(--radius-lg);
    }

    .mobile .heading[b-87ccdme504] {
        color: var(--color-gray-45);
    }

    .mobile .heading.refused[b-87ccdme504] {
        color: var(--color-red);
    }

    .mobile .map[b-87ccdme504] {
        border-radius: var(--radius-lg);
    }

}
/* /Components/AdminChat.razor.rz.scp.css */
/* The conversation fills the panel that the popup layer places; the sheet, the title, the box of the conversation,
   the field and the arrow stand where #35 has them. */
.admin-chat[b-wjxpuc8voc] {
    position: absolute;
    inset: 0;
}

.sheet[b-wjxpuc8voc] {
    border-radius: var(--admin-chat-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-wjxpuc8voc] {
    color: var(--color-gray-19);
}

.cross[b-wjxpuc8voc] {
    color: var(--color-gray-73);
}

.cross .icon[b-wjxpuc8voc] {
    --icon: url("/assets/icons/fingerprint-scanning.svg");
}

/* The box of the conversation: an outline without a fill, which stays in place while the messages scroll. */
.talk[b-wjxpuc8voc] {
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: var(--admin-chat-talk-radius);
    box-shadow: inset 0 0 0 var(--admin-chat-talk-border) var(--color-gray-81);
}

.opened[b-wjxpuc8voc],
.time[b-wjxpuc8voc] {
    color: var(--color-gray-73);
}

/* The messages follow each other from the place of the first one; the last one ends a distance above the box. */
.messages[b-wjxpuc8voc] {
    display: flex;
    flex-direction: column;
    gap: var(--admin-chat-gap);
    padding-block: var(--admin-chat-first) var(--admin-chat-gap);
}

/* A message: the photo beside the bubble, their lower edges in a line. The admin writes from the left, the visitor
   from the right; each side has the sizes of its first message of #35. */
.message[b-wjxpuc8voc] {
    display: flex;
    align-items: flex-end;
    gap: var(--photo-gap);
}

.admin[b-wjxpuc8voc] {
    flex-direction: row-reverse;
    padding-inline-end: var(--edge);
    --edge: var(--admin-chat-admin-photo-edge);
    --photo-gap: var(--admin-chat-admin-photo-gap);
    --photo-width: var(--admin-chat-admin-photo-width);
    --photo-height: var(--admin-chat-admin-photo-height);
    --text-start: var(--admin-chat-admin-text-start);
    --text-end: var(--admin-chat-admin-text-end);
    --text-top: var(--admin-chat-admin-text-top);
    --time-gap: var(--admin-chat-admin-time-gap);
    --bottom: var(--admin-chat-admin-bottom);
}

.visitor[b-wjxpuc8voc] {
    padding-inline-start: var(--edge);
    --edge: var(--admin-chat-user-photo-edge);
    --photo-gap: var(--admin-chat-user-photo-gap);
    --photo-width: var(--admin-chat-user-photo-width);
    --photo-height: var(--admin-chat-user-photo-height);
    --text-start: var(--admin-chat-user-text-start);
    --text-end: var(--admin-chat-user-text-end);
    --text-top: var(--admin-chat-user-text-top);
    --time-gap: var(--admin-chat-user-time-gap);
    --bottom: var(--admin-chat-user-bottom);
}

.who[b-wjxpuc8voc] {
    position: relative;
    flex: none;
}

/* A photo is a part of a larger picture, cut by its circle as the design cuts it. */
.photo[b-wjxpuc8voc] {
    position: relative;
    display: block;
    overflow: hidden;
    inline-size: var(--photo-width);
    block-size: var(--photo-height);
    border-radius: 50%;
}

/* The bubble is as wide as its longest line, with the room the design leaves around it. */
.bubble[b-wjxpuc8voc] {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-inline-size: 0;
    padding-block: var(--text-top) var(--bottom);
    padding-inline: var(--text-start) var(--text-end);
    border-radius: var(--admin-chat-bubble-radius);
    background: var(--color-gray-94);
}

.admin .bubble[b-wjxpuc8voc] {
    border-end-end-radius: 0;
}

.visitor .bubble[b-wjxpuc8voc] {
    border-end-start-radius: 0;
}

.text[b-wjxpuc8voc] {
    color: var(--color-gray-73);
    --line-pitch: var(--admin-chat-line);
}

/* The time stands under the text: under its start at the admin's, at the far end beside the ticks at the visitor's. */
.time[b-wjxpuc8voc] {
    align-self: flex-start;
    block-size: var(--admin-chat-time-height);
    margin-block-start: calc(var(--time-gap) - var(--admin-chat-line));
    white-space: nowrap;
}

.visitor .time[b-wjxpuc8voc] {
    align-self: flex-end;
    margin-inline-end: calc(var(--admin-chat-user-time-end) - var(--text-end));
}

.ticks[b-wjxpuc8voc] {
    position: absolute;
    inset-inline-end: var(--admin-chat-ticks-end);
    inset-block-end: var(--admin-chat-ticks-bottom);
    inline-size: var(--admin-chat-ticks-width);
    block-size: var(--admin-chat-ticks-height);
    color: var(--color-green);
    --icon: url("/assets/icons/icon-25.svg");
}

/* The field to write in: an outline without a fill; what is written starts where the design has its hint. */
.field[b-wjxpuc8voc] {
    border-radius: var(--admin-chat-field-radius);
    box-shadow: inset 0 0 0 var(--admin-chat-field-border) var(--color-gray-87);
    cursor: text;
}

.input[b-wjxpuc8voc] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-gray-19);
    outline: none;
}

.input[b-wjxpuc8voc]::placeholder {
    color: var(--color-gray-73);
    opacity: 1;
}

.field:focus-within[b-wjxpuc8voc] {
    box-shadow: inset 0 0 0 var(--admin-chat-field-border) var(--theme-from), 0 0 0 var(--form-field-ring) var(--theme-field-ring);
}

/* The arrow that sends: in the colour of the role on the desktop, white on a square in its colours on a phone. */
.send[b-wjxpuc8voc] {
    color: var(--theme-from);
}

.send-icon[b-wjxpuc8voc] {
    --icon: url("/assets/icons/candidate-18.svg");
}

@media (max-width: 767.98px) {
    /* Phone: a grey sheet with a white box for the conversation and a white field, both with a shadow inside; the
       visitor's bubbles are dark. «بازگشت» stands under the sheet. */
    .mobile .sheet[b-wjxpuc8voc] {
        background: var(--color-gray-94);
        box-shadow: var(--shadow-sm-6);
    }

    .mobile .title[b-wjxpuc8voc] {
        color: var(--color-gray-45);
    }

    .mobile .dot[b-wjxpuc8voc] {
        border-radius: 50%;
        background: var(--color-primary);
        box-shadow: var(--shadow-md-primary-2);
    }

    /* nobody of Sedreh is connected: the dot is grey */
    .mobile .away .dot[b-wjxpuc8voc] {
        background: var(--color-gray-73);
        box-shadow: none;
    }

    .mobile .cross .icon[b-wjxpuc8voc] {
        --icon: url("/assets/mobile/chat-cross.svg");
    }

    .mobile .talk[b-wjxpuc8voc],
    .mobile .field[b-wjxpuc8voc] {
        background: var(--color-white);
        box-shadow: inset var(--shadow-sm);
    }

    .mobile .bubble[b-wjxpuc8voc] {
        flex: none;
        inline-size: var(--admin-chat-bubble-width);
        padding-inline-end: 0;
        background: var(--color-gray-94-2);
    }

    .mobile .text[b-wjxpuc8voc] {
        color: var(--color-gray-45);
    }

    .mobile .visitor .bubble[b-wjxpuc8voc] {
        background: var(--color-gray-19);
    }

    .mobile .visitor .text[b-wjxpuc8voc] {
        color: var(--color-white);
    }

    .mobile .visitor .time[b-wjxpuc8voc] {
        margin-inline-end: var(--admin-chat-user-time-end);
    }

    .mobile .admin .time[b-wjxpuc8voc] {
        margin-inline-start: calc(var(--admin-chat-admin-time-start) - var(--text-start));
    }

    .mobile .name[b-wjxpuc8voc] {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        text-align: center;
        white-space: nowrap;
        color: var(--color-black);
    }

    .mobile .ticks[b-wjxpuc8voc] {
        --icon: url("/assets/mobile/chat-ticks.svg");
    }

    .mobile .send[b-wjxpuc8voc] {
        border-radius: var(--admin-chat-send-radius);
        background: linear-gradient(var(--admin-chat-send-angle), var(--theme-from) 0%, var(--theme-to) 100%);
        box-shadow: var(--shadow-lg-gray-27);
        color: var(--color-white);
    }

}
/* /Components/AppButton.razor.rz.scp.css */
/* The one button of the site (wwwroot/css/buttons.css: its height, corners, colours and the label in its middle). It
   is as wide as the design draws the buttons of a form, or as the element around it says (--app-button-primary-width,
   --app-button-secondary-width: the width of its box). */
.primary[b-lvnxwmm7wl] {
    inline-size: var(--app-button-primary-width);
}

.secondary[b-lvnxwmm7wl] {
    inline-size: var(--app-button-secondary-width);
}
/* /Components/BirthdaySheet.razor.rz.scp.css */
/* The sheet and what it holds stand where #69 has them, measured from the panel the popup layer places. */
.birthday-sheet[b-0m2pymft8k] {
    position: absolute;
    inset: 0;
}

.sheet[b-0m2pymft8k] {
    border-radius: var(--birthday-sheet-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-0m2pymft8k] {
    margin: 0;
    white-space: nowrap;
    color: var(--color-gray-19);
}

.label[b-0m2pymft8k] {
    white-space: nowrap;
    color: var(--color-gray-73);
}

.drawing[b-0m2pymft8k] {
    inline-size: 100%;
    block-size: 100%;
}

/* A box: outlined in grey; what is written in it in its middle, the word of an empty one light. */
.box[b-0m2pymft8k] {
    border-radius: var(--birthday-sheet-box-radius);
    box-shadow: inset 0 0 0 var(--birthday-sheet-box-border) var(--color-gray-80);
}

.value[b-0m2pymft8k] {
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
    text-align-last: center;
    color: var(--color-gray-20);
    outline: none;
    appearance: none;
}

/* the word of an empty box on a phone: light, under the field, which takes the presses */
.hint[b-0m2pymft8k] {
    white-space: nowrap;
    color: var(--color-gray-73);
    pointer-events: none;
}

.box:focus-within[b-0m2pymft8k] {
    box-shadow: inset 0 0 0 var(--birthday-sheet-box-border) var(--theme-from), 0 0 0 var(--form-field-ring) var(--theme-field-ring);
}

@media (max-width: 767.98px) {
    /* Phone (1:9096): the boxes outlined in dark grey with the shadow of a row, the word in the empty box; the buttons
       white and in the colours of the role, both with a shadow. */
    .mobile .box[b-0m2pymft8k] {
        box-shadow: inset 0 0 0 var(--birthday-sheet-box-border) var(--color-gray-45), var(--shadow-lg-gray-89);
    }

    .mobile .box:focus-within[b-0m2pymft8k] {
        box-shadow: inset 0 0 0 var(--birthday-sheet-box-border) var(--theme-from), var(--shadow-lg-gray-89);
    }

}
/* /Components/ChoiceRing.razor.rz.scp.css */
/* One radio for the whole site (choice-ring; owner, 2026-10-30: «رادیو باتن های سامانه ... همشون رو درست کن»): the same
   circle, ring and dot on every page, whatever the frame of the page measured. A page only places it: in a box of its
   design (`at box-…`) it stands in the middle of that box; in the flow of a page it is a circle of its own size.

   The ring is a shadow inside the circle, not a border: a border's width is rounded to whole pixels of the screen and
   the dot's place is not, which drew the dot out of the middle on a screen scaled to 125 %. The ring and the dot are
   drawn from the same edge and stay concentric at every scale. */
.choice-ring[b-zxcyxpmbbl] {
    flex: none;
    inline-size: var(--choice-ring-size);
    box-shadow: inset 0 0 0 var(--choice-ring-border) currentColor;
}

.choice-ring:not(.at)[b-zxcyxpmbbl] {
    position: relative;
}

.choice-ring.at[b-zxcyxpmbbl] {
    margin-block-start: calc((var(--box-height) - var(--choice-ring-size)) / 2);
    margin-inline: calc((var(--box-width) - var(--choice-ring-size)) / 2);
}

/* The dot of the chosen one: a filled circle inside the ring. */
.chosen[b-zxcyxpmbbl]::after {
    content: "";
    position: absolute;
    inset: var(--choice-ring-dot);
    border-radius: 50%;
    background: currentColor;
}
/* /Components/ChoiceSheet.razor.rz.scp.css */
/* A white panel in the middle of the frame, over the dark layer, in the look of the sheets of the site. */
.choice-sheet[b-97oy2n10nl] {
    display: grid;
    gap: var(--choice-sheet-gap);
    inline-size: var(--choice-sheet-width);
    max-inline-size: 100%;
    margin-block: var(--choice-sheet-top);
    margin-inline: auto;
    padding: var(--choice-sheet-padding);
    border-radius: var(--radius-30);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
    color: var(--color-gray-19);
    pointer-events: auto;
}

.title[b-97oy2n10nl],
.text[b-97oy2n10nl],
.error[b-97oy2n10nl] {
    margin: 0;
}

.text[b-97oy2n10nl] {
    color: var(--color-gray-45);
    white-space: pre-line;
}

.options[b-97oy2n10nl] {
    display: grid;
    gap: var(--choice-sheet-option-gap);
}

.option[b-97oy2n10nl] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--choice-sheet-option-gap);
    padding: var(--choice-sheet-option-padding);
    border: var(--border-1) solid var(--color-gray-80);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.option.chosen[b-97oy2n10nl] {
    border-color: var(--theme-to);
    color: var(--theme-to);
}

/* the one radio of the site (ChoiceRing), grey until it is chosen; the control of the browser lies over the whole option,
   unseen, and takes the press */
.option[b-97oy2n10nl]  .choice-ring {
    color: var(--color-gray-60);
}

.option.chosen[b-97oy2n10nl]  .choice-ring {
    color: var(--theme-to);
}

.pick[b-97oy2n10nl] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.option:has(.pick:focus-visible)[b-97oy2n10nl] {
    outline: var(--form-field-focus-border) solid var(--theme-to);
    outline-offset: var(--form-field-border);
}

.field[b-97oy2n10nl] {
    display: grid;
    gap: var(--choice-sheet-field-gap);
}

.field-label[b-97oy2n10nl] {
    color: var(--color-gray-45);
}

.input[b-97oy2n10nl] {
    box-sizing: border-box;
    min-block-size: var(--choice-sheet-textarea-min);
    padding: var(--choice-sheet-option-padding);
    border: var(--border-1) solid var(--color-gray-80);
    border-radius: var(--radius-md);
    resize: vertical;
    font: inherit;
}

.error[b-97oy2n10nl] {
    color: var(--color-red);
}

/* a text that is needed and missing, or that was refused: red until it changes (FieldMarks) */
.input[aria-invalid="true"][b-97oy2n10nl] {
    border-color: var(--color-red);
    box-shadow: 0 0 0 var(--form-field-ring) var(--form-field-ring-invalid);
}

.buttons[b-97oy2n10nl] {
    display: flex;
    justify-content: flex-end;
    gap: var(--choice-sheet-option-gap);
}

/* /Components/ConfirmDialog.razor.rz.scp.css */
/* The dialog fills the panel that the popup layer places; its parts stand where the artboard of its question has
   them. */
.confirm-dialog[b-6x1nmqep8l] {
    position: absolute;
    inset: 0;
}

.sheet[b-6x1nmqep8l] {
    border-radius: var(--confirm-dialog-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-6x1nmqep8l] {
    color: var(--color-gray-19);
}

.text[b-6x1nmqep8l],
.note-title[b-6x1nmqep8l] {
    color: var(--color-gray-60);
}

.text[b-6x1nmqep8l] {
    --line-pitch: var(--confirm-dialog-text-pitch);
}

.note[b-6x1nmqep8l] {
    color: var(--color-gray-73);
    --line-pitch: var(--confirm-dialog-note-pitch);
}

.cross[b-6x1nmqep8l] {
    color: var(--color-gray-73);
}

.cross .icon[b-6x1nmqep8l] {
    --icon: url("/assets/icons/fingerprint-scanning.svg");
}

@media (max-width: 767.98px) {
    /* Phone: the sheet holds everything. Its text wraps as it fits, the lines a fixed distance apart; the buttons
       have the red and the grey of the mobile design, and both throw a shadow. */
    .mobile .mark[b-6x1nmqep8l] {
        border-radius: 50%;
        background: var(--color-gray-73);
        color: var(--color-white);
    }

    .mobile .text[b-6x1nmqep8l] {
        color: var(--color-gray-73);
        line-height: var(--confirm-dialog-text-pitch);
    }

    .mobile .cross .icon[b-6x1nmqep8l] {
        --icon: url("/assets/mobile/confirm-cross.svg");
    }

}
/* /Components/ContentTabs.razor.rz.scp.css */
/* The band runs from edge to edge of the page, directly under the header; its shadow falls on the page below. */
.content-tabs[b-wexnlqbqgp] {
    position: relative;
    z-index: 1;
    block-size: var(--content-tabs-height);
    background: var(--color-gray-97);
    box-shadow: var(--shadow-sm-3);
}

.tab[b-wexnlqbqgp] {
    color: var(--color-gray-20);
}

.tab.open[b-wexnlqbqgp] {
    color: var(--color-primary);
}

/* More tabs than the design has places for. */
.many[b-wexnlqbqgp] {
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline: var(--content-tabs-many-start) var(--content-tabs-many-end);
    gap: var(--content-tabs-many-gap);
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
}

.line[b-wexnlqbqgp] {
    border-start-start-radius: var(--radius-xs);
    border-start-end-radius: var(--radius-xs);
    background: var(--color-primary);
}

.chip[b-wexnlqbqgp] {
    border-radius: var(--radius-md);
    background: var(--gradient-theme-vertical);
    color: var(--color-gray-95);
}

@media (max-width: 767.98px) {
    /* Mobile design: the band of the tabs starts behind the bar of the kinds of content, which lies above it. */
    .mobile .content-tabs[b-wexnlqbqgp] {
        block-size: var(--content-tabs-height);
        background: none;
        box-shadow: none;
    }

    .mobile .content-tabs[b-wexnlqbqgp]::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-start: var(--content-tabs-band-top);
        block-size: var(--content-tabs-band-height);
        background: linear-gradient(var(--content-tabs-angle), var(--content-tabs-from) 0%, var(--color-gray-98) 100%);
        box-shadow: var(--shadow-md-5);
    }

    .mobile .line[b-wexnlqbqgp] {
        border-start-start-radius: var(--content-tabs-line-radius);
        border-start-end-radius: var(--content-tabs-line-radius);
    }
}
/* /Components/DonationDialog.razor.rz.scp.css */
/* The sheet fills the box that the layer gives it at the lower edge of the window: round corners at the top only. */
.donation-dialog[b-7vkoytuc4e] {
    position: absolute;
    inset: 0;
    border-start-start-radius: var(--radius-30);
    border-start-end-radius: var(--radius-30);
    background: var(--color-gray-100);
    box-shadow: var(--shadow-sm-6);
    color: var(--color-gray-19);
}

.close[b-7vkoytuc4e] {
    color: var(--color-gray-73);
}

.close .icon[b-7vkoytuc4e] {
    --icon: url("/assets/icons/fingerprint-scanning-4.svg");
}

.dot[b-7vkoytuc4e] {
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: var(--shadow-md-primary-2);
}

.title[b-7vkoytuc4e] {
    color: var(--color-gray-45);
}

.line[b-7vkoytuc4e] {
    background: var(--color-gray-44);
}

/* A chip and the two round buttons have no fill: only their outline throws the shadow (`outlined`, as the outlined
   button of the sign-in cards). */
.chip[b-7vkoytuc4e],
.step[b-7vkoytuc4e] {
    border-radius: var(--radius-30);
    --outline: var(--border-2) solid var(--color-gray-73);
}

/* The plus and the minus: the bars in the place the design gives them in the round button. */
.step[b-7vkoytuc4e] {
    color: var(--color-gray-45);
    --plus-start: var(--donation-dialog-sign-start);
    --plus-top: var(--donation-dialog-sign-top);
    --plus-length: var(--donation-dialog-sign-length);
    --plus-thickness: var(--donation-dialog-sign-thickness);
    --plus-radius: var(--donation-dialog-sign-radius);
}

.step[b-7vkoytuc4e]::before {
    border-color: var(--color-gray-45);
}

/* Without an amount there is nothing to take away: the minus is pale (#226). */
.step.idle[b-7vkoytuc4e] {
    color: var(--color-gray-73);
    cursor: default;
}

.step.idle[b-7vkoytuc4e]::before {
    border-color: var(--color-gray-73);
}

.amount[b-7vkoytuc4e] {
    color: var(--color-gray-88);
}

.amount.chosen[b-7vkoytuc4e] {
    color: var(--color-gray-45);
}

/* The button is the shared button at the size of this sheet. */
.action[b-7vkoytuc4e] {
    --app-button-primary-width: var(--box-width);
}

@media (max-width: 767.98px) {
    .mobile .donation-dialog[b-7vkoytuc4e] {
        border-start-start-radius: var(--radius-lg);
        border-start-end-radius: var(--radius-lg);
    }

    .mobile .close .icon[b-7vkoytuc4e] {
        --icon: url("/assets/mobile/donation-close.svg");
    }

    /* The frames draw the minus dark also while no amount is chosen. */
    .mobile .step.idle[b-7vkoytuc4e] {
        color: var(--color-gray-45);
    }

    .mobile .step.idle[b-7vkoytuc4e]::before {
        border-color: var(--color-gray-45);
    }

}

/* Why a payment could not start (no design): a line under the button. */
.problem[b-7vkoytuc4e] {
    position: absolute;
    inset-inline-start: var(--donation-pay-problem-start);
    inset-block-start: var(--donation-pay-problem-top);
    inline-size: var(--donation-pay-problem-width);
    text-align: center;
    color: var(--color-red);
}
/* /Components/EditPencil.razor.rz.scp.css */
/* A white tile with the pencil in the colour of the role; above the link of a card, which covers the card. */
.edit-pencil[b-mcop21pouj] {
    display: flex;
    position: absolute;
    z-index: 2;
    align-items: center;
    justify-content: center;
    inline-size: var(--edit-pencil-size);
    block-size: var(--edit-pencil-size);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    color: var(--theme-to);
    cursor: pointer;
}

.edit-pencil:focus-visible[b-mcop21pouj] {
    outline: var(--border-2) solid var(--theme-to);
}

.corner[b-mcop21pouj] {
    inset-block-start: var(--edit-pencil-inset);
    inset-inline-start: var(--edit-pencil-inset);
}

.beside[b-mcop21pouj] {
    inset-block-start: 50%;
    inset-inline-start: calc(100% + var(--edit-pencil-gap));
    transform: translateY(-50%);
}

.above[b-mcop21pouj] {
    inset-block-end: calc(100% + var(--edit-pencil-gap));
    inset-inline-start: 0;
}

.pencil[b-mcop21pouj] {
    --icon: url("/assets/icons/edit.svg");
    inline-size: var(--edit-pencil-icon);
    block-size: var(--edit-pencil-icon);
}

@media (max-width: 767.98px) {
    /* Phone: the headings stand in the flow of the page; the pencil follows the text. */
    .mobile .beside[b-mcop21pouj] {
        display: inline-flex;
        position: relative;
        inset: auto;
        margin-inline-start: var(--edit-pencil-gap);
        transform: none;
        vertical-align: middle;
    }
}
/* /Components/FeaturedRows.razor.rz.scp.css */
/* The block is as high as its three rows; the bands behind them run from edge to edge of the page. */
.featured[b-id20szjs0e] {
    position: relative;
    block-size: var(--featured-height);
}

.white[b-id20szjs0e] {
    background: var(--color-white);
}

/* A band with curved edges: the drawing is the shape, the colours are the pair of the theme. */
.band[b-id20szjs0e] {
    mask: var(--shape) center / 100% 100% no-repeat;
    -webkit-mask: var(--shape) center / 100% 100% no-repeat;
}

.bands-low .band[b-id20szjs0e] {
    margin-block-start: var(--featured-bands-low);
}

.bands-low .band-1[b-id20szjs0e] {
    --shape: url("/assets/graphics/band-featured-1-straight.svg");
}

.band-1[b-id20szjs0e] {
    --shape: url("/assets/graphics/band-featured-1.svg");
    background: linear-gradient(var(--featured-band-1-angle), var(--theme-from) var(--featured-band-1-from), var(--theme-to) var(--featured-band-1-to));
}

.band-3[b-id20szjs0e] {
    --shape: url("/assets/graphics/band-featured-3.svg");
    background: linear-gradient(var(--featured-band-3-angle), var(--theme-from) var(--featured-band-3-from), var(--theme-to) var(--featured-band-3-to));
}

/* A category beyond the design: one row on the white of the page. */
.featured.extra[b-id20szjs0e] {
    block-size: var(--featured-extra-height);
    background: var(--color-white);
}

.words[b-id20szjs0e] {
    display: block;
    color: var(--color-gray-20);
    text-align: center;
}

/* The window of a row. What does not fit scrolls sideways; the list inside is as wide as all its cards. */
.view[b-id20szjs0e] {
    overflow-y: hidden;
}

.track[b-id20szjs0e] {
    position: relative;
    inline-size: var(--featured-track-width);
    block-size: 100%;
}

/* The shadow of the cards follows the row: dark green on the bands, grey on white (the first card differs). */
.row-1[b-id20szjs0e] {
    --card-shadow: var(--shadow-md-green-6);
    --card-shadow-first: none;
}

.row-2[b-id20szjs0e],
.row-3[b-id20szjs0e] {
    --card-shadow: var(--shadow-md-gray-60);
    --card-shadow-first: var(--shadow-md-gray-60-2);
}

/* The last tile of a row: «مشاهده همه». */
.more[b-id20szjs0e] {
    border-radius: var(--radius-2xl);
    background: var(--color-white);
}

.more-circle[b-id20szjs0e] {
    border-radius: 50%;
    background: var(--gradient-theme-vertical);
}

.more-icon[b-id20szjs0e] {
    --icon: url("/assets/icons/upload-1.svg");
    color: var(--color-white);
}

.more-label[b-id20szjs0e] {
    color: var(--color-primary);
}

/* The link of the tile lies over the whole tile. */
.more-link[b-id20szjs0e] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* On the desktop the two arrows are part of one drawing; the buttons lie over it. The drawing itself takes no
   clicks: beside the arrows it is empty, and the last tile of a row lies under that part. */
.arrows[b-id20szjs0e] {
    pointer-events: none;
}

.arrow[b-id20szjs0e] {
    background: none;
}

@media (max-width: 767.98px) {
    .mobile .featured[b-id20szjs0e] {
        block-size: var(--featured-height);
    }

    .mobile .featured.extra[b-id20szjs0e] {
        block-size: var(--featured-extra-height);
    }

    .mobile .stripe-1[b-id20szjs0e],
    .mobile .stripe-3[b-id20szjs0e] {
        background: var(--color-gray-95);
    }

    .mobile .stripe-2[b-id20szjs0e] {
        background: var(--color-white);
    }

    .mobile .row-1[b-id20szjs0e] {
        --card-accent: var(--featured-accent-1);
        --card-accent-shadow: var(--shadow-md-primary-4);
        --more-circle: var(--featured-more-circle-1);
    }

    .mobile .row-2[b-id20szjs0e] {
        --card-accent: var(--featured-accent-2);
        --card-accent-shadow: var(--featured-tab-2-shadow);
        --more-circle: var(--featured-accent-2);
    }

    .mobile .row-3[b-id20szjs0e] {
        --card-accent: var(--featured-accent-3);
        --card-accent-shadow: var(--featured-tab-3-shadow);
        --more-circle: var(--featured-accent-3);
    }

    .mobile .more[b-id20szjs0e] {
        border-radius: var(--radius-lg);
        background: var(--color-gray-95);
    }

    .mobile .more-circle[b-id20szjs0e] {
        background: var(--more-circle);
    }

    .mobile .more-icon[b-id20szjs0e] {
        --icon: url("/assets/mobile/tile-upload.svg");
        color: var(--color-gray-98);
    }

    .mobile .more-label[b-id20szjs0e] {
        color: var(--color-gray-19);
    }

    /* The arrows of the mobile design are white tabs at the two ends of the row. */
    .mobile .arrow[b-id20szjs0e] {
        background: var(--color-white);
        box-shadow: var(--shadow-md);
    }

    .mobile .prev[b-id20szjs0e] {
        border-start-end-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg);
    }

    .mobile .next[b-id20szjs0e] {
        border-start-start-radius: var(--radius-lg);
        border-end-start-radius: var(--radius-lg);
    }

    .mobile .arrow-icon[b-id20szjs0e] {
        --icon: url("/assets/mobile/carousel-chevron.svg");
        color: var(--color-gray-45);
    }

    .mobile .next .arrow-icon[b-id20szjs0e] {
        transform: scaleX(-1);
    }
}
/* /Components/FilmPlayer.razor.rz.scp.css */
/* The film fills the place of the picture of the design, on black where its shape is another; everything else lies on it. */
.film-player[b-xf9l9xj1v9] {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-black);
    color: var(--color-white);
    user-select: none;
}

.film[b-xf9l9xj1v9] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    cursor: pointer;
}

.shade[b-xf9l9xj1v9] {
    position: absolute;
    inset: 0;
    background: var(--film-player-shade);
    pointer-events: none;
    transition: opacity 400ms ease;
}

.big-play[b-xf9l9xj1v9] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    inline-size: var(--film-player-big-play);
    block-size: var(--film-player-big-play);
    translate: 50% -50%;
    border-radius: 50%;
    background: var(--gradient-theme-vertical);
    box-shadow: var(--shadow-md-primary-4);
    transition: scale 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.big-play:hover[b-xf9l9xj1v9] {
    scale: 1.08;
}

.big-play .icon[b-xf9l9xj1v9] {
    inline-size: var(--film-player-big-play-icon);
    block-size: var(--film-player-big-play-icon);
}

.controls[b-xf9l9xj1v9] {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    gap: var(--film-player-gap);
    padding-inline: var(--film-player-padding-inline);
    padding-block-end: var(--film-player-padding-bottom);
    transition: opacity 400ms ease, translate 400ms ease;
}

/* While the film plays and the mouse rests, the controls step aside (wwwroot/js/player.js marks the rest). */
.playing[data-idle] .controls[b-xf9l9xj1v9],
.playing[data-idle] .shade[b-xf9l9xj1v9] {
    opacity: 0;
}

.playing[data-idle] .controls[b-xf9l9xj1v9] {
    translate: 0 var(--film-player-gap);
}

.playing[data-idle][b-xf9l9xj1v9] {
    cursor: none;
}

/* The line runs from left to right as the time does, as on the phone: the faint rail, the part played and the knob. */
.line[b-xf9l9xj1v9] {
    position: relative;
    block-size: var(--film-player-line-hit);
    cursor: pointer;
    touch-action: none;
}

.rail[b-xf9l9xj1v9],
.played[b-xf9l9xj1v9] {
    position: absolute;
    inset-block-start: 50%;
    block-size: var(--film-player-line);
    translate: 0 -50%;
    border-radius: var(--film-player-line);
    background: var(--color-white);
}

.rail[b-xf9l9xj1v9] {
    inset-inline: 0;
    opacity: var(--opacity-30);
}

.played[b-xf9l9xj1v9] {
    inset-inline-end: 0;
    inline-size: calc(var(--progress) * 100%);
}

.knob[b-xf9l9xj1v9] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--progress) * 100% - var(--film-player-knob) / 2);
    inline-size: var(--film-player-knob);
    block-size: var(--film-player-knob);
    translate: 0 -50%;
    border-radius: 50%;
    background: var(--color-gray-95);
    box-shadow: var(--shadow-md-primary-3);
    transition: scale 150ms ease;
}

.line:hover .knob[b-xf9l9xj1v9] {
    scale: 1.25;
}

.times[b-xf9l9xj1v9],
.buttons[b-xf9l9xj1v9] {
    direction: ltr;
}

.times[b-xf9l9xj1v9] {
    display: flex;
    justify-content: space-between;
}

.buttons[b-xf9l9xj1v9] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* 5 seconds back at the left and forward at the right, as the line runs. */
.middle[b-xf9l9xj1v9] {
    display: flex;
    align-items: center;
    gap: var(--film-player-buttons-gap);
}

.control[b-xf9l9xj1v9] {
    display: grid;
    place-items: center;
    inline-size: var(--film-player-button);
    block-size: var(--film-player-button);
    border-radius: 50%;
    transition: background-color 150ms ease, scale 150ms ease;
}

.control:hover[b-xf9l9xj1v9] {
    background: var(--film-player-button-hover);
}

.control:active[b-xf9l9xj1v9] {
    scale: 0.92;
}

.control .icon[b-xf9l9xj1v9] {
    inline-size: var(--film-player-icon);
    block-size: var(--film-player-icon);
}

/* the seeks as large as «پخش» looks (owner, 2026-10-28) */
.control .back[b-xf9l9xj1v9],
.control .forward[b-xf9l9xj1v9] {
    inline-size: var(--film-player-seek-icon);
    block-size: var(--film-player-seek-icon);
}

.control.main[b-xf9l9xj1v9] {
    inline-size: var(--film-player-play);
    block-size: var(--film-player-play);
}

.control.main .icon[b-xf9l9xj1v9] {
    inline-size: var(--film-player-play-icon);
    block-size: var(--film-player-play-icon);
}

.control.end[b-xf9l9xj1v9] {
    justify-self: end;
}

/* The drawings of the player of the phone; the seeks and the whole screen drawn to match them (2026-10-28). */
.play[b-xf9l9xj1v9] {
    --icon: url("/assets/mobile/player-play.svg");
}

.pause[b-xf9l9xj1v9] {
    --icon: url("/assets/mobile/player-pause.svg");
}

.back[b-xf9l9xj1v9] {
    --icon: url("/assets/icons/player-back-5.svg");
}

.forward[b-xf9l9xj1v9] {
    --icon: url("/assets/icons/player-forward-5.svg");
}

.fullscreen[b-xf9l9xj1v9] {
    --icon: url("/assets/icons/player-fullscreen.svg");
}

.film-player:fullscreen .fullscreen[b-xf9l9xj1v9] {
    --icon: url("/assets/icons/player-fullscreen-exit.svg");
}

/* The way back from the whole screen stands in its corner, also while the other controls rest. */
.control.leave[b-xf9l9xj1v9] {
    display: none;
    position: absolute;
    inset-block-start: var(--film-player-padding-bottom);
    inset-inline-end: var(--film-player-padding-inline);
    z-index: 2;
    background: var(--film-player-button-hover);
}

.film-player:fullscreen .control.leave[b-xf9l9xj1v9] {
    display: grid;
}

/* On the whole screen the player has no corners. */
.film-player:fullscreen[b-xf9l9xj1v9] {
    border-radius: 0;
}
/* /Components/FilmWholeScreen.razor.rz.scp.css */
/* Black over everything until the player is on the whole screen (a moment), and behind the film of an iPhone, which
   shows it with the controls of the browser. */
.film-whole-screen[b-4n67uss8ba] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--color-black);
}

.film-whole-screen[b-4n67uss8ba]  .film-player {
    border-radius: 0;
}
/* /Components/FilterPage.razor.rz.scp.css */
/* The page lies in the frame of the design over the layer in the colours of the role (Overlay, Themed); its head and
   the panel under the rows stand where 1:32084 has them, the rows follow each other from the first one. */
.filter-page[b-4q1yoi9q4k] {
    position: relative;
    flex: 1 0 auto;
    pointer-events: auto;
}

.logo[b-4q1yoi9q4k] {
    color: var(--color-white);
    --icon: url("/assets/mobile/header-logo.svg");
}

.title[b-4q1yoi9q4k] {
    white-space: nowrap;
    color: var(--color-white);
}

/* The rows, one distance apart from the first one; while a row is open as a card they start higher, as the frames of
   the cards have them. A row is as high as the design's rows, an open card as its frame. */
.rows[b-4q1yoi9q4k] {
    display: flex;
    flex-direction: column;
    gap: var(--filter-page-gap);
    padding-block-start: var(--filter-page-top);
}

.rows.opened[b-4q1yoi9q4k] {
    padding-block-start: var(--filter-page-open-top);
}

.row[b-4q1yoi9q4k] {
    position: relative;
    flex: none;
    inline-size: var(--box-width);
    block-size: var(--box-height);
    margin-inline-start: var(--box-start);
    border-radius: var(--filter-page-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45-2);
}

.row.faded[b-4q1yoi9q4k] {
    opacity: var(--filter-page-faded);
}

/* An open card stands as far above the next row as its frame has it. */
.row.open[b-4q1yoi9q4k] {
    margin-block-end: calc(var(--after) - var(--filter-page-gap));
}

.open.date[b-4q1yoi9q4k] { --after: var(--filter-page-date-after); }
.open.time[b-4q1yoi9q4k] { --after: var(--filter-page-time-after); }
.open.kind[b-4q1yoi9q4k] { --after: var(--filter-page-kind-after); }
.open.guests[b-4q1yoi9q4k] { --after: var(--filter-page-guests-after); }

/* The head of a row takes the press: the row's height at the top of the row or of the card. */
.head[b-4q1yoi9q4k] {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--filter-page-row-height);
    border-radius: var(--filter-page-radius);
}

.head:disabled[b-4q1yoi9q4k] {
    cursor: default;
}

.label[b-4q1yoi9q4k] {
    white-space: nowrap;
    color: var(--color-gray-19);
}

/* The month of the date in its outline, the hint under it. */
.frame-line[b-4q1yoi9q4k] {
    border-radius: var(--filter-page-box-radius);
    box-shadow: inset 0 0 0 var(--filter-page-box-border) var(--color-gray-44);
}

.hint[b-4q1yoi9q4k] {
    line-height: var(--filter-page-hint-pitch);
    color: var(--color-gray-73);
}

.hint-mark[b-4q1yoi9q4k] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

/* A choice: the ring or the box to tick under the control that takes the press, and its word. */
.choice[b-4q1yoi9q4k] {
    color: var(--color-gray-45);
    cursor: pointer;
}

.choice-label[b-4q1yoi9q4k] {
    white-space: nowrap;
}

/* The buttons are the one button of the site (buttons.css): «مشاهده مجالس منطبق» grey until something is chosen. */

/* The panel under the rows. */
.bar[b-4q1yoi9q4k] {
    border-radius: var(--filter-page-bar-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45-2);
}

/* /Components/FilterPopup.razor.rz.scp.css */
/* Nothing of its own: the two layers (Overlay) and what they hold (FilterSheet, FilterPage) style themselves. */
/* /Components/FilterSheet.razor.rz.scp.css */
/* The sheet fills the panel that the popup layer places; what it holds stands where #187, #188, #193 and #195 have it. */
.filter-sheet[b-7yhx7ntgwf] {
    position: absolute;
    inset: 0;
}

.sheet[b-7yhx7ntgwf] {
    position: absolute;
    inset: 0;
    border-radius: var(--filter-sheet-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-7yhx7ntgwf],
.step-title[b-7yhx7ntgwf] {
    color: var(--color-gray-19);
}

.drawing[b-7yhx7ntgwf] {
    inline-size: 100%;
    block-size: 100%;
}

/* A row of the list: an outline with a shadow; its label grey until something is chosen in it, then what was chosen. */
.row[b-7yhx7ntgwf] {
    border-radius: var(--filter-sheet-row-radius);
    box-shadow: inset 0 0 0 var(--filter-sheet-row-border) var(--color-gray-80), var(--shadow-lg-gray-89);
}

.label[b-7yhx7ntgwf] {
    white-space: nowrap;
    color: var(--color-gray-60);
}

.label.chosen[b-7yhx7ntgwf] {
    color: var(--color-gray-19);
}

/* The buttons are the one button of the site (buttons.css): «مشاهده مجالس منطبق» grey until something is chosen. */

/* A choice: the ring or the box to tick under the control that takes the press, and its word. */
.choice[b-7yhx7ntgwf] {
    color: var(--color-gray-60);
    cursor: pointer;
}

.choice-label[b-7yhx7ntgwf] {
    white-space: nowrap;
}

/* The hint under the month: a grey circle with «!» and the sentence beside it. */
.hint[b-7yhx7ntgwf] {
    white-space: nowrap;
    color: var(--color-gray-73);
}

.hint-mark[b-7yhx7ntgwf] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}
/* /Components/KindBar.razor.rz.scp.css */
/* The light bar runs from edge to edge of the screen; the chips stand in the frame of the design. */
.kind-bar[b-lurxz2mv5d] {
    position: relative;
    z-index: 1;
    block-size: var(--kind-bar-height);
    background: linear-gradient(var(--kind-bar-angle), var(--kind-bar-from) 0%, var(--color-gray-98) 100%);
    box-shadow: var(--shadow-md-5);
}

/* On the lists the bar of tabs follows; its band starts behind this bar. */
.kind-bar.high[b-lurxz2mv5d] {
    z-index: 2;
    block-size: var(--kind-bar-tall-height);
    background: linear-gradient(var(--kind-bar-tall-angle), var(--kind-bar-tall-from) 0%, var(--color-gray-98) 100%);
}

.chip[b-lurxz2mv5d] {
    border-radius: var(--kind-bar-chip-radius);
    background: var(--color-white);
    color: var(--color-gray-73);
}

.kind-1[b-lurxz2mv5d] {
    --icon: url("/assets/mobile/kind-1.svg");
}

.kind-2[b-lurxz2mv5d] {
    --icon: url("/assets/mobile/kind-2.svg");
}

.kind-3[b-lurxz2mv5d] {
    --icon: url("/assets/mobile/kind-3.svg");
}
/* /Components/Loading.razor.rz.scp.css */
/* The loader stands in the middle of the place of what is read, with room round it. */
.loading[b-rn4bfwjlzf] {
    display: flex;
    justify-content: center;
    padding-block: var(--site-loader-padding);
}

.loading.small[b-rn4bfwjlzf] {
    padding-block: var(--site-loader-gap);
}
/* /Components/MapView.razor.rz.scp.css */
/* The map fills the box the page gave it; the box keeps its corners and its shadow. */
.map-view[b-m25thbijzh] {
    position: absolute;
    inset: 0;
}

/* the pin of a map that only shows a place */
.map-view[b-m25thbijzh]  .map-pin {
    inline-size: var(--map-pin-size);
    block-size: var(--map-pin-size);
}
/* /Components/MediaCard.razor.rz.scp.css */
/* A piece of content: a photo with a dark shade under its title. The list it stands in gives the shadows
   (--card-shadow, --card-shadow-first, --card-shade-shadow), the corners where they are not the large ones
   (--card-radius) and, on a phone, the colour of the tab (--card-accent, --card-accent-shadow) and its corners
   (--card-tab-radius). */
.media-card[b-gdfm7pt6rs] {
    border-radius: var(--card-radius, var(--radius-2xl));
    box-shadow: var(--card-shadow);
}

.media-card.first[b-gdfm7pt6rs] {
    box-shadow: var(--card-shadow-first);
}

.photo[b-gdfm7pt6rs] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.shade[b-gdfm7pt6rs] {
    border-end-start-radius: var(--card-radius, var(--radius-2xl));
    border-end-end-radius: var(--card-radius, var(--radius-2xl));
    background: var(--media-card-shade);
    box-shadow: var(--card-shade-shadow, none);
}

.kind[b-gdfm7pt6rs] {
    color: var(--color-white);
}

.kind.audio[b-gdfm7pt6rs] {
    --icon: url("/assets/icons/icon-11.svg");
}

.kind.video[b-gdfm7pt6rs] {
    --icon: url("/assets/icons/video.svg");
}

.kind.text[b-gdfm7pt6rs] {
    --icon: url("/assets/icons/icon-15.svg");
}

.title[b-gdfm7pt6rs] {
    color: var(--color-white);
}

/* The link of a card lies over the whole card; in the mobile layout it is a button that opens the popup. */
.link[b-gdfm7pt6rs] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: none;
}

.name[b-gdfm7pt6rs] {
    color: var(--color-gray-55);
}

/* A title or a name longer than the design's ends in an ellipsis inside the card. */
.title[b-gdfm7pt6rs],
.name[b-gdfm7pt6rs] {
    max-inline-size: 86%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .mobile .media-card[b-gdfm7pt6rs] {
        border-radius: var(--radius-lg);
        box-shadow: var(--media-card-card-shadow);
    }

    .mobile .shade[b-gdfm7pt6rs] {
        border-end-start-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    /* The mobile design draws no card for a text; that drawing is the one of the desktop card in both layouts. */
    .mobile .kind.audio[b-gdfm7pt6rs] {
        --icon: url("/assets/mobile/card-audio.svg");
    }

    .mobile .kind.video[b-gdfm7pt6rs] {
        --icon: url("/assets/mobile/card-video.svg");
    }

    /* The tab at the end of a card of the mobile design: flat on the edge of the card, round towards its middle. */
    .mobile .tab[b-gdfm7pt6rs] {
        border-start-start-radius: var(--card-tab-radius, var(--radius-25));
        border-end-start-radius: var(--card-tab-radius, var(--radius-25));
        border-start-end-radius: var(--media-card-tab-inner-radius);
        border-end-end-radius: var(--media-card-tab-inner-radius);
        background: var(--card-accent);
        box-shadow: var(--card-accent-shadow);
    }

    .mobile .tab-icon[b-gdfm7pt6rs] {
        --icon: url("/assets/mobile/card-tab-chevron.svg");
        color: var(--color-white);
    }
}
/* /Components/MediaList.razor.rz.scp.css */
/* The block is as high as its two shelves. Only the shade of a card throws a shadow here, and the corners are the
   small ones. */
.media-list[b-zlvlyhs9i8] {
    position: relative;
    block-size: var(--media-list-height);
    --card-shadow: none;
    --card-shadow-first: none;
    --card-shade-shadow: var(--shadow-sm);
    --card-radius: var(--radius-lg);
}

.heading[b-zlvlyhs9i8] {
    color: var(--color-gray-20);
}

/* The window of a shelf. What does not fit scrolls sideways; the list inside is as wide as all its cards. */
.view[b-zlvlyhs9i8] {
    overflow-y: hidden;
}

.track[b-zlvlyhs9i8] {
    position: relative;
    inline-size: var(--media-list-track-width);
    block-size: 100%;
}

/* A list with nothing published yet says so in the window of the first shelf. */
.empty[b-zlvlyhs9i8] {
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--color-gray-55);
}

@media (max-width: 767.98px) {
    /* Mobile design: a shelf is a grid of cards that stands in the flow of the page, under its heading. The tab at
       the end of a card has the colour of the list. */
    .mobile .media-list[b-zlvlyhs9i8] {
        block-size: auto;
        --card-tab-radius: var(--radius-md);
    }

    .mobile .view[b-zlvlyhs9i8] {
        position: relative;
        inset: auto;
        inline-size: auto;
        block-size: var(--media-list-grid-height);
        overflow: visible;
    }

    .mobile .media-list.maddahi[b-zlvlyhs9i8] {
        --card-accent: var(--media-list-accent-maddahi);
        --card-accent-shadow: var(--media-list-tab-maddahi-shadow);
    }

    .mobile .media-list.lectures[b-zlvlyhs9i8] {
        --card-accent: var(--media-list-accent-lectures);
        --card-accent-shadow: var(--media-list-tab-lectures-shadow);
    }

    .mobile .media-list.poems[b-zlvlyhs9i8] {
        --card-accent: var(--media-list-accent-poems);
        --card-accent-shadow: var(--media-list-tab-poems-shadow);
    }
}
/* /Components/MediaPopup.razor.rz.scp.css */
/* The popup holds a player or a text card; each has its own look. */
/* /Components/MediaProblem.razor.rz.scp.css */
/* It lies over the player, whose controls stay for a second try. */
.media-problem[b-81c1ovee4a] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--manage-chip-gap);
    padding: var(--manage-field-gap);
    background: var(--film-player-shade);
    color: var(--color-white);
    text-align: center;
}

.media-problem p[b-81c1ovee4a] {
    margin: 0;
}

.media-problem .button[b-81c1ovee4a] {
    color: var(--color-white);
    border-color: var(--color-white);
}
/* /Components/MonthCalendar.razor.rz.scp.css */
/* The month fills the box its page gives it; the name, the arrows, the names of the days and the days stand where
   #195 (on a phone 1:34254) has them, measured from that box. */
.title[b-89zrob97zx] {
    color: var(--color-gray-19);
}

.drawing[b-89zrob97zx] {
    inline-size: 100%;
    block-size: 100%;
}

/* The arrow of the month before is the arrow of the month after, turned (as the design turns it). */
.previous .drawing[b-89zrob97zx] {
    transform: rotate(180deg);
}

/* The names of the days: each in the middle of its column, as the design centres them. */
.weekday[b-89zrob97zx] {
    position: absolute;
    inset-block-start: var(--month-calendar-weekday-top);
    inset-inline-start: var(--weekday);
    transform: translateX(50%);
    white-space: nowrap;
    color: var(--color-gray-73);
}

.weekday-1[b-89zrob97zx] { --weekday: var(--month-calendar-weekday-1); }
.weekday-2[b-89zrob97zx] { --weekday: var(--month-calendar-weekday-2); }
.weekday-3[b-89zrob97zx] { --weekday: var(--month-calendar-weekday-3); }
.weekday-4[b-89zrob97zx] { --weekday: var(--month-calendar-weekday-4); }
.weekday-5[b-89zrob97zx] { --weekday: var(--month-calendar-weekday-5); }
.weekday-6[b-89zrob97zx] { --weekday: var(--month-calendar-weekday-6); }
.weekday-7[b-89zrob97zx] { --weekday: var(--month-calendar-weekday-7); }

/* A day: a square of the size of the chosen day of the design, in the middle of its column, in its week. Its number
   stands on the line the design gives the numbers of that square. */
.day[b-89zrob97zx] {
    position: absolute;
    inset-inline-start: calc(var(--column) - var(--month-calendar-cell) / 2);
    inset-block-start: calc(var(--month-calendar-first-row) + var(--row) * var(--month-calendar-row-pitch));
    inline-size: var(--month-calendar-cell);
    block-size: var(--month-calendar-cell);
    color: var(--color-gray-19);
}

.col-1[b-89zrob97zx] { --column: var(--month-calendar-column-1); }
.col-2[b-89zrob97zx] { --column: var(--month-calendar-column-2); }
.col-3[b-89zrob97zx] { --column: var(--month-calendar-column-3); }
.col-4[b-89zrob97zx] { --column: var(--month-calendar-column-4); }
.col-5[b-89zrob97zx] { --column: var(--month-calendar-column-5); }
.col-6[b-89zrob97zx] { --column: var(--month-calendar-column-6); }
.col-7[b-89zrob97zx] { --column: var(--month-calendar-column-7); }

.row-1[b-89zrob97zx] { --row: 0; }
.row-2[b-89zrob97zx] { --row: 1; }
.row-3[b-89zrob97zx] { --row: 2; }
.row-4[b-89zrob97zx] { --row: 3; }
.row-5[b-89zrob97zx] { --row: 4; }
.row-6[b-89zrob97zx] { --row: 5; }

.number[b-89zrob97zx] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--month-calendar-baseline) - var(--size));
    text-align: center;
    --size: var(--font-size-21);
}

.text-22-medium[b-89zrob97zx] {
    --size: var(--font-size-22);
}

/* A chosen day: green, its number white and bold. Alone it is a circle; the first and the last day of a range are
   round on their outer side and meet the band on the other. */
.one[b-89zrob97zx],
.from[b-89zrob97zx],
.to[b-89zrob97zx] {
    background: var(--color-primary);
    color: var(--color-white);
}

.one .number[b-89zrob97zx],
.from .number[b-89zrob97zx],
.to .number[b-89zrob97zx] {
    --size: var(--font-size-23);
}

.one[b-89zrob97zx] {
    border-radius: var(--month-calendar-radius);
}

.from[b-89zrob97zx],
.to[b-89zrob97zx] {
    border-radius: var(--month-calendar-inner-radius);
}

.from[b-89zrob97zx] {
    border-start-start-radius: var(--month-calendar-radius);
    border-end-start-radius: var(--month-calendar-radius);
}

.to[b-89zrob97zx] {
    border-start-end-radius: var(--month-calendar-radius);
    border-end-end-radius: var(--month-calendar-radius);
}

/* The band of a range in one week: from the middle of a day or an edge of the calendar to the middle of another day
   or the other edge, as high as a day, in the green of the design at its opacity. */
.band[b-89zrob97zx] {
    position: absolute;
    inset-inline-start: var(--from);
    inset-block-start: calc(var(--month-calendar-first-row) + var(--row) * var(--month-calendar-row-pitch));
    inline-size: calc(var(--to) - var(--from));
    block-size: var(--month-calendar-cell);
}

.band[b-89zrob97zx]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    opacity: var(--month-calendar-tint);
}

.from-edge[b-89zrob97zx] { --from: 0%; }
.from-1[b-89zrob97zx] { --from: var(--month-calendar-column-1); }
.from-2[b-89zrob97zx] { --from: var(--month-calendar-column-2); }
.from-3[b-89zrob97zx] { --from: var(--month-calendar-column-3); }
.from-4[b-89zrob97zx] { --from: var(--month-calendar-column-4); }
.from-5[b-89zrob97zx] { --from: var(--month-calendar-column-5); }
.from-6[b-89zrob97zx] { --from: var(--month-calendar-column-6); }
.from-7[b-89zrob97zx] { --from: var(--month-calendar-column-7); }
.to-edge[b-89zrob97zx] { --to: 100%; }
.to-1[b-89zrob97zx] { --to: var(--month-calendar-column-1); }
.to-2[b-89zrob97zx] { --to: var(--month-calendar-column-2); }
.to-3[b-89zrob97zx] { --to: var(--month-calendar-column-3); }
.to-4[b-89zrob97zx] { --to: var(--month-calendar-column-4); }
.to-5[b-89zrob97zx] { --to: var(--month-calendar-column-5); }
.to-6[b-89zrob97zx] { --to: var(--month-calendar-column-6); }
.to-7[b-89zrob97zx] { --to: var(--month-calendar-column-7); }

@media (max-width: 767.98px) {
    /* Phone: every number at the one size of the frame; a chosen one stands a little lower, as in 1:34254. */
    .mobile .number[b-89zrob97zx],
    .mobile .text-22-medium[b-89zrob97zx],
    .mobile .one .number[b-89zrob97zx],
    .mobile .from .number[b-89zrob97zx],
    .mobile .to .number[b-89zrob97zx] {
        --size: var(--font-size-10);
    }

    .mobile .one .number[b-89zrob97zx],
    .mobile .from .number[b-89zrob97zx],
    .mobile .to .number[b-89zrob97zx] {
        inset-block-start: calc(var(--month-calendar-baseline) + var(--month-calendar-chosen-shift) - var(--size));
    }
}
/* /Components/NewsArticleCard.razor.rz.scp.css */
/* The card is a TextCard; it has no look of its own. */
/* /Components/NewsDialog.razor.rz.scp.css */
/* The panel fills the box that the layer gives it; what it holds is placed in it. The items of the list are as wide
   as the design has them, with three lines of summary. */
.news-dialog[b-qex4q53d0v] {
    --entry-width: var(--news-dialog-text-width);
    --entry-pitch: var(--news-dialog-line-pitch);
    --entry-lines: 3;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-30);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
    color: var(--color-black);
}

.close[b-qex4q53d0v] {
    color: var(--color-gray-73);
}

.close .icon[b-qex4q53d0v] {
    --icon: url("/assets/icons/fingerprint-scanning.svg");
}

.tool[b-qex4q53d0v] {
    color: var(--color-gray-45);
}

.print[b-qex4q53d0v] {
    --icon: url("/assets/icons/printer.svg");
}

.up[b-qex4q53d0v] {
    --icon: url("/assets/icons/up-arrow-2.svg");
}

/* The items of the list are placed in what scrolls, which is as high as the design has them. */
.held[b-qex4q53d0v] {
    position: relative;
    block-size: var(--news-dialog-held-height);
}

/* One item: the corners at the start of its photo are rounder than the two at its end, as in the list. */
.photo[b-qex4q53d0v] {
    overflow: hidden;
    border-start-start-radius: var(--radius-2xl);
    border-end-start-radius: var(--radius-2xl);
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    box-shadow: var(--shadow-md-2);
}

.rule[b-qex4q53d0v] {
    border-radius: calc(var(--news-dialog-rule-thickness) / 2);
    background: var(--color-primary);
}

/* The title of an item stays on one line. */
.title[b-qex4q53d0v] {
    max-inline-size: var(--article-dialog-title-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The text of an item keeps its paragraphs, on the lines of the design. */
.written[b-qex4q53d0v] {
    margin: 0;
    line-height: var(--article-dialog-line-pitch);
    white-space: pre-line;
}

.empty[b-qex4q53d0v] {
    padding: var(--news-dialog-line-pitch);
    color: var(--color-gray-55);
}
/* /Components/NewsEntry.razor.rz.scp.css */
/* The corners at the start of a photo are rounder than the two at its end. */
.photo[b-7265v2gb2h] {
    overflow: hidden;
    border-start-start-radius: var(--radius-2xl);
    border-end-start-radius: var(--radius-2xl);
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    box-shadow: var(--shadow-md-2);
}

.title[b-7265v2gb2h],
.text[b-7265v2gb2h] {
    color: var(--color-black);
}

/* The title stays on one line; the summary wraps on the lines of the design (the block around the item says how
   wide and how many). What is longer ends in an ellipsis. */
.title[b-7265v2gb2h] {
    max-inline-size: var(--entry-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text[b-7265v2gb2h] {
    display: -webkit-box;
    inline-size: var(--entry-width);
    margin: 0;
    overflow: hidden;
    line-height: var(--entry-pitch);
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--entry-lines);
}

/* A thick line with round ends. */
.rule[b-7265v2gb2h],
.separator[b-7265v2gb2h] {
    border-radius: calc(var(--news-list-rule-thickness) / 2);
}

.rule[b-7265v2gb2h] {
    background: var(--color-primary);
}

.separator[b-7265v2gb2h] {
    background: var(--color-gray-81);
}

.button[b-7265v2gb2h] {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    border-start-end-radius: var(--radius-2xl);
    border-end-end-radius: var(--radius-2xl);
    background: var(--color-gray-20);
    color: var(--color-white);
}

.button-icon[b-7265v2gb2h] {
    --icon: url("/assets/icons/icon-20.svg");
}

@media (max-width: 767.98px) {
    .mobile .photo[b-7265v2gb2h] {
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    .mobile .shade[b-7265v2gb2h] {
        position: absolute;
        inset: 0;
        border-radius: var(--radius-lg);
        background: var(--news-list-shade);
        box-shadow: var(--news-list-card-shadow);
    }

    /* The title wraps as it fits; its lines are a fixed distance apart, so the first line starts half of the extra room higher. */
    /* The cards of the phone have no summary (the clamp above would show it again). */
    .mobile .text[b-7265v2gb2h] {
        display: none;
    }

    .mobile .title[b-7265v2gb2h] {
        display: -webkit-box;
        max-inline-size: none;
        margin-block-start: calc((var(--font-size-14) * 1.5 - var(--news-list-title-pitch)) / 2);
        line-height: var(--news-list-title-pitch);
        white-space: normal;
        color: var(--color-white);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .mobile .button[b-7265v2gb2h] {
        background: var(--color-white);
        color: var(--color-gray-45);
    }

    .mobile .button-icon[b-7265v2gb2h] {
        --icon: url("/assets/mobile/news-chevron.svg");
        color: var(--color-primary);
    }
}
/* /Components/NoticeBar.razor.rz.scp.css */
/* A strip as wide as the frame of the page, outlined in the colour of the role (red for a refusal). */
.notice-bar[b-0r12q1xqxm] {
    box-sizing: border-box;
    inline-size: min(100%, var(--notice-bar-width));
    margin: var(--notice-bar-top) auto 0;
    padding: var(--notice-bar-padding-block) var(--notice-bar-padding-inline);
    border: var(--notice-bar-border) solid var(--theme-to);
    border-radius: var(--notice-bar-radius);
    background: var(--color-white);
    color: var(--color-gray-19);
}

.notice-bar.error[b-0r12q1xqxm] {
    border-color: var(--color-red);
    color: var(--color-red);
}

.text[b-0r12q1xqxm] {
    margin: 0;
    white-space: pre-line;
}

@media (max-width: 767.98px) {
    .mobile .notice-bar[b-0r12q1xqxm] {
        inline-size: var(--notice-bar-width);
    }
}
/* /Components/OccasionChips.razor.rz.scp.css */
.occasions[b-ql2rjs4ci1] {
    position: relative;
    block-size: var(--occasions-height);
}

/* On the desktop the chips stand in one row in the frame of the design, from the place of its first chip; what does
   not fit scrolls sideways. */
.chips[b-ql2rjs4ci1] {
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    gap: var(--occasions-chip-gap);
    align-items: flex-start;
    padding-inline-start: var(--occasions-chips-start);
    padding-inline-end: var(--occasions-chips-end);
    overflow-x: auto;
    overflow-y: hidden;
}

/* The outline of a chip is drawn inside its box; the chip is as wide as its label and its padding. */
.chip[b-ql2rjs4ci1] {
    display: flex;
    flex: none;
    align-items: center;
    block-size: var(--occasions-chip-height);
    padding-inline: var(--occasions-chip-padding);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 var(--border-1) var(--color-gray-20);
    color: var(--color-gray-20);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* Phone: the heading, then the chips one distance below it; they wrap. */
    .mobile .occasions[b-ql2rjs4ci1] {
        block-size: auto;
    }

    .mobile .chips[b-ql2rjs4ci1] {
        position: static;
        flex-wrap: wrap;
        margin-block-start: var(--phone-layout-gap);
        margin-inline: var(--phone-layout-margin);
        padding-inline: 0;
        overflow: visible;
    }

    .mobile .chip[b-ql2rjs4ci1] {
        border-radius: var(--occasions-chip-radius);
    }
}
/* /Components/OrganizerIntroSheet.razor.rz.scp.css */
/* The sheet and what it holds stand where #19 has them, measured from the panel the popup layer places; the organizers
   follow each other one distance apart in the window, each measured as the first. */
.organizer-intro[b-gji4rbcle6] {
    position: absolute;
    inset: 0;
    --thumb-radius: var(--organizer-intro-thumb-radius);
    --thumb-angle: var(--organizer-intro-thumb-angle);
    --thumb-travel: var(--organizer-intro-thumb-travel);
}

.sheet[b-gji4rbcle6] {
    border-radius: var(--organizer-intro-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-gji4rbcle6],
.name[b-gji4rbcle6],
.affiliation[b-gji4rbcle6] {
    margin: 0;
    white-space: nowrap;
    color: var(--color-gray-19);
}

.name[b-gji4rbcle6] {
    color: var(--color-gray-20);
}

.affiliation[b-gji4rbcle6],
.description[b-gji4rbcle6] {
    color: var(--color-gray-45);
}

.drawing[b-gji4rbcle6] {
    inline-size: 100%;
    block-size: 100%;
}

.entries[b-gji4rbcle6] {
    block-size: calc(var(--organizer-intro-entry) * var(--entries));
}

.entry[b-gji4rbcle6] {
    translate: 0 calc(var(--n) * var(--organizer-intro-entry));
}

.logo[b-gji4rbcle6] {
    object-fit: cover;
}

/* The text on the lines of the design: it wraps as it fits, its lines a fixed distance apart, so the first line
   starts half of the extra room higher; it keeps the line breaks it was written with. Four lines are what an
   organizer has on the desktop. */
.description[b-gji4rbcle6] {
    margin: 0;
    white-space: pre-line;
    --line-pitch: var(--organizer-intro-description-pitch);
}

.wrapped[b-gji4rbcle6] {
    display: -webkit-box;
    margin-block-start: calc((var(--font-size-18) * 1.5 - var(--line-pitch)) / 2);
    overflow: hidden;
    line-height: var(--line-pitch);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.rule[b-gji4rbcle6] {
    background: var(--color-gray-81);
}

@media (max-width: 767.98px) {
    /* Phone (no frame): the sheet of the terms (1:20682) with its outlined box, the grey «!» before the title; in the
       box the organizers one under the other, each as tall as its text needs: the photo, the name and the line under
       it at the top, the text under them, a line between two organizers. */
    .mobile .box[b-gji4rbcle6] {
        border-radius: var(--organizer-intro-box-radius);
        --outline: var(--border-1) solid var(--color-gray-80);
        --outline-effect: drop-shadow(var(--shadow-lg-gray-45));
    }

    .mobile .mark[b-gji4rbcle6] {
        border-radius: 50%;
        background: var(--color-gray-73);
        color: var(--color-white);
    }

    .mobile .title[b-gji4rbcle6] {
        color: var(--color-gray-19);
    }

    .mobile .name[b-gji4rbcle6] {
        color: var(--color-gray-19);
    }

    .mobile .entries[b-gji4rbcle6] {
        block-size: auto;
    }

    .mobile .entry[b-gji4rbcle6] {
        position: relative;
        inset: auto;
        inline-size: auto;
        block-size: auto;
        translate: none;
        padding-block: var(--organizer-intro-inset-top);
    }

    .mobile .entry[b-gji4rbcle6]::before {
        content: "";
        display: block;
        block-size: calc(var(--organizer-intro-logo-height) + var(--organizer-intro-logo-gap));
    }

    /* the text wraps as it fits; its lines are a fixed distance apart, so the first line starts half of the extra
       room higher */
    .mobile .description[b-gji4rbcle6] {
        inline-size: var(--organizer-intro-description-width);
        margin: calc((var(--font-size-11) * 1.5 - var(--organizer-intro-description-pitch)) / 2) var(--organizer-intro-inset-start) 0 0;
        line-height: var(--organizer-intro-description-pitch);
        color: var(--color-gray-73);
    }

    /* the four lines of the desktop are a box of their own, which the helper of the phone would leave shown */
    .mobile .wrapped[b-gji4rbcle6] {
        display: none;
    }

    .mobile .rule[b-gji4rbcle6] {
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        block-size: var(--border-1);
        background: var(--color-gray-80);
    }

    .mobile .entry:last-child .rule[b-gji4rbcle6] {
        display: none;
    }
}
/* /Components/OutlinedField.razor.rz.scp.css */
/* The box has no fill: only its outline throws the shadow (`outlined`); its height, corners and outline are the one
   field of the site (field-box, fields.css). What it holds stands in the middle of its height. */
.outlined-field[b-oymu46wbkp] {
    cursor: text;
}

input.input[b-oymu46wbkp],
select.input[b-oymu46wbkp] {
    inset-block-start: 0;
    block-size: 100%;
}

.outlined-field > img[b-oymu46wbkp] {
    inset-block: 0;
    margin-block: auto;
}

.input[b-oymu46wbkp] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-gray-19);
    appearance: none;
}

.input[b-oymu46wbkp]::placeholder {
    color: var(--color-gray-73);
    opacity: 1;
}

/* A choice that has not been made shows its name, in the colour of a placeholder. */
.input.empty[b-oymu46wbkp] {
    color: var(--color-gray-73);
}

/* A choice shows the arrow its design draws beside it (`drawn`); without one, the chevron of every select of the site
   (form-field) at the end of the text. */
select.input.drawn[b-oymu46wbkp] {
    padding-inline-end: 0;
    background: none;
    cursor: pointer;
}

select.input:not(.drawn)[b-oymu46wbkp] {
    padding-inline-end: var(--form-field-chevron-space);
    background: var(--form-field-chevron) no-repeat left center / var(--form-field-chevron-size);
    cursor: pointer;
}

/* A text of several lines fills the box, as far from its lower edge as from its upper one. */
.area[b-oymu46wbkp] {
    block-size: calc(100% - 2 * var(--box-top));
    resize: none;
}

/* A choice with the list of the design: the whole box opens it. */
.choice[b-oymu46wbkp] {
    cursor: pointer;
}

/* /Components/Overlay.razor.rz.scp.css */
/* The layer covers the window and stays there while the page scrolls. It is the first element of the page and
   takes no room: the page starts behind it. It is as high as the part of the window that shows (a phone hides and
   shows its address bar), and scrolls when the popup is higher than that. */
.overlay[b-j67ji6ak6h] {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    block-size: 100vh;
    block-size: 100dvh;
    margin-block-end: -100vh;
    margin-block-end: -100dvh;
    overflow-x: hidden;
    outline: none;
}

/* A menu hangs from the header and moves with the page: the layer covers the page. */
.overlay.on-page[b-j67ji6ak6h] {
    position: absolute;
    inset-inline: 0;
    block-size: 100%;
    margin-block-end: 0;
}

/* A popup of the panel opens from the middle of a page: the layer covers the window from there. */
.overlay.on-panel[b-j67ji6ak6h] {
    position: fixed;
    inset: 0;
    block-size: auto;
    margin-block-end: 0;
}

/* The dark layer and the frame of the design lie over each other, as high as the window or, when the popup needs
   more, as high as the popup. */
.layer[b-j67ji6ak6h] {
    display: grid;
    min-block-size: 100%;
}

.backdrop[b-j67ji6ak6h],
.frame[b-j67ji6ak6h] {
    grid-area: 1 / 1;
}

.backdrop[b-j67ji6ak6h] {
    background: var(--overlay-backdrop);
}

.clear .backdrop[b-j67ji6ak6h] {
    background: none;
}

/* A page of its own: the layer in the colours of the role, at the angle of the frame (1:32084). */
.themed .backdrop[b-j67ji6ak6h] {
    background: linear-gradient(var(--overlay-themed-angle), var(--theme-from) 0%, var(--theme-to) 100%);
}

/* The frame of the design; a click beside the popup goes to the layer behind it. */
.frame[b-j67ji6ak6h] {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

/* A panel that the layer places: its box gives its distance from the inline start and its size, its place the edge
   of the window it hangs from. In a window that is lower than the panel it starts at the top, and the layer scrolls. */
.panel[b-j67ji6ak6h] {
    position: relative;
    flex: none;
    margin-inline-start: var(--box-start);
    inline-size: var(--box-width);
    block-size: var(--box-height);
    pointer-events: auto;
}

/* A panel that hangs from the top stands as far below the edge as its box says (0 for the search panel). */
.panel.top[b-j67ji6ak6h] {
    margin-block: var(--box-top) auto;
}

.panel.middle[b-j67ji6ak6h] {
    margin-block: auto;
}

.panel.bottom[b-j67ji6ak6h] {
    margin-block-start: auto;
}
/* /Components/PeopleRow.razor.rz.scp.css */
.people-row[b-g4357dorhx] {
    position: relative;
    block-size: var(--people-row-height);
}

/* On the desktop the photos and names are placed in the frame of the design: the strip that holds them is the frame. */
.strip[b-g4357dorhx] {
    position: absolute;
    inset: 0;
}

.track[b-g4357dorhx] {
    position: relative;
    block-size: 100%;
}

/* The picture fills its box from the middle; the box itself is the placed element. */
.photo[b-g4357dorhx] {
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.name[b-g4357dorhx] {
    color: var(--color-gray-60);
}

@media (max-width: 767.98px) {
    /* Phone: the heading, then the strip one distance below it; the strip is as high as the row and scrolls sideways. */
    .mobile .people-row[b-g4357dorhx] {
        block-size: auto;
    }

    .mobile .strip[b-g4357dorhx] {
        position: relative;
        inset: auto;
        block-size: var(--people-row-height);
        margin-block-start: var(--phone-layout-gap);
        overflow-y: hidden;
    }

    .mobile .track[b-g4357dorhx] {
        inline-size: var(--people-row-track-width);
    }
}
/* /Components/PersianDateField.razor.rz.scp.css */
.date-field[b-8r7uzy3i1e] {
    position: relative;
    min-inline-size: var(--date-field-min-width);
}

/* The field: in the look of the inputs of the form (the class `input` of its page), with the drawing of a calendar. */
.value[b-8r7uzy3i1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--date-field-gap);
    inline-size: 100%;
    text-align: start;
    cursor: pointer;
}

.value.empty .written[b-8r7uzy3i1e] {
    color: var(--color-gray-60);
}

.mark[b-8r7uzy3i1e] {
    --icon: url("/assets/icons/calendar-checked.svg");
    flex: none;
    inline-size: var(--date-field-icon);
    block-size: var(--date-field-icon);
    color: var(--theme-from);
}

.backdrop[b-8r7uzy3i1e] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.panel[b-8r7uzy3i1e] {
    position: absolute;
    inset-block-start: calc(100% + var(--date-field-panel-offset));
    inset-inline-start: 0;
    z-index: 41;
    inline-size: var(--date-field-panel-width);
    padding: var(--date-field-panel-padding);
    border-radius: var(--date-field-panel-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
    animation: open-b-8r7uzy3i1e 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.panel:focus[b-8r7uzy3i1e] {
    outline: none;
}

@keyframes open-b-8r7uzy3i1e {
    from {
        opacity: 0;
        translate: 0 calc(-1 * var(--date-field-panel-padding));
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

.head[b-8r7uzy3i1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--date-field-head-gap);
    margin-block-end: var(--date-field-head-gap);
}

.shown[b-8r7uzy3i1e] {
    display: flex;
    align-items: center;
    gap: var(--date-field-head-gap);
}

.month[b-8r7uzy3i1e],
.year[b-8r7uzy3i1e] {
    font: var(--text-18-bold);
    color: var(--color-gray-20);
}

.year[b-8r7uzy3i1e] {
    border: none;
    background: transparent;
    cursor: pointer;
}

.turn[b-8r7uzy3i1e] {
    display: grid;
    place-items: center;
    inline-size: var(--date-field-turn);
    block-size: var(--date-field-turn);
    border-radius: 50%;
    color: var(--color-gray-45);
    transition: background-color 150ms ease;
}

.turn:hover[b-8r7uzy3i1e] {
    background: var(--color-gray-95);
}

/* The drawing points to the left: «ماه قبل» at the right end is its mirror image. */
.arrow[b-8r7uzy3i1e] {
    --icon: url("/assets/icons/chevron-left.svg");
    inline-size: var(--date-field-arrow);
    block-size: calc(var(--date-field-arrow) * 1.7);
}

.previous .arrow[b-8r7uzy3i1e] {
    transform: scaleX(-1);
}

.days[b-8r7uzy3i1e] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--date-field-day-gap);
    justify-items: center;
}

.weekday[b-8r7uzy3i1e] {
    font: var(--text-15-medium);
    color: var(--color-gray-60);
}

.day[b-8r7uzy3i1e] {
    inline-size: var(--date-field-day);
    block-size: var(--date-field-day);
    border-radius: var(--date-field-day-radius);
    font: var(--text-16-medium);
    color: var(--color-gray-20);
    transition: background-color 150ms ease, color 150ms ease;
}

.day:hover[b-8r7uzy3i1e] {
    background: var(--color-gray-95);
}

.day.today[b-8r7uzy3i1e] {
    box-shadow: inset 0 0 0 var(--date-field-ring) var(--theme-from);
}

.day.chosen[b-8r7uzy3i1e] {
    background: var(--gradient-theme-vertical);
    box-shadow: var(--shadow-md-primary-4);
    color: var(--color-white);
}

.foot[b-8r7uzy3i1e] {
    display: flex;
    gap: var(--date-field-foot-gap);
    margin-block-start: var(--date-field-head-gap);
}

.link[b-8r7uzy3i1e] {
    font: var(--text-16-medium);
    color: var(--theme-from);
}

.link.clear[b-8r7uzy3i1e] {
    color: var(--color-gray-45);
}

@media (max-width: 767.98px) {
    /* On a phone the month rises from the lower edge, over a shade. */
    .mobile .backdrop[b-8r7uzy3i1e] {
        background: var(--color-black);
        opacity: var(--opacity-30);
    }

    .mobile .panel[b-8r7uzy3i1e] {
        position: fixed;
        inset-block: auto 0;
        inset-inline: 0;
        inline-size: auto;
        padding-block-end: calc(var(--date-field-panel-padding) + env(safe-area-inset-bottom));
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        animation-name: rise-b-8r7uzy3i1e;
    }

    .mobile .month[b-8r7uzy3i1e],
    .mobile .year[b-8r7uzy3i1e] {
        font: var(--text-16-bold);
    }

    .mobile .weekday[b-8r7uzy3i1e] {
        font: var(--text-13-medium);
    }

    .mobile .day[b-8r7uzy3i1e],
    .mobile .link[b-8r7uzy3i1e] {
        font: var(--text-15-medium);
    }
}

@keyframes rise-b-8r7uzy3i1e {
    from {
        translate: 0 100%;
    }

    to {
        translate: 0 0;
    }
}
/* /Components/PictureChooser.razor.rz.scp.css */
/* The control lies over the drawing it stands on, unseen, and takes the press. */
.picture-chooser[b-kgg1zdddbi] {
    cursor: pointer;
}

.picture-chooser[b-kgg1zdddbi]  .picture-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
}
/* /Components/PlayerBar.razor.rz.scp.css */
/* The bar keeps its distance from the lower edge of the window while the page scrolls, and takes no room in the
   page: it is the last element of the page and is pulled up over its end. Only the bar itself takes clicks. */
.player-bar[b-lzne7p8f36] {
    position: sticky;
    inset-block-end: var(--player-bar-bottom);
    z-index: 2;
    block-size: var(--player-bar-height);
    margin-block-start: calc(-1 * (var(--player-bar-height) + var(--player-bar-bottom)));
    margin-block-end: var(--player-bar-bottom);
    pointer-events: none;
}

.bar[b-lzne7p8f36] {
    border-radius: var(--radius-xl);
    background: linear-gradient(var(--player-bar-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    box-shadow: var(--shadow-lg-gray-45-2);
    color: var(--color-white);
    pointer-events: auto;
}

/* The line of the drawing: the faint rail, the part that has played (from the left, as the time runs) and the knob at
   its end. --progress (0 to 1) is set by the component. */
.line[b-lzne7p8f36] {
    cursor: pointer;
    touch-action: none;
}

.rail[b-lzne7p8f36],
.played[b-lzne7p8f36] {
    position: absolute;
    inset-block: 0;
    border-radius: var(--player-bar-line);
    background: var(--color-white);
}

.rail[b-lzne7p8f36] {
    inset-inline: 0;
    opacity: var(--player-bar-rail-opacity);
}

.played[b-lzne7p8f36] {
    inset-inline-end: 0;
    inline-size: calc(var(--progress) * 100%);
}

.knob[b-lzne7p8f36] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--progress) * 100% - var(--player-bar-knob) / 2);
    inline-size: var(--player-bar-knob);
    block-size: var(--player-bar-knob);
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-gray-95);
    box-shadow: var(--shadow-md-primary-3);
}

.control .icon[b-lzne7p8f36] {
    color: var(--color-white);
}

.play[b-lzne7p8f36] {
    --icon: url("/assets/mobile/player-play.svg");
}

.pause[b-lzne7p8f36] {
    --icon: url("/assets/mobile/player-pause.svg");
}

/* The seeks of 5 seconds in the places of the drawing's «قبلی» and «بعدی», drawn to match «پخش» (2026-10-28). */
.skip .icon[b-lzne7p8f36] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: var(--player-bar-skip-icon);
    block-size: var(--player-bar-skip-icon);
    translate: 50% -50%;
}

.back[b-lzne7p8f36] {
    --icon: url("/assets/icons/player-back-5.svg");
}

.forward[b-lzne7p8f36] {
    --icon: url("/assets/icons/player-forward-5.svg");
}

.time[b-lzne7p8f36] {
    color: var(--player-bar-time-color);
}

.control[b-lzne7p8f36],
.close[b-lzne7p8f36] {
    background: none;
}

.close .icon[b-lzne7p8f36] {
    --icon: url("/assets/icons/fingerprint-scanning-2.svg");
}
/* /Components/PlayerCard.razor.rz.scp.css */
/* The card is the photo; everything else lies on it. It stands in an Overlay, which lets clicks through around it. */
.player-card[b-lt9blx7vc9] {
    border-radius: var(--radius-xl);
    box-shadow: var(--player-card-card-shadow);
    color: var(--color-white);
    pointer-events: auto;
}

.photo[b-lt9blx7vc9] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.shade[b-lt9blx7vc9] {
    border-radius: var(--radius-lg);
    background: var(--player-card-shade);
}

/* The line: the faint rail, the part that has played (white in the Figma file; from the left, as the time runs) and
   the knob at its end. --progress (0 to 1) is set by the component. */
.line[b-lt9blx7vc9] {
    touch-action: none;
}

.rail[b-lt9blx7vc9],
.played[b-lt9blx7vc9] {
    position: absolute;
    inset-block: 0;
    border-radius: var(--player-card-line);
    background: var(--color-white);
}

.rail[b-lt9blx7vc9] {
    inset-inline: 0;
    opacity: var(--player-card-track-opacity);
}

.played[b-lt9blx7vc9] {
    inset-inline-end: 0;
    inline-size: calc(var(--progress) * 100%);
}

.knob[b-lt9blx7vc9] {
    --knob: var(--player-card-audio-knob);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--progress) * 100% - var(--knob) / 2);
    inline-size: var(--knob);
    block-size: var(--knob);
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-gray-95);
    box-shadow: var(--shadow-md-primary-3);
}

.line.video .knob[b-lt9blx7vc9] {
    --knob: var(--player-card-video-knob);
}

.control[b-lt9blx7vc9] {
    background: none;
}

.play[b-lt9blx7vc9] {
    --icon: url("/assets/mobile/player-play.svg");
}

.pause[b-lt9blx7vc9] {
    --icon: url("/assets/mobile/player-pause.svg");
}

/* The seeks and the whole screen drawn to match the play of the design (2026-10-28); a seek is as large as «پخش» looks,
   centred on the small box of the design's «قبلی» and «بعدی». */
.seek[b-lt9blx7vc9] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: var(--player-card-seek-icon);
    block-size: var(--player-card-seek-icon);
    translate: 50% -50%;
}

.back[b-lt9blx7vc9] {
    --icon: url("/assets/icons/player-back-5.svg");
}

.forward[b-lt9blx7vc9] {
    --icon: url("/assets/icons/player-forward-5.svg");
}

.fullscreen[b-lt9blx7vc9] {
    --icon: url("/assets/icons/player-fullscreen.svg");
}

.close[b-lt9blx7vc9] {
    --icon: url("/assets/mobile/player-close.svg");
}
/* /Components/PlusSign.razor.rz.scp.css */
.plus-sign[b-cspz2mbzx6] {
    position: absolute;
    inset-inline-start: var(--plus-start);
    inset-block-start: var(--plus-top);
    inline-size: var(--plus-length);
    block-size: var(--plus-length);
    pointer-events: none;
}

.bar[b-cspz2mbzx6] {
    position: absolute;
    border-radius: var(--plus-radius);
    background: currentColor;
}

.across[b-cspz2mbzx6] {
    inset-inline: 0;
    inset-block-start: calc((var(--plus-length) - var(--plus-thickness)) / 2);
    block-size: var(--plus-thickness);
}

.down[b-cspz2mbzx6] {
    inset-block: 0;
    inset-inline-start: calc((var(--plus-length) - var(--plus-thickness)) / 2);
    inline-size: var(--plus-thickness);
}
/* /Components/PushPrompt.razor.rz.scp.css */
/* A strip as wide as the frame of the page, outlined in the colour of the role, with its buttons. */
.push-prompt[b-oshhhracnq] {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--push-prompt-gap);
    inline-size: min(100%, var(--push-prompt-width));
    margin: var(--push-prompt-top) auto 0;
    padding: var(--push-prompt-padding-block) var(--push-prompt-padding-inline);
    border: var(--push-prompt-border) solid var(--theme-to);
    border-radius: var(--push-prompt-radius);
    background: var(--color-white);
    color: var(--color-gray-19);
}

.text[b-oshhhracnq] {
    margin: 0;
}

.buttons[b-oshhhracnq] {
    display: flex;
    gap: var(--push-prompt-gap);
}

.button[b-oshhhracnq] {
    block-size: var(--push-prompt-button-height);
    padding-inline: var(--push-prompt-button-padding);
    border: var(--push-prompt-border) solid var(--color-gray-80);
    border-radius: var(--push-prompt-button-radius);
    background: var(--color-white);
    color: var(--color-gray-45);
    cursor: pointer;
}

.button.primary[b-oshhhracnq] {
    border-color: transparent;
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
}

.button:disabled[b-oshhhracnq] {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 767.98px) {
    .mobile .push-prompt[b-oshhhracnq] {
        inline-size: var(--push-prompt-width);
    }
}
/* /Components/RequestBanner.razor.rz.scp.css */
/* Only the mobile design has this banner; a page shows it inside an element of the class `on-phone`. */
.banner[b-c0n1aeg8fw] {
    position: relative;
    inline-size: var(--request-banner-width);
    block-size: var(--request-banner-height);
    overflow: hidden;
    border-radius: var(--radius-lg);
    isolation: isolate;
}

.photo[b-c0n1aeg8fw],
.tint[b-c0n1aeg8fw] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

/* The gradient gives the photo its colours and keeps the light and dark of the photo. */
.tint[b-c0n1aeg8fw] {
    background: var(--request-banner-tint);
    mix-blend-mode: color;
}

.button[b-c0n1aeg8fw] {
    border-radius: var(--request-banner-radius);
    border-end-end-radius: var(--request-banner-radius-small);
    background: linear-gradient(var(--request-banner-angle), var(--theme-from) var(--request-banner-from), var(--theme-to) var(--request-banner-to));
    box-shadow: var(--request-banner-button-shadow);
    color: var(--color-white);
    --plus-start: var(--request-banner-plus-start);
    --plus-top: var(--request-banner-plus-top);
    --plus-length: var(--request-banner-plus-length);
    --plus-thickness: var(--request-banner-plus-thickness);
    --plus-radius: var(--request-banner-plus-radius);
}
/* /Components/RequestButton.razor.rz.scp.css */
.request-button[b-g5fd8duv86] {
    display: block;
    position: relative;
    inline-size: var(--site-header-request-width);
    block-size: var(--site-header-request-height);
    border-radius: var(--radius-lg);
    background: linear-gradient(var(--site-header-request-angle), var(--theme-from) var(--site-header-request-stop-from), var(--theme-to) var(--site-header-request-stop-to));
    box-shadow: var(--shadow-md-green-3);
    color: var(--color-white);
    --plus-start: var(--site-header-request-plus-start);
    --plus-top: var(--site-header-request-plus-top);
    --plus-length: var(--site-header-request-plus-length);
    --plus-thickness: var(--site-header-request-plus-thickness);
    --plus-radius: var(--site-header-request-plus-radius);
}

.label[b-g5fd8duv86] {
    position: absolute;
    inset-inline-start: var(--site-header-request-label-start);
    inset-block-start: var(--site-header-request-label-top);
    white-space: nowrap;
}
/* /Components/RequestDateSheet.razor.rz.scp.css */
/* The sheet and what it holds stand where #64 has them, measured from the panel the popup layer places; the open tab
   is a pill in the colours of the role, the other one only its word. */
.request-date[b-3p7ccnak1w] {
    position: absolute;
    inset: 0;
}

.tab-pill[b-3p7ccnak1w] {
    border-radius: var(--request-date-tab-radius);
    background: linear-gradient(var(--request-date-tab-angle), var(--theme-from) 0%, var(--theme-to) 100%);
}

.tab-label[b-3p7ccnak1w] {
    white-space: nowrap;
    color: var(--color-white);
}

.tab-label.off[b-3p7ccnak1w] {
    color: var(--color-gray-73);
}

.sheet[b-3p7ccnak1w] {
    border-radius: var(--request-date-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-3p7ccnak1w] {
    white-space: nowrap;
    color: var(--color-gray-19);
}

.drawing[b-3p7ccnak1w] {
    inline-size: 100%;
    block-size: 100%;
}

.mark[b-3p7ccnak1w] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

.hint[b-3p7ccnak1w] {
    white-space: nowrap;
    color: var(--color-gray-73);
    --line-pitch: var(--request-date-hint-pitch);
}

/* /Components/RequestOrganizerSheet.razor.rz.scp.css */
/* The sheet and what it holds stand where #13 has them, measured from the panel the popup layer places; an organizer
   in the window of the list, what it holds in its row. */
.request-organizer[b-n1l45nl7bv] {
    position: absolute;
    inset: 0;
    --thumb-radius: var(--request-organizer-thumb-radius);
    --thumb-angle: var(--request-organizer-thumb-angle);
    --thumb-travel: var(--request-organizer-thumb-travel);
}

.sheet[b-n1l45nl7bv] {
    border-radius: var(--request-organizer-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-n1l45nl7bv],
.subtitle[b-n1l45nl7bv],
.name[b-n1l45nl7bv],
.text[b-n1l45nl7bv],
.question[b-n1l45nl7bv] {
    white-space: nowrap;
}

.title[b-n1l45nl7bv],
.name[b-n1l45nl7bv],
.question[b-n1l45nl7bv] {
    color: var(--color-gray-19);
}

.subtitle[b-n1l45nl7bv] {
    color: var(--color-gray-73);
}

.text[b-n1l45nl7bv] {
    color: var(--color-gray-45);
}

.drawing[b-n1l45nl7bv] {
    inline-size: 100%;
    block-size: 100%;
}

/* The rows stand in the window of the list; the window is as long as all of them need. */
.rows[b-n1l45nl7bv] {
    block-size: calc(var(--request-organizer-row) * var(--rows));
}

/* An organizer, and an answer to the question: the ring (ChoiceRing, the one radio of the site) and what belongs to it
   are placed in its box; the control of the browser lies over all of it and takes the press («!» over that). */
.option[b-n1l45nl7bv],
.answer[b-n1l45nl7bv] {
    color: var(--color-gray-60);
    cursor: pointer;
}

/* The question has no box of its own on the desktop: its box is the whole panel, and only what it holds takes a press. */
.know[b-n1l45nl7bv] {
    pointer-events: none;
}

.know > *[b-n1l45nl7bv] {
    pointer-events: auto;
}

.pick[b-n1l45nl7bv] {
    position: absolute;
    z-index: 1;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.logo[b-n1l45nl7bv] {
    object-fit: cover;
}

/* «!»: the grey circle that opens what the organizers are; it lies over the control of its row. */
.badge[b-n1l45nl7bv] {
    z-index: 2;
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

.rule[b-n1l45nl7bv] {
    background: var(--color-gray-81);
}

@media (max-width: 767.98px) {
    /* Phone: the organizers as outlined rows that throw a shadow (`outlined-on-phone`); the question on a white sheet
       of its own; «بازگشت» white. */
    .mobile .option[b-n1l45nl7bv] {
        border-radius: var(--request-organizer-row-radius);
        color: var(--color-gray-45);
        --outline: var(--border-1) solid var(--color-gray-45);
    }

    .mobile .answer[b-n1l45nl7bv] {
        color: var(--color-gray-45);
    }

    .mobile .know[b-n1l45nl7bv] {
        border-radius: var(--request-organizer-know-radius);
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-45);
    }

}
/* /Components/RequestTimeSheet.razor.rz.scp.css */
/* The sheet and what it holds stand where #65 has them, measured from the panel the popup layer places. */
.request-time[b-jme83y9g0w] {
    position: absolute;
    inset: 0;
}

.sheet[b-jme83y9g0w] {
    border-radius: var(--request-time-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-jme83y9g0w],
.label[b-jme83y9g0w] {
    white-space: nowrap;
    color: var(--color-gray-19);
}

.drawing[b-jme83y9g0w] {
    inline-size: 100%;
    block-size: 100%;
}

/* A value in its outlined box; the values before and after it in light grey. */
.value-box[b-jme83y9g0w] {
    border-radius: var(--request-time-box-radius);
    box-shadow: inset 0 0 0 var(--request-time-box-border) var(--color-gray-73), var(--shadow-lg-gray-89);
}

.value-box:focus-visible[b-jme83y9g0w] {
    box-shadow: inset 0 0 0 var(--request-time-box-border) var(--theme-from), 0 0 0 var(--form-field-ring) var(--theme-field-ring), var(--shadow-lg-gray-89);
    outline: none;
}

.value[b-jme83y9g0w] {
    white-space: nowrap;
    color: var(--color-gray-45);
}

.near[b-jme83y9g0w] {
    white-space: nowrap;
    color: var(--color-gray-88);
}

.mark[b-jme83y9g0w] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

.hint[b-jme83y9g0w] {
    white-space: nowrap;
    color: var(--color-gray-73);
}

@media (max-width: 767.98px) {}
/* /Components/RichTextField.razor.rz.scp.css */
/* The look of the field is in wwwroot/css/rich-text.css: Summernote draws what is inside it, out of the reach of this sheet. */
.rich-text-field[b-0545rsrk1g] {
  inline-size: 100%;
}
/* /Components/ScrollWindow.razor.rz.scp.css */
/* The bar beside the window: a grey line, and on it a thumb in the colours of the role that moves down the line as far
   as the window is scrolled (wwwroot/js/scroll.js sets --scrolled). The sheet names the sizes of the thumb. */
.track[b-nzg1798n8t] {
    background: var(--color-gray-87);
}

.thumb[b-nzg1798n8t] {
    border-radius: var(--thumb-radius);
    --scrolled: 0;
    background: linear-gradient(var(--thumb-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    transform: translateY(calc(var(--scrolled) * var(--thumb-travel)));
    cursor: grab;
    touch-action: none;
}
/* /Components/SearchPanel.razor.rz.scp.css */
/* The panel fills the box that the layer gives it; what it holds is placed in it. */
.search-panel[b-4qo95w35zz] {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
    color: var(--color-gray-60);
}

/* The field is the text field with its drawing at the start: as wide as its box, the drawing where the design has it. */
.field[b-4qo95w35zz] {
    --text-field-width: var(--box-width);
    --field-icon: url("/assets/icons/search.svg");
    --field-icon-color: var(--color-gray-81);
    --field-icon-start: var(--search-panel-icon-start);
    --field-icon-top: var(--search-panel-icon-top);
    --field-icon-width: var(--search-panel-icon-width);
    --field-icon-height: var(--search-panel-icon-height);
    --field-text-start: var(--search-panel-text-start);
}

.close[b-4qo95w35zz] {
    color: var(--color-gray-73);
}

.close .icon[b-4qo95w35zz] {
    --icon: url("/assets/icons/fingerprint-scanning-2.svg");
}

.heading-icon[b-4qo95w35zz] {
    --icon: url("/assets/icons/heater.svg");
}

/* The outline of a chip is drawn inside its box. */
.chip[b-4qo95w35zz] {
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 var(--border-1) var(--color-gray-60);
}

@media (max-width: 767.98px) {
    /* Phone: the panel is as high as what it holds; its parts follow each other between the side margins. The lower
       corners are the ones of the sheets of the mobile design. */
    .mobile .search-panel[b-4qo95w35zz] {
        position: relative;
        inset: auto;
        padding-block: var(--phone-layout-gap) calc(2 * var(--phone-layout-gap));
        padding-inline: var(--phone-layout-margin);
        border-radius: 0;
        border-end-start-radius: var(--search-panel-radius);
        border-end-end-radius: var(--search-panel-radius);
    }

    /* The field with the cross beside it. */
    .mobile .bar[b-4qo95w35zz] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile .field[b-4qo95w35zz] {
        position: static;
        inline-size: auto;
        block-size: auto;
        --text-field-width: var(--search-panel-field-width);
    }

    .mobile .close[b-4qo95w35zz] {
        position: relative;
        inset: auto;
        inline-size: var(--search-panel-close-width);
        block-size: var(--search-panel-close-height);
    }

    .mobile .close .icon[b-4qo95w35zz] {
        --icon: url("/assets/mobile/text-close.svg");
    }

    /* A new section: two distances below the field. */
    .mobile .heading[b-4qo95w35zz] {
        display: flex;
        align-items: center;
        gap: var(--search-panel-heading-gap);
        margin-block-start: calc(2 * var(--phone-layout-gap));
    }

    .mobile .heading-icon[b-4qo95w35zz] {
        position: static;
        inline-size: var(--search-panel-heading-icon-width);
        block-size: var(--search-panel-heading-icon-height);
    }

    .mobile .heading-text[b-4qo95w35zz] {
        position: static;
    }

    /* The chips wrap; a chip is as wide as its label needs. */
    .mobile .chips[b-4qo95w35zz] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--search-panel-chip-gap);
        margin-block-start: var(--phone-layout-gap);
    }

    .mobile .chip[b-4qo95w35zz] {
        display: flex;
        position: relative;
        inset: auto;
        align-items: center;
        inline-size: auto;
        block-size: var(--search-panel-chip-height);
        padding-inline: var(--search-panel-chip-padding);
        border-radius: var(--search-panel-chip-radius);
    }

    .mobile .label[b-4qo95w35zz] {
        position: static;
    }
}
/* /Components/SiteEditor.razor.rz.scp.css */
/* A white panel in the middle of the frame, over the dark layer; its parts in the look of the management pages (the
   file boxes of FileField included). */
.site-editor[b-ega0tpb8li] {
    display: grid;
    gap: var(--site-editor-gap);
    inline-size: var(--site-editor-width);
    max-inline-size: 100%;
    margin-block: var(--site-editor-top);
    margin-inline: auto;
    padding: var(--site-editor-padding);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
    color: var(--color-gray-20);
    pointer-events: auto;
}

.head[b-ega0tpb8li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.head h2[b-ega0tpb8li] {
    margin: 0;
}

.close[b-ega0tpb8li] {
    inline-size: var(--site-editor-input-height);
    block-size: var(--site-editor-input-height);
    padding: var(--site-editor-input-padding);
    background: none;
    color: var(--color-gray-73);
    cursor: pointer;
}

.close .icon[b-ega0tpb8li] {
    --icon: url("/assets/icons/fingerprint-scanning.svg");
}

.form[b-ega0tpb8li],
.group[b-ega0tpb8li] {
    display: grid;
    gap: var(--site-editor-gap);
}

.group[b-ega0tpb8li] {
    margin: 0;
    padding: var(--site-editor-padding);
    border: var(--border-1) solid var(--color-gray-80);
    border-radius: var(--radius-md);
}

.row[b-ega0tpb8li] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-editor-row-gap);
}

.site-editor[b-ega0tpb8li]  .field {
    display: grid;
    gap: var(--site-editor-field-gap);
}

.grow[b-ega0tpb8li] {
    flex: 1 1 0;
}

.site-editor[b-ega0tpb8li]  .field-label {
    margin: 0;
    padding: 0;
    font: var(--text-16-medium);
    color: var(--color-gray-45);
}

.site-editor[b-ega0tpb8li]  .muted {
    font: var(--text-16-medium);
    color: var(--color-gray-55);
}

/* of the family of the fields of the site (form-field, wwwroot/css/fields.css) */
.input[b-ega0tpb8li] {
    block-size: var(--site-editor-input-height);
    padding-inline: var(--site-editor-input-padding);
    border: var(--form-field-border) solid var(--color-gray-81);
    border-radius: var(--form-field-radius);
    background-color: var(--color-white);
    font: var(--text-18-regular);
    color: var(--color-gray-20);
}

textarea.input[b-ega0tpb8li] {
    block-size: auto;
    min-block-size: var(--site-editor-textarea-min);
    padding-block: var(--site-editor-input-padding);
    resize: vertical;
}

textarea.tall[b-ega0tpb8li] {
    min-block-size: calc(2 * var(--site-editor-textarea-min));
}

.input:focus[b-ega0tpb8li] {
    border-color: var(--theme-to);
    box-shadow: 0 0 0 var(--form-field-ring) var(--theme-field-ring);
}

/* refused by the API: red until it changes (FieldMarks) */
.input[aria-invalid="true"][b-ega0tpb8li] {
    border-color: var(--color-red);
    box-shadow: 0 0 0 var(--form-field-ring) var(--form-field-ring-invalid);
}

.buttons[b-ega0tpb8li] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-editor-row-gap);
}

.button[b-ega0tpb8li] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-block-size: var(--site-editor-button-height);
    padding-inline: var(--site-editor-button-padding);
    border-radius: var(--radius-md);
    font: var(--text-18-medium);
    white-space: nowrap;
    cursor: pointer;
}

.button.primary[b-ega0tpb8li] {
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
}

.button.outlined[b-ega0tpb8li] {
    border: var(--border-2) solid var(--color-gray-80);
    background: var(--color-white);
    color: var(--color-gray-45);
}

.button.danger[b-ega0tpb8li] {
    border: var(--border-2) solid var(--color-danger);
    background: var(--color-white);
    color: var(--color-danger);
}

.button:disabled[b-ega0tpb8li] {
    opacity: var(--opacity-50);
    cursor: default;
}

.site-editor[b-ega0tpb8li]  .message {
    margin: 0;
    font: var(--text-16-medium);
    color: var(--color-danger);
}

.site-editor[b-ega0tpb8li]  .file-player {
    inline-size: 100%;
}
/* /Components/StarRating.razor.rz.scp.css */
/* The element that uses the stars places them; inside, the stars are counted from the left, whatever the direction
   of the page: the rating grows to the right. The two rows are one drawing used as a mask; the coloured one is cut
   off where the rating ends. */
.star-rating[b-cu1cef6no4] {
    --reach: var(--star-rating-sample);
}

.stars[b-cu1cef6no4] {
    position: absolute;
    inset: 0;
    direction: ltr;
}

.back[b-cu1cef6no4],
.front[b-cu1cef6no4],
.pick[b-cu1cef6no4] {
    position: absolute;
    inset-block: 0;
}

.pick:disabled[b-cu1cef6no4] {
    cursor: default;
}

.back[b-cu1cef6no4],
.front[b-cu1cef6no4] {
    inset-inline: 0;
    --icon: url("/assets/graphics/candidate-02.svg");
}

.back[b-cu1cef6no4] {
    color: var(--color-gray-88);
}

/* The two colours belong to the shape that cuts the row: it is larger than the row and slides along it, and its right
   edge is where the rating ends. */
.front[b-cu1cef6no4] {
    background: linear-gradient(var(--star-rating-angle), var(--theme-from) 0%, var(--theme-to) 100%)
        calc(var(--reach) - var(--star-rating-cut-width)) calc(-1 * var(--star-rating-cut-above)) / var(--star-rating-cut-width) var(--star-rating-cut-height) no-repeat;
    clip-path: inset(0 calc(100% - var(--reach)) 0 0);
}

.muted .front[b-cu1cef6no4] {
    background: var(--color-gray-73);
}

/* A star takes the press that gives it; it is not drawn itself. */
.pick[b-cu1cef6no4] {
    inline-size: var(--star-rating-star);
    inset-inline-start: calc(var(--place) * var(--star-rating-pitch));
}

.pick-1[b-cu1cef6no4] {
    --place: 0;
}

.pick-2[b-cu1cef6no4] {
    --place: 1;
}

.pick-3[b-cu1cef6no4] {
    --place: 2;
}

.pick-4[b-cu1cef6no4] {
    --place: 3;
}

.pick-5[b-cu1cef6no4] {
    --place: 4;
}
/* /Components/StatsBand.razor.rz.scp.css */
.stats[b-b1zixu8s3m] {
    position: relative;
    block-size: var(--stats-band-height);
    color: var(--color-white);
}

/* The band with curved edges runs from edge to edge of the page: the drawing is the shape. */
.band[b-b1zixu8s3m] {
    position: absolute;
    inset: 0;
    background: var(--color-yellow-3);
    mask: url("/assets/graphics/band-stats.svg") center / 100% 100% no-repeat;
    -webkit-mask: url("/assets/graphics/band-stats.svg") center / 100% 100% no-repeat;
}

@media (max-width: 767.98px) {
    .mobile .stats[b-b1zixu8s3m] {
        block-size: var(--stats-band-height);
        background: var(--color-gray-94);
        color: var(--color-gray-19);
    }
}
/* /Components/StatusDot.razor.rz.scp.css */
.dot[b-lb9bw9wnhb] {
    border-radius: 50%;
}

.yellow[b-lb9bw9wnhb] {
    background: var(--color-yellow-2);
    box-shadow: var(--shadow-sm-yellow-2);
}

.orange[b-lb9bw9wnhb] {
    background: var(--color-orange);
    box-shadow: var(--shadow-sm-orange);
}

.green[b-lb9bw9wnhb] {
    background: var(--color-primary);
    box-shadow: var(--shadow-sm-primary);
}

.theme[b-lb9bw9wnhb] {
    background: var(--gradient-theme-vertical);
    box-shadow: var(--shadow-sm-primary-2);
}

.red[b-lb9bw9wnhb] {
    background: var(--color-danger);
    box-shadow: var(--shadow-sm-danger);
}

/* Before a heading: the primary colour with a wider shadow, one size everywhere (heading-dot; the frames drew five on
   a phone), in the middle of the box a page gives it. */
.heading[b-lb9bw9wnhb] {
    inline-size: var(--heading-dot-size);
    background: var(--color-primary);
    box-shadow: var(--shadow-md-primary-2);
}

.heading.at[b-lb9bw9wnhb] {
    margin-block-start: calc((var(--box-height) - var(--heading-dot-size)) / 2);
    margin-inline: calc((var(--box-width) - var(--heading-dot-size)) / 2);
}
/* /Components/TermsSheet.razor.rz.scp.css */
/* The sheet and what it holds stand where #15 has them, measured from the panel the popup layer places. */
.terms-sheet[b-7tzpu521s0] {
    position: absolute;
    inset: 0;
    --thumb-radius: var(--terms-sheet-thumb-radius);
    --thumb-angle: var(--terms-sheet-thumb-angle);
    --thumb-travel: var(--terms-sheet-thumb-travel);
}

.sheet[b-7tzpu521s0] {
    border-radius: var(--terms-sheet-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
}

.title[b-7tzpu521s0] {
    margin: 0;
    white-space: nowrap;
    color: var(--color-gray-19);
}

.drawing[b-7tzpu521s0] {
    inline-size: 100%;
    block-size: 100%;
}

/* The notes stand in the window at the distance from its edge the design has, and the window scrolls. On the desktop
   in the lines of the design, an empty line between two notes. */
.text[b-7tzpu521s0] {
    position: relative;
    inline-size: var(--box-width);
    margin: var(--box-top) var(--box-start) 0 0;
    white-space: pre-line;
    line-height: var(--terms-sheet-pitch);
    color: var(--color-gray-20);
}

@media (max-width: 767.98px) {
    /* Phone (1:20682): the box of the text outlined in grey with the shadow of the sheet, the grey «!» before the title,
       the text in the light grey of the frame. */
    .mobile .box[b-7tzpu521s0] {
        border-radius: var(--terms-sheet-box-radius);
        --outline: var(--border-1) solid var(--color-gray-80);
        --outline-effect: drop-shadow(var(--shadow-lg-gray-45));
    }

    .mobile .mark[b-7tzpu521s0] {
        border-radius: 50%;
        background: var(--color-gray-73);
        color: var(--color-white);
    }

    /* the notes wrap as they fit, a paragraph each and an empty line between two; the lines are a fixed distance
       apart, so the first line starts half of the extra room higher */
    .mobile .text[b-7tzpu521s0] {
        margin-block: calc(var(--box-top) + (var(--font-size-11) * 1.5 - var(--terms-sheet-pitch)) / 2) var(--box-top);
        color: var(--color-gray-73);
    }
}
/* /Components/TextCard.razor.rz.scp.css */
/* Both boxes stand in an Overlay, which lets clicks through around them. */
.picture[b-zfvrn9qfb5] {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
}

.photo[b-zfvrn9qfb5] {
    border-radius: inherit;
}

.veil[b-zfvrn9qfb5] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--text-card-veil);
    box-shadow: var(--text-card-veil-shadow);
}

.sheet[b-zfvrn9qfb5] {
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-45);
    color: var(--color-gray-19);
    pointer-events: auto;
}

.close[b-zfvrn9qfb5] {
    background: none;
    color: var(--color-gray-73);
}

.close .icon[b-zfvrn9qfb5] {
    --icon: url("/assets/mobile/text-close.svg");
}

.rule[b-zfvrn9qfb5] {
    border-radius: var(--text-card-rule);
    background: var(--color-primary);
}

/* The title of a news item has two lines a fixed distance apart: its first line starts half of the extra room higher. */
.news .title[b-zfvrn9qfb5] {
    margin-block-start: calc((var(--font-size-14) * 1.5 - var(--text-card-title-pitch)) / 2);
    line-height: var(--text-card-title-pitch);
}

/* The text wraps as it fits; its lines are a fixed distance apart, so the first line starts half of the extra room higher. */
.text[b-zfvrn9qfb5] {
    margin-block-start: calc((var(--font-size-13) * 1.5 - var(--text-card-pitch)) / 2);
    line-height: var(--text-card-pitch);
    white-space: pre-line;
}

/* A further part of the text: its title one line below the text before it, then the rule and the text at the
   distances the first part has in the frame. */
.more-title[b-zfvrn9qfb5] {
    margin-block-start: var(--text-card-pitch);
}

/* The rule is as long as the first one: it carries the class of that box, without being placed by it. */
.more-rule[b-zfvrn9qfb5] {
    display: block;
    inline-size: var(--box-width);
    block-size: var(--text-card-rule);
    margin-block-start: calc(var(--text-card-title-to-rule) - var(--font-size-14) * 1.5);
}

.more-text[b-zfvrn9qfb5] {
    margin-block-start: calc(var(--text-card-rule-to-body) - var(--text-card-rule) + (var(--font-size-13) * 1.5 - var(--text-card-pitch)) / 2);
}
/* /Components/TextField.razor.rz.scp.css */
/* A text input in a rounded box with a drawing at its end. Positions of the design are measured from the outer edge
   of the box, CSS from inside its border: --edge is the width of that border. */
.text-field[b-0jz307hbcm] {
    display: block;
    position: relative;
    inline-size: var(--text-field-width);
    block-size: var(--text-field-height);
    border: var(--border-1) solid var(--color-gray-69);
    border-radius: var(--radius-lg);
    cursor: text;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    --edge: var(--border-1);
}

/* the focus in the colour of the role, as every field of the site (form-field); red while what it holds is refused */
.text-field:focus-within[b-0jz307hbcm] {
    border-color: var(--theme-to);
    box-shadow: 0 0 0 var(--form-field-ring) var(--theme-field-ring);
}

.text-field.invalid[b-0jz307hbcm] {
    border-color: var(--color-red);
    box-shadow: 0 0 0 var(--form-field-ring) var(--form-field-ring-invalid);
}

.input[b-0jz307hbcm] {
    position: absolute;
    inset-inline-start: calc(var(--text-field-text-start) - var(--edge));
    inset-block-start: calc(var(--text-field-text-top) - var(--edge));
    /* the text may run up to the drawing */
    inline-size: calc(var(--icon-start) - var(--text-field-text-start));
    padding: 0;
    border: 0;
    background: none;
    font: var(--text-20-medium);
    color: var(--color-gray-19);
}

.input[b-0jz307hbcm]::placeholder {
    color: var(--color-gray-60);
    opacity: 1;
}

.field-icon[b-0jz307hbcm] {
    position: absolute;
    inset-inline-start: calc(var(--icon-start) - var(--edge));
    inset-block-start: calc(var(--icon-top) - var(--edge));
    inline-size: var(--icon-width);
    block-size: var(--icon-height);
    color: var(--field-icon-color, var(--color-gray-73));
}

.icon-surname[b-0jz307hbcm] {
    --icon-start: var(--text-field-surname-icon-start);
    --icon-top: var(--text-field-surname-icon-top);
    --icon-width: var(--text-field-surname-icon-width);
    --icon-height: var(--text-field-surname-icon-height);
    --icon: url("/assets/icons/personal-card-1-2.svg");
}

.icon-mobile[b-0jz307hbcm] {
    --icon-start: var(--text-field-mobile-icon-start);
    --icon-top: var(--text-field-mobile-icon-top);
    --icon-width: var(--text-field-mobile-icon-width);
    --icon-height: var(--text-field-mobile-icon-height);
    --icon: url("/assets/icons/personal-card-1-3.svg");
}

.icon-code[b-0jz307hbcm] {
    --icon-start: var(--text-field-code-icon-start);
    --icon-top: var(--text-field-code-icon-top);
    --icon-width: var(--text-field-code-icon-width);
    --icon-height: var(--text-field-code-icon-height);
    --icon: url("/assets/icons/scanning-2.svg");
}

/* The drawing at the start of the field and the text behind it (#161). The element around the field gives the drawing
   and its place; the text runs to the same distance from the end as in the other fields. */
.icon-leading[b-0jz307hbcm] {
    --icon-start: var(--field-icon-start);
    --icon-top: var(--field-icon-top);
    --icon-width: var(--field-icon-width);
    --icon-height: var(--field-icon-height);
    --icon: var(--field-icon);
}

.icon-leading .input[b-0jz307hbcm] {
    inset-inline-start: calc(var(--field-text-start) - var(--edge));
    inline-size: calc(var(--text-field-width) - var(--field-text-start) - var(--text-field-text-start));
}

@media (max-width: 767.98px) {
    /* Mobile design: a white box with a shadow and no border. */
    .mobile .text-field[b-0jz307hbcm] {
        border: 0;
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-89);
        --edge: calc(0 * var(--px));
    }

    /* with no border, the focus and the refusal are drawn inside the box, over its shadow */
    .mobile .text-field:focus-within[b-0jz307hbcm] {
        box-shadow: inset 0 0 0 var(--form-field-focus-border) var(--theme-to), 0 0 0 var(--form-field-ring) var(--theme-field-ring);
    }

    .mobile .text-field.invalid[b-0jz307hbcm] {
        box-shadow: inset 0 0 0 var(--form-field-focus-border) var(--color-red), 0 0 0 var(--form-field-ring) var(--form-field-ring-invalid);
    }

    .mobile .input[b-0jz307hbcm] {
        font: var(--text-13-medium);
    }

    .mobile .input[b-0jz307hbcm]::placeholder {
        color: var(--color-gray-73);
    }

    /* The mobile design draws the icons anew; they are not the desktop ones made smaller. */
    .mobile .icon-surname[b-0jz307hbcm] {
        --icon: url("/assets/mobile/field-surname.svg");
    }

    .mobile .icon-mobile[b-0jz307hbcm] {
        --icon: url("/assets/mobile/field-mobile.svg");
    }

    .mobile .icon-code[b-0jz307hbcm] {
        --icon: url("/assets/mobile/field-code.svg");
    }
}
/* /Components/TickBox.razor.rz.scp.css */
/* The button that takes the press, placed by the element that uses it; the box it shows is the one of the site
   (TickMark), in its middle. */
.tick-box[b-215rxqczhh] {
    display: grid;
    place-items: center;
}

@media (max-width: 767.98px) {
    /* The mobile design paints a tick that cannot be changed on one grey. */
    .mobile .tick-box.fixed[b-215rxqczhh] {
        --tick-fill: var(--color-gray-73);
    }
}
/* /Components/TickMark.razor.rz.scp.css */
/* One box to tick (tick-mark): one size for the forms and the places of an offer, one for a whole ceremony, on the
   desktop and on a phone. The ring of an empty box is a shadow inside it, as the ring of a radio is (ChoiceRing). */
.tick-mark[b-5j2j9o6eje] {
    --tick-size: var(--tick-mark-size);
    flex: none;
    inline-size: var(--tick-size);
    aspect-ratio: 1;
    block-size: auto;
    border-radius: var(--tick-mark-radius);
    box-shadow: inset 0 0 0 var(--tick-mark-border) currentColor;
    color: var(--color-gray-60);
}

.tick-mark.large[b-5j2j9o6eje] {
    --tick-size: var(--tick-mark-large);
}

.tick-mark:not(.at)[b-5j2j9o6eje] {
    position: relative;
}

/* placed by a box of the design: in its middle */
.tick-mark.at[b-5j2j9o6eje] {
    margin-block-start: calc((var(--box-height) - var(--tick-size)) / 2);
    margin-inline: calc((var(--box-width) - var(--tick-size)) / 2);
}

/* Ticked: the colours of the role, or those a page names for what became of a ceremony (--tick-fill, --tick-taken). */
.ticked[b-5j2j9o6eje],
.partial[b-5j2j9o6eje],
.taken[b-5j2j9o6eje],
.off[b-5j2j9o6eje] {
    box-shadow: none;
    background: var(--tick-fill, var(--gradient-theme-vertical));
}

.taken[b-5j2j9o6eje] {
    background: var(--tick-taken, var(--color-gray-81));
}

.off[b-5j2j9o6eje] {
    background: var(--color-gray-60);
}

.ticked[b-5j2j9o6eje]::after,
.partial[b-5j2j9o6eje]::after,
.taken[b-5j2j9o6eje]::after,
.off[b-5j2j9o6eje]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-white);
    mask: url("/assets/icons/tick-mark-check.svg") center / var(--tick-mark-mark) no-repeat;
    -webkit-mask: url("/assets/icons/tick-mark-check.svg") center / var(--tick-mark-mark) no-repeat;
}

.partial[b-5j2j9o6eje]::after {
    mask-image: url("/assets/icons/tick-mark-minus.svg");
    -webkit-mask-image: url("/assets/icons/tick-mark-minus.svg");
}
/* /Components/TimeSelect.razor.rz.scp.css */
/* In the look of the inputs of the form (the class `input` of its page); the hours read from left to right. */
.time-select[b-dh9vqb08ry] {
    direction: ltr;
    text-align: end;
}
/* /Features/Access/AccessMapPage.razor.rz.scp.css */
/* Made of the parts of the panel (ManageScaffold.razor.css): it has nothing of its own. */
/* /Features/Access/FeaturePage.razor.rz.scp.css */
/* Made of the parts of the panel (ManageScaffold.razor.css): it has nothing of its own. */
/* /Features/Access/FeaturesPage.razor.rz.scp.css */
/* Made of the parts of the panel (ManageScaffold.razor.css): it has nothing of its own. */
/* /Features/Access/MenusPage.razor.rz.scp.css */
/* Made of the parts of the panel (ManageScaffold.razor.css): it has nothing of its own. */
/* /Features/Access/RolePage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Access/RolesPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Audit/AuditPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Audit/AuditTable.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Ceremonies/CancelReasonFields.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Ceremonies/CeremoniesPage.razor.rz.scp.css */
/* The code of a request leads to it, as the row does. */
.table a[b-h0dmcsz7dl] {
    color: var(--theme-to);
}
/* /Features/Ceremonies/CeremonyOffersCard.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Ceremonies/CeremonyPage.razor.rz.scp.css */
/* The name of the host, or the day, beside its state. */
.head[b-kmtx3ssvw8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--manage-card-gap);
}

.note[b-kmtx3ssvw8] {
    margin: 0;
    white-space: pre-line;
    color: var(--color-gray-45);
}

/* A place of a day with its offers. */
.need[b-kmtx3ssvw8] {
    display: flex;
    flex-direction: column;
    gap: var(--manage-field-gap);
}

.need-title[b-kmtx3ssvw8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--manage-chip-gap);
    margin: 0;
}

.line[b-kmtx3ssvw8] {
    display: block;
}

.row-actions[b-kmtx3ssvw8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-chip-gap);
}

/* The reason of a cancellation, or the new day, under what it is for. */
.inline-form[b-kmtx3ssvw8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--manage-filter-gap);
}
/* /Features/Ceremonies/SendToPopup.razor.rz.scp.css */
.send-columns[b-0muahwb4lp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--session-column-min), 1fr));
    gap: var(--session-gap);
}

.send-column[b-0muahwb4lp] {
    display: grid;
    align-content: start;
    gap: var(--session-line-gap);
    min-inline-size: 0;
}

.people[b-0muahwb4lp] {
    display: grid;
    align-content: start;
    gap: var(--session-person-gap);
    max-block-size: var(--session-column-height);
    overflow-y: auto;
}

.person[b-0muahwb4lp] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--session-line-gap);
    padding: var(--session-person-padding);
    border: var(--border-1) solid var(--color-gray-89);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.person.chosen[b-0muahwb4lp] {
    border-color: var(--color-primary);
}

.person-words[b-0muahwb4lp] {
    display: grid;
    min-inline-size: 0;
}

.person-marks[b-0muahwb4lp] {
    display: grid;
    justify-items: end;
    gap: var(--session-person-gap);
}
/* /Features/Ceremonies/SessionCancelPopup.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Ceremonies/SessionCard.razor.rz.scp.css */
.session[b-1hzh95xcqk] {
    display: grid;
    align-content: start;
    gap: var(--session-gap);
    padding: var(--session-padding);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.session-head[b-1hzh95xcqk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--session-gap);
    color: var(--color-gray-20);
}

.session-state[b-1hzh95xcqk] {
    display: flex;
    align-items: center;
    gap: var(--session-line-gap);
}

.session-edit[b-1hzh95xcqk] {
    color: var(--color-gray-55);
}

.session-edit .icon[b-1hzh95xcqk] {
    inline-size: var(--session-line-mark);
    block-size: var(--session-line-mark);
}

.session-host[b-1hzh95xcqk] {
    color: var(--color-gray-20);
}

.session-lines[b-1hzh95xcqk] {
    display: grid;
    gap: var(--session-line-gap);
    color: var(--color-gray-20);
}

.session-line[b-1hzh95xcqk] {
    display: flex;
    align-items: start;
    gap: var(--session-line-gap);
}

.line-mark[b-1hzh95xcqk] {
    flex: none;
    inline-size: var(--session-line-mark);
    block-size: var(--session-line-mark);
    color: var(--color-primary);
}

.clamp[b-1hzh95xcqk] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* /Features/Ceremonies/SessionDetailsPopup.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Ceremonies/SessionFormPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Ceremonies/SessionList.razor.rz.scp.css */
.session-cards[b-3bokih9gyb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--session-card-min), 1fr));
    gap: var(--manage-card-gap);
}
/* /Features/Ceremonies/SessionOpinions.razor.rz.scp.css */
.opinions[b-13j7ryr4xi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--session-column-min), 1fr));
    gap: var(--session-gap);
}

.opinion[b-13j7ryr4xi] {
    display: grid;
    align-content: start;
    gap: var(--session-line-gap);
    padding: var(--session-padding);
    border: var(--border-1) solid var(--color-gray-89);
    border-radius: var(--radius-md);
}
/* /Features/Ceremonies/SessionRefusePopup.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Ceremonies/SessionsPage.razor.rz.scp.css */
.session-cards[b-wlnh2jfhja] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--session-card-min), 1fr));
    gap: var(--manage-card-gap);
}
/* /Features/Ceremonies/SurveysPage.razor.rz.scp.css */
/* The page shares the look of the panel (ManageScaffold). */
/* /Features/Dashboard/BarList.razor.rz.scp.css */
.bar-list[b-p4f6cuq837] {
    display: grid;
    gap: var(--chart-bar-row-gap);
}

.bar-row[b-p4f6cuq837] {
    display: grid;
    grid-template-columns: minmax(calc(var(--chart-ring) * 0.72), auto) minmax(0, 1fr) var(--chart-tick-width) var(--chart-tick-width);
    gap: var(--chart-legend-gap);
    align-items: center;
}

.name[b-p4f6cuq837] {
    color: var(--color-gray-45);
}

.rail[b-p4f6cuq837] {
    display: block;
    block-size: var(--chart-bar);
    overflow: hidden;
    border-radius: var(--chart-bar);
    background: var(--chart-track);
}

.fill[b-p4f6cuq837] {
    display: block;
    inline-size: var(--size);
    block-size: 100%;
    border-radius: var(--chart-bar);
    background: linear-gradient(270deg, var(--series-from), var(--series-to));
    animation: bar-grow-b-p4f6cuq837 800ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay) backwards;
}

@keyframes bar-grow-b-p4f6cuq837 {
    from {
        inline-size: 0;
    }
}

.amount[b-p4f6cuq837] {
    color: var(--color-gray-20);
    text-align: end;
}

.share[b-p4f6cuq837] {
    color: var(--color-gray-60);
    text-align: end;
}
/* /Features/Dashboard/ChartCard.razor.rz.scp.css */
.chart-card[b-cr6rfrasl5] {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    transition: box-shadow 200ms ease, translate 200ms ease;
}

/* a soft light in the corner, in the colour of the site */
.chart-card[b-cr6rfrasl5]::before {
    content: "";
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -15%;
    inline-size: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--chart-glow), transparent 70%);
    pointer-events: none;
}

.chart-card:hover[b-cr6rfrasl5] {
    translate: 0 calc(-2 * var(--px));
    box-shadow: var(--shadow-md-gray-87), var(--shadow-sm-2);
}

.chart-head[b-cr6rfrasl5] {
    position: relative;
    display: flex;
    gap: var(--chart-head-gap);
    align-items: center;
    margin-block-end: var(--chart-gap);
}

.chart-icon[b-cr6rfrasl5] {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: var(--chart-icon-box);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
    box-shadow: var(--theme-shadow-lg);
}

.chart-icon .icon[b-cr6rfrasl5] {
    inline-size: var(--chart-icon);
    block-size: var(--chart-icon);
}

.chart-actions[b-cr6rfrasl5] {
    margin-inline-start: auto;
}
/* /Features/Dashboard/ChartGradients.razor.rz.scp.css */
/* Made of charts.css: it has nothing of its own. */
/* /Features/Dashboard/MonthChart.razor.rz.scp.css */
.month-chart[b-ws2lhnm6z6] {
    min-inline-size: 0;
}

.key[b-ws2lhnm6z6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chart-legend-gap) var(--chart-gap);
    margin-block-end: var(--chart-gap);
    color: var(--color-gray-45);
}

.key li[b-ws2lhnm6z6] {
    display: flex;
    gap: calc(var(--chart-legend-gap) / 1.5);
    align-items: center;
}

.line-mark[b-ws2lhnm6z6] {
    flex: none;
    inline-size: calc(var(--chart-swatch) * 1.6);
    block-size: calc(var(--chart-swatch) / 3.5);
    border-radius: var(--chart-swatch);
    background: var(--chart-series-2-to);
}

.scroller[b-ws2lhnm6z6] {
    overflow-x: auto;
}

/* the half of the top number that stands above the area is inside what scrolls */
.plot[b-ws2lhnm6z6] {
    min-inline-size: var(--chart-plot-min-width);
    padding-block-start: var(--chart-legend-gap);
    padding-inline-end: var(--chart-tick-width);
}

.area[b-ws2lhnm6z6] {
    position: relative;
    block-size: var(--chart-plot-height);
}

.grid[b-ws2lhnm6z6] {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--at);
    border-block-end: var(--form-field-border) dashed var(--chart-grid);
}

.tick[b-ws2lhnm6z6] {
    position: absolute;
    inset-inline-end: 100%;
    inset-block-end: 0;
    translate: 0 50%;
    padding-inline-end: calc(var(--chart-legend-gap) / 2);
    color: var(--color-gray-60);
}

.line[b-ws2lhnm6z6] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
    animation: line-in-b-ws2lhnm6z6 900ms ease 300ms backwards;
}

.line polyline[b-ws2lhnm6z6] {
    fill: none;
    stroke: var(--chart-series-2-to);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

@keyframes line-in-b-ws2lhnm6z6 {
    from {
        opacity: 0;
    }
}

.columns[b-ws2lhnm6z6] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.column[b-ws2lhnm6z6] {
    display: flex;
    gap: var(--chart-column-gap);
    align-items: flex-end;
    justify-content: center;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: background-color 150ms ease;
    cursor: pointer;
}

.column.on[b-ws2lhnm6z6] {
    background: var(--color-gray-97);
}

.bar[b-ws2lhnm6z6] {
    display: block;
    inline-size: var(--chart-column-bar);
    block-size: var(--height);
    border-radius: var(--chart-column-bar) var(--chart-column-bar) 0 0;
    background: linear-gradient(180deg, var(--series-from), var(--series-to));
    animation: column-grow-b-ws2lhnm6z6 800ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay) backwards;
}

@keyframes column-grow-b-ws2lhnm6z6 {
    from {
        block-size: 0;
    }
}

.dot[b-ws2lhnm6z6] {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-end: var(--y);
    inline-size: var(--chart-dot);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: inset 0 0 0 calc(var(--chart-dot) / 3.6) var(--chart-series-2-to), var(--shadow-sm-2);
    translate: 50% 50%;
    transition: scale 150ms ease;
    pointer-events: none;
    animation: line-in-b-ws2lhnm6z6 500ms ease 700ms backwards;
}

.dot.on[b-ws2lhnm6z6] {
    scale: 1.5;
}

.tip[b-ws2lhnm6z6] {
    position: absolute;
    inset-block-start: 0;
    z-index: 2;
    inline-size: var(--chart-tooltip);
    padding: var(--chart-legend-gap);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-gray-20);
    font: var(--text-14-medium);
    box-shadow: var(--shadow-md-4);
    pointer-events: none;
}

.tip.middle[b-ws2lhnm6z6] {
    inset-inline-start: var(--x);
    translate: 50% 0;
}

.tip.start[b-ws2lhnm6z6] {
    inset-inline-start: 0;
}

.tip.end[b-ws2lhnm6z6] {
    inset-inline-end: 0;
}

.tip-title[b-ws2lhnm6z6] {
    margin-block-end: calc(var(--chart-legend-gap) / 2);
}

.tip-row[b-ws2lhnm6z6] {
    display: flex;
    gap: calc(var(--chart-legend-gap) / 1.5);
    align-items: center;
    color: var(--color-gray-45);
}

.tip-row .number[b-ws2lhnm6z6] {
    margin-inline-start: auto;
    color: var(--color-gray-20);
}

.labels[b-ws2lhnm6z6] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    block-size: var(--chart-label-height);
    color: var(--color-gray-45);
    text-align: center;
}

.nothing[b-ws2lhnm6z6] {
    text-align: center;
}

@media (max-width: 767.98px) {
    .mobile .tip[b-ws2lhnm6z6] {
        font: var(--text-11-medium);
    }
}
/* /Features/Dashboard/RingChart.razor.rz.scp.css */
.ring-chart[b-uu6zcctdb6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chart-ring-gap);
    align-items: center;
    justify-content: center;
}

.ring[b-uu6zcctdb6] {
    position: relative;
    flex: none;
    inline-size: var(--chart-ring);
    aspect-ratio: 1;
}

.ring svg[b-uu6zcctdb6] {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
}

.track[b-uu6zcctdb6],
.arc[b-uu6zcctdb6] {
    fill: none;
    stroke-width: 11;
}

.track[b-uu6zcctdb6] {
    stroke: var(--chart-track);
}

.arc[b-uu6zcctdb6] {
    stroke-linecap: round;
    stroke-dasharray: var(--length) 100;
    stroke-dashoffset: calc(var(--start) * -1);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: opacity 180ms ease, stroke-width 180ms ease;
    animation: ring-grow-b-uu6zcctdb6 900ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay) backwards;
}

.arc.dim[b-uu6zcctdb6] {
    opacity: 0.22;
}

@keyframes ring-grow-b-uu6zcctdb6 {
    from {
        stroke-dasharray: 0 100;
        opacity: 0;
    }
}

.center[b-uu6zcctdb6] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: 22%;
    text-align: center;
    pointer-events: none;
}

.value[b-uu6zcctdb6] {
    color: var(--color-gray-20);
}

.caption[b-uu6zcctdb6] {
    color: var(--color-gray-45);
}

.legend[b-uu6zcctdb6] {
    display: grid;
    flex: 1 1 var(--chart-tooltip);
    gap: calc(var(--chart-legend-gap) / 3);
    min-inline-size: 0;
}

.row[b-uu6zcctdb6] {
    display: flex;
    gap: var(--chart-legend-gap);
    align-items: center;
    min-block-size: var(--chart-legend-row);
    padding-inline: var(--chart-legend-gap);
    border-radius: var(--radius-md);
    transition: background-color 150ms ease;
    cursor: default;
}

.row.on[b-uu6zcctdb6] {
    background: var(--color-gray-97);
}

.name[b-uu6zcctdb6] {
    flex: 1;
    min-inline-size: 0;
    color: var(--color-gray-45);
}

.amount[b-uu6zcctdb6] {
    color: var(--color-gray-20);
}

.share[b-uu6zcctdb6] {
    min-inline-size: var(--chart-tick-width);
    color: var(--color-gray-60);
    text-align: end;
}
/* /Features/Management/DashboardPage.razor.rz.scp.css */
/* The band at the head of the dashboard, in the gradient of the site, and the cards of the charts. */
.hero[b-k0n512mqwe] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--chart-gap);
    align-items: center;
    justify-content: space-between;
    padding: var(--chart-gap) calc(var(--chart-gap) * 1.4);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: linear-gradient(115deg, var(--theme-from) 0%, var(--theme-to) 100%);
    color: var(--color-white);
    box-shadow: var(--theme-shadow-lg);
}

.hero[b-k0n512mqwe]::after {
    content: "";
    position: absolute;
    inset-block: -60% -60%;
    inset-inline-start: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--chart-hero-light), transparent 68%);
    pointer-events: none;
}

.hero-words[b-k0n512mqwe] {
    position: relative;
    z-index: 1;
}

.hero-hint[b-k0n512mqwe] {
    opacity: 0.85;
}

.hero-tiles[b-k0n512mqwe] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--chart-gap) * 1.6);
}

.hero-tile[b-k0n512mqwe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-inline-size: calc(var(--chart-icon-box) * 1.3);
}

.charts[b-k0n512mqwe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--chart-card-min), 100%), 1fr));
    gap: var(--chart-gap);
    align-items: stretch;
}

[b-k0n512mqwe] .wide {
    grid-column: 1 / -1;
}

.whole[b-k0n512mqwe] {
    margin-block-end: var(--chart-gap);
}

.whole-number[b-k0n512mqwe] {
    color: var(--color-gray-20);
}

/* /Features/Management/FilterCard.razor.rz.scp.css */
/* The button that folds the filters is for a phone. */
.card.filter-card .filter-toggle[b-8l2em1cel7] {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile .card.filter-card .filter-toggle[b-8l2em1cel7] {
        display: inline-flex;
    }

    .mobile .card.filter-card .folded[b-8l2em1cel7] {
        display: none;
    }
}
/* /Features/Management/ManagePopup.razor.rz.scp.css */
.manage-popup[b-5qornyj1mm] {
    display: grid;
    gap: var(--manage-popup-gap);
    inline-size: var(--manage-popup-width);
    max-inline-size: 100%;
    margin: auto;
    margin-block: var(--manage-popup-margin);
    padding: var(--manage-popup-padding);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
}

.manage-popup.wide[b-5qornyj1mm] {
    inline-size: var(--manage-popup-wide);
}

.popup-head[b-5qornyj1mm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--manage-popup-gap);
}

.popup-close[b-5qornyj1mm] {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--manage-popup-close);
    block-size: var(--manage-popup-close);
    border: none;
    border-radius: 50%;
    background: var(--color-gray-95);
    color: var(--color-gray-45);
    cursor: pointer;
}

.popup-close .icon[b-5qornyj1mm] {
    inline-size: 70%;
    block-size: 70%;
}
/* /Features/Management/ManageScaffold.razor.rz.scp.css */
/* The management pages have no design: their parts are made of the tokens of the site (its colours, type, corners and
   shadows) and of the named sizes of `manage` (component-sizes.json), laid out in the flow of the page, not on the boxes
   of artboards. The sizes switch to their phone values on their own; the rules of the phone change the layout only. */
.manage[b-nfn9zyics6] {
    display: grid;
    grid-template-columns: var(--manage-nav-width) minmax(0, 1fr);
    gap: var(--manage-gap);
    align-items: start;
    max-inline-size: var(--manage-max-width);
    margin-inline: auto;
    padding: var(--manage-padding-top) var(--manage-padding-inline) var(--manage-padding-bottom);
    color: var(--color-gray-20);
}

.manage.alone[b-nfn9zyics6] {
    grid-template-columns: minmax(0, 1fr);
}

.manage-nav[b-nfn9zyics6] {
    position: sticky;
    inset-block-start: var(--manage-nav-top);
    max-block-size: calc(100dvh - var(--manage-nav-top) - var(--manage-nav-top));
    overflow-y: auto;
    padding: var(--manage-nav-padding);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.nav-title[b-nfn9zyics6] {
    margin-block-end: var(--manage-nav-title-gap);
    color: var(--color-gray-45);
}

.manage-nav ul[b-nfn9zyics6] {
    display: grid;
    gap: var(--manage-nav-gap);
}

.nav-link[b-nfn9zyics6] {
    display: block;
    padding: var(--manage-link-padding-block) var(--manage-link-padding-inline);
    border-radius: var(--radius-md);
    color: var(--color-gray-45);
}

.nav-heading[b-nfn9zyics6] {
    padding: var(--manage-link-padding-block) var(--manage-link-padding-inline);
    color: var(--color-gray-20);
}

/* A group of the menu: its head opens it, and only one stands open. */
.group-head[b-nfn9zyics6] {
    display: flex;
    align-items: center;
}

.group-head .nav-link[b-nfn9zyics6] {
    flex: 1;
}

.group-head .nav-heading[b-nfn9zyics6] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--manage-nav-gap);
    border-radius: var(--radius-md);
    text-align: start;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.group-head .nav-link + .nav-heading[b-nfn9zyics6] {
    flex: none;
}

.group-head .nav-heading:hover[b-nfn9zyics6] {
    background: var(--color-gray-97);
}

.group.current > .group-head .nav-heading[b-nfn9zyics6] {
    color: var(--theme-from);
}

.group-mark[b-nfn9zyics6] {
    --icon: url("/assets/icons/chevron-down.svg");
    flex: none;
    inline-size: var(--manage-group-mark);
    block-size: var(--manage-group-mark);
    color: var(--color-gray-55);
    transition: rotate 150ms ease;
}

.group.open > .group-head .group-mark[b-nfn9zyics6] {
    rotate: 180deg;
}

.manage-nav .group-rows[b-nfn9zyics6] {
    margin-block-start: var(--manage-nav-gap);
    animation: group-opens-b-nfn9zyics6 180ms ease;
}

.manage-nav .group:not(.open) > .group-rows[b-nfn9zyics6] {
    display: none;
}

@keyframes group-opens-b-nfn9zyics6 {
    from {
        opacity: 0;
        translate: 0 calc(var(--manage-nav-gap) * -1);
    }
}

.nested[b-nfn9zyics6] {
    padding-inline-start: var(--manage-link-padding-inline);
}

.nav-link:hover[b-nfn9zyics6] {
    background: var(--color-gray-97);
}

.nav-link.active[b-nfn9zyics6] {
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
    box-shadow: var(--theme-shadow-lg);
}

.manage-content[b-nfn9zyics6] {
    display: grid;
    gap: var(--manage-content-gap);
    min-inline-size: 0;
}

.manage-heading[b-nfn9zyics6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-heading-gap);
    align-items: center;
    justify-content: space-between;
}

.heading-actions[b-nfn9zyics6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-actions-gap);
}

/* ---- the parts of the pages ----------------------------------------------------------------------------------- */

.manage-content[b-nfn9zyics6]  .card {
    display: grid;
    gap: var(--manage-card-gap);
    padding: var(--manage-card-padding);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.manage-content[b-nfn9zyics6]  .card-title {
    font: var(--text-21-bold);
    color: var(--color-gray-20);
}

.manage-content[b-nfn9zyics6]  .account-picture {
    inline-size: var(--manage-picture);
}

.manage-content[b-nfn9zyics6]  .muted {
    color: var(--color-gray-55);
}

.manage-content[b-nfn9zyics6]  .card-form {
    display: grid;
    gap: var(--manage-card-gap);
}

/* filters above a list */
.manage-content[b-nfn9zyics6]  .form-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--manage-field-min), 1fr));
    gap: var(--manage-filter-gap);
}

.manage-content[b-nfn9zyics6]  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-filter-gap);
    align-items: end;
}

.manage-content[b-nfn9zyics6]  .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--manage-field-gap);
    min-inline-size: var(--manage-field-min);
}

.manage-content[b-nfn9zyics6]  .field.grow {
    flex: 1 1 var(--manage-field-grow);
}

.manage-content[b-nfn9zyics6]  .field-label {
    font: var(--text-16-medium);
    color: var(--color-gray-45);
}

/* The fields of the panel are of the family of the site's (form-field, wwwroot/css/fields.css): its radius and
   outline, the focus in the colour of the role with a soft ring, one chevron for the selects. */
.manage-content[b-nfn9zyics6]  .input {
    inline-size: 100%;
    block-size: var(--manage-input-height);
    padding-inline: var(--manage-input-padding);
    border: var(--form-field-border) solid var(--color-gray-81);
    border-radius: var(--form-field-radius);
    background-color: var(--color-white);
    font: var(--text-18-regular);
    color: var(--color-gray-20);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.manage-content[b-nfn9zyics6]  select.input,
.manage-content[b-nfn9zyics6]  input[list].input,
.manage-content[b-nfn9zyics6]  input[data-list].input {
    padding-inline-end: var(--form-field-chevron-space);
    background: var(--color-white) var(--form-field-chevron) no-repeat left var(--form-field-chevron-inset) center / var(--form-field-chevron-size);
    cursor: pointer;
}

.manage-content[b-nfn9zyics6]  .input:hover {
    border-color: var(--color-gray-69);
}

.manage-content[b-nfn9zyics6]  textarea.input {
    block-size: auto;
    min-block-size: var(--manage-textarea-min);
    padding-block: var(--manage-textarea-padding);
    resize: vertical;
}

.manage-content[b-nfn9zyics6]  .input:focus {
    border-color: var(--theme-to);
    box-shadow: 0 0 0 var(--form-field-ring) var(--theme-field-ring);
}

.manage-content[b-nfn9zyics6]  .input[aria-invalid="true"] {
    border-color: var(--color-red);
    box-shadow: 0 0 0 var(--form-field-ring) var(--form-field-ring-invalid);
}

.manage-content[b-nfn9zyics6]  .input::placeholder {
    color: var(--color-gray-73);
}

/* buttons: the filled one in the colours of the theme, the outlined one, the one that warns */
.manage-content[b-nfn9zyics6]  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--manage-button-height);
    padding-inline: var(--manage-button-padding);
    border-radius: var(--radius-md);
    font: var(--text-18-medium);
    white-space: nowrap;
    cursor: pointer;
}

.manage-content[b-nfn9zyics6]  .button.primary {
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
    box-shadow: var(--theme-shadow-lg);
}

.manage-content[b-nfn9zyics6]  .button.outlined {
    border: var(--border-2) solid var(--color-gray-80);
    background: var(--color-white);
    color: var(--color-gray-45);
}

.manage-content[b-nfn9zyics6]  .button.danger {
    border: var(--border-2) solid var(--color-danger);
    background: var(--color-white);
    color: var(--color-danger);
}

.manage-content[b-nfn9zyics6]  .button:disabled {
    opacity: 0.5;
    cursor: default;
}

.manage-content[b-nfn9zyics6]  .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-buttons-gap);
}

/* chips: roles and states */
.manage-content[b-nfn9zyics6]  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-chip-gap);
}

.manage-content[b-nfn9zyics6]  .chip {
    padding: var(--manage-chip-padding-block) var(--manage-chip-padding-inline);
    border-radius: var(--radius-30);
    background: var(--color-gray-95);
    font: var(--text-15-medium);
    color: var(--color-gray-45);
    white-space: nowrap;
}

.manage-content[b-nfn9zyics6]  .chip.theme {
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
}

.manage-content[b-nfn9zyics6]  .chip.danger {
    background: var(--color-danger);
    color: var(--color-white);
}

/* tabs: the chips of a choice among the parts of a page */
.manage-content[b-nfn9zyics6]  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-chip-gap);
}

.manage-content[b-nfn9zyics6]  .tabs .chip {
    border: none;
    cursor: pointer;
}

/* tables: on a phone every row becomes a card whose cells carry their labels */
/* the picture of a row of a list */
.manage-content[b-nfn9zyics6]  .thumb {
    display: block;
    inline-size: var(--manage-thumb);
    block-size: var(--manage-thumb);
    border-radius: var(--radius-md);
    object-fit: cover;
}

.manage-content[b-nfn9zyics6]  .table {
    inline-size: 100%;
    border-collapse: collapse;
}

.manage-content[b-nfn9zyics6]  .table th {
    padding: var(--manage-cell-padding);
    border-block-end: var(--border-2) solid var(--color-gray-89);
    font: var(--text-16-bold);
    color: var(--color-gray-45);
    text-align: start;
    white-space: nowrap;
}

.manage-content[b-nfn9zyics6]  .table td {
    padding: var(--manage-cell-padding-block) var(--manage-cell-padding);
    border-block-end: var(--border-1) solid var(--color-gray-94);
    font: var(--text-17-medium);
    vertical-align: middle;
}

.manage-content[b-nfn9zyics6]  .table tr.link-row {
    cursor: pointer;
}

.manage-content[b-nfn9zyics6]  .table tr.link-row:hover td {
    background: var(--color-gray-98);
}

.manage-content[b-nfn9zyics6]  .number {
    direction: ltr;
    unicode-bidi: isolate;
}

/* the line of an answer of the API */
.manage-content[b-nfn9zyics6]  .message {
    font: var(--text-18-medium);
    color: var(--color-danger);
}

.manage-content[b-nfn9zyics6]  .message.done {
    color: var(--color-primary);
}

.manage-content[b-nfn9zyics6]  .empty {
    padding: var(--manage-empty-padding);
    text-align: center;
    color: var(--color-gray-55);
}

.manage-content[b-nfn9zyics6]  .pager {
    display: flex;
    gap: var(--manage-pager-gap);
    align-items: center;
    justify-content: center;
}

/* a list of checkboxes, for roles and permissions */
.manage-content[b-nfn9zyics6]  .checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--manage-check-min), 1fr));
    gap: var(--manage-check-row-gap) var(--manage-check-column-gap);
}

.manage-content[b-nfn9zyics6]  .check {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-check-gap);
    align-items: center;
    font: var(--text-17-medium);
    cursor: pointer;
}

.manage-content[b-nfn9zyics6]  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--manage-fact-min), 1fr));
    gap: var(--manage-fact-row-gap) var(--manage-fact-column-gap);
}

.manage-content[b-nfn9zyics6]  .fact {
    display: grid;
    gap: var(--manage-fact-gap);
}

.manage-content[b-nfn9zyics6]  .fact dt {
    font: var(--text-15-medium);
    color: var(--color-gray-55);
}

.manage-content[b-nfn9zyics6]  .facts,
.manage-content[b-nfn9zyics6]  .fact dd {
    margin: 0;
}

.manage-content[b-nfn9zyics6]  .fact dd {
    font: var(--text-18-medium);
}

.manage-content[b-nfn9zyics6]  .secret {
    padding: var(--manage-secret-padding-block) var(--manage-secret-padding-inline);
    border-radius: var(--radius-md);
    background: var(--color-gray-97);
    font: var(--text-24-bold);
    direction: ltr;
    text-align: center;
    user-select: all;
}

@media (max-width: 767.98px) {
    .mobile .manage[b-nfn9zyics6] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile .manage-nav[b-nfn9zyics6] {
        position: static;
        max-block-size: none;
        overflow-y: visible;
    }

    .mobile .manage-nav ul[b-nfn9zyics6] {
        display: flex;
        overflow-x: auto;
    }

    /* the group opens in the row, after its head */
    .mobile .manage-nav .group[b-nfn9zyics6] {
        display: flex;
        align-items: center;
    }

    .mobile .manage-nav .group-rows[b-nfn9zyics6] {
        overflow-x: visible;
        margin-block-start: 0;
    }

    .mobile .nested[b-nfn9zyics6] {
        padding-inline-start: 0;
    }

    .mobile .nav-link[b-nfn9zyics6],
    .mobile .group-head .nav-heading[b-nfn9zyics6] {
        white-space: nowrap;
    }

    .mobile .manage-content[b-nfn9zyics6]  .card-title {
        font: var(--text-14-bold);
    }

    .mobile .manage-content[b-nfn9zyics6]  .field-label,
    .mobile .manage-content[b-nfn9zyics6]  .message,
    .mobile .manage-content[b-nfn9zyics6]  .fact dt {
        font: var(--text-12-medium);
    }

    .mobile .manage-content[b-nfn9zyics6]  .input,
    .mobile .manage-content[b-nfn9zyics6]  .button,
    .mobile .manage-content[b-nfn9zyics6]  .check,
    .mobile .manage-content[b-nfn9zyics6]  .fact dd {
        font: var(--text-13-medium);
    }

    .mobile .manage-content[b-nfn9zyics6]  .input,
    .mobile .manage-content[b-nfn9zyics6]  .button {
        min-block-size: var(--page-touch-target-min);
        block-size: auto;
    }

    .mobile .manage-content[b-nfn9zyics6]  .field {
        flex: 1 1 100%;
    }

    .mobile .manage-content[b-nfn9zyics6]  .form-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile .manage-content[b-nfn9zyics6]  .table thead {
        display: none;
    }

    .mobile .manage-content[b-nfn9zyics6]  .table tr {
        display: grid;
        gap: var(--manage-row-gap);
        padding-block: var(--manage-row-padding);
        border-block-end: var(--border-1) solid var(--color-gray-89);
    }

    .mobile .manage-content[b-nfn9zyics6]  .table td {
        overflow-wrap: anywhere;
        display: flex;
        gap: var(--manage-cell-label-gap);
        border: 0;
        font: var(--text-13-medium);
    }

    .mobile .manage-content[b-nfn9zyics6]  .table td::before {
        content: attr(data-label);
        flex: 0 0 var(--manage-cell-label);
        font: var(--text-12-medium);
        color: var(--color-gray-55);
    }

    .mobile .manage-content[b-nfn9zyics6]  .chip {
        font: var(--text-11-medium);
    }

    .mobile .manage-content[b-nfn9zyics6]  .secret {
        font: var(--text-18-bold);
    }
}
/* /Features/Management/NewAddressFields.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Management/Pager.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Management/PersonPicture.razor.rz.scp.css */
.person-picture[b-7qwqf2y5st] {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--session-avatar);
    block-size: var(--session-avatar);
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-gray-95);
    color: var(--color-gray-55);
}

.person-picture img[b-7qwqf2y5st] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.person-picture .icon[b-7qwqf2y5st] {
    inline-size: 55%;
    block-size: 55%;
}
/* /Features/Management/PlaceFilters.razor.rz.scp.css */
/* The filters stand in the `.filters` of the list, whose look ManageScaffold carries. */
/* /Features/Management/ProvinceCityFields.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Management/RegionsPage.razor.rz.scp.css */
/* A region is a chip of the management pages that opens it in the form above. */
.chip[b-4hkp2lzlh3] {
    cursor: pointer;
    font: inherit;
}
/* /Features/Management/RoleChips.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Management/StatTiles.razor.rz.scp.css */
.stat-tiles[b-1v0ow76tmg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--stat-tile-min), 1fr));
    gap: var(--manage-card-gap);
}

.stat-tile[b-1v0ow76tmg] {
    display: flex;
    align-items: center;
    gap: var(--stat-tile-gap);
    padding: var(--stat-tile-padding);
    border: none;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    text-align: start;
}

.stat-tile.press[b-1v0ow76tmg] {
    cursor: pointer;
}

.tile-mark[b-1v0ow76tmg] {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--stat-tile-mark);
    block-size: var(--stat-tile-mark);
    border-radius: 50%;
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
}

.tile-mark .icon[b-1v0ow76tmg] {
    inline-size: 55%;
    block-size: 55%;
}

.tile-words[b-1v0ow76tmg] {
    display: grid;
    min-inline-size: 0;
}

.tile-number[b-1v0ow76tmg] {
    color: var(--color-gray-20);
}

.tile-label[b-1v0ow76tmg] {
    color: var(--color-gray-45);
}
/* /Features/Media/BannersPage.razor.rz.scp.css */
/* The list shares the look of the panel (ManageScaffold). */
/* /Features/Media/EditorSettingsPage.razor.rz.scp.css */
/* The page shares the look of the panel (ManageScaffold). */
/* /Features/Media/FileField.razor.rz.scp.css */
/* The rest of the field is the field of the management pages (ManageScaffold). Dropify draws the box: it gets the
   font, the corners, the line and the height of the management pages. */
.drop[b-thokoe3rno]  .dropify-wrapper {
    block-size: var(--manage-drop-height);
    border: var(--border-2) dashed var(--color-gray-73);
    border-radius: var(--radius-md);
    color: var(--color-gray-55);
    font: inherit;
}

.drop[b-thokoe3rno]  .dropify-wrapper:hover {
    border-color: var(--theme-to);
}

.drop[b-thokoe3rno]  .dropify-wrapper .dropify-clear {
    font: inherit;
}

/* The picture of the preview in the middle of the box. */
.drop[b-thokoe3rno]  .dropify-wrapper .dropify-render {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
}

.drop[b-thokoe3rno]  .dropify-wrapper .dropify-render img {
    inset-block-start: auto;
    transform: none;
}

.file-player[b-thokoe3rno] {
    inline-size: 100%;
    max-inline-size: var(--manage-file-player);
}

.file-progress[b-thokoe3rno] {
    inline-size: 100%;
    accent-color: var(--theme-to);
}
/* /Features/Media/MediaCategoriesPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Media/MediaFeaturedPage.razor.rz.scp.css */
/* The row as a list in its order: the cover, the title and the buttons that move it. */
.row-list[b-wv0vnco9ex] {
    display: flex;
    flex-direction: column;
    gap: var(--manage-card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.row-entry[b-wv0vnco9ex] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-buttons-gap);
    align-items: center;
}

.row-title[b-wv0vnco9ex] {
    flex: 1;
}
/* /Features/Media/MediaItemPage.razor.rz.scp.css */
/* Where the piece stands, above the form. */
.state[b-vzhjki1jcd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-buttons-gap);
    align-items: center;
}

/* /Features/Media/MediaItemsPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Media/MediaManageLinks.razor.rz.scp.css */
/* The links are the buttons of the management pages (ManageScaffold). */
/* /Features/Media/MediaOccasionsPage.razor.rz.scp.css */
/* An occasion is a chip of the management pages that opens it in the form above. */
.chip[b-qenepfw9j3] {
    cursor: pointer;
    font: inherit;
}
/* /Features/Media/MediaPeoplePage.razor.rz.scp.css */
/* The photo of a person in its row. */
.table td .thumb[b-w2nrt1iu2z] {
    border-radius: 50%;
}

/* The name opens the person in the form above, as the row does. */
.link-button[b-w2nrt1iu2z] {
    padding: 0;
    background: none;
    color: var(--theme-to);
    font: inherit;
    cursor: pointer;
}
/* /Features/Media/MediaStateChips.razor.rz.scp.css */
/* The chips are those of the management pages (ManageScaffold). */
/* /Features/Messaging/SmsPage.razor.rz.scp.css */
/* The text of an SMS breaks anywhere in its cell, a long word or number included. */
.table td[b-awhtcyb0uk] {
    overflow-wrap: anywhere;
}
/* /Features/News/NewsArticlePage.razor.rz.scp.css */
/* Where the article stands, above the form. */
.state[b-f6n92vx9lg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--manage-buttons-gap);
    align-items: center;
}

/* /Features/News/NewsArticlesPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/News/NewsStateChip.razor.rz.scp.css */
/* The chips are those of the management pages (ManageScaffold). */
/* /Features/Notifications/AnnouncementsPage.razor.rz.scp.css */
/* The list shares the look of the panel (ManageScaffold). */
/* /Features/Notifications/RulePage.razor.rz.scp.css */
/* The placeholders under the text are help: they wrap anywhere. */
.muted[b-85mvzs1t13] {
    margin: 0;
    overflow-wrap: anywhere;
}
/* /Features/Notifications/RulesPage.razor.rz.scp.css */
/* The name of a rule leads to it, as the code of a request does in «مجالس». */
.table a[b-kfhnw0v9ra] {
    color: var(--theme-to);
}
/* /Features/Organizers/OrganizerProfileFields.razor.rz.scp.css */
/* The papers of the person responsible, shown only on request. */
.group[b-2fgls5wews] {
    display: flex;
    flex-direction: column;
    gap: var(--manage-filter-gap);
    margin: 0;
    padding: 0;
    border: 0;
}

.paper[b-2fgls5wews] {
    max-inline-size: 100%;
    block-size: auto;
}
/* /Features/Organizers/OrganizersPage.razor.rz.scp.css */
/* The logo of an organizer in its row. */
.table td .thumb[b-8biif0lt05] {
    border-radius: 50%;
}

/* The name opens the organizer in the form above, as the row does; what it belongs to stands under it. */
.link-button[b-8biif0lt05] {
    display: block;
    padding: 0;
    background: none;
    color: var(--theme-to);
    font: inherit;
    cursor: pointer;
}
/* /Features/Payments/DonationsPage.razor.rz.scp.css */
/* The page has the look of the management pages (ManageScaffold); nothing of its own. */
/* /Features/Payments/PaymentsPage.razor.rz.scp.css */
/* The page has the look of the management pages (ManageScaffold); nothing of its own. */
/* /Features/Preachers/PreacherApplicationPage.razor.rz.scp.css */
/* The photo of the person beside the name and the state. */
.head[b-x39lkxxmu1] {
    display: flex;
    align-items: center;
    gap: var(--manage-card-gap);
}

.head-text[b-x39lkxxmu1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--manage-fact-gap);
}

.photo[b-x39lkxxmu1] {
    inline-size: var(--manage-thumb);
    block-size: var(--manage-thumb);
    border-radius: 50%;
    object-fit: cover;
}

.note[b-x39lkxxmu1] {
    margin: 0;
    white-space: pre-line;
    color: var(--color-gray-45);
}
/* /Features/Preachers/PreacherApplicationsPage.razor.rz.scp.css */
/* The name leads to the request, as the row does. */
.table a[b-nhk3d6cgss] {
    color: var(--theme-to);
}
/* /Features/Preachers/PreacherFacts.razor.rz.scp.css */
/* The facts share the look of the panel (ManageScaffold). */
/* /Features/Preachers/PreacherStateChip.razor.rz.scp.css */
/* The chip itself is drawn by the management frame (.chip); its words stay on one line. */
.chip[b-h3018grhh5] {
    white-space: nowrap;
}
/* /Features/Reports/ReportGrid.razor.rz.scp.css */
.report-scroll[b-h1b6oeajwu] {
    overflow-x: auto;
}

.report-grid[b-h1b6oeajwu] {
    inline-size: max-content;
    min-inline-size: 100%;
}

.report-sort[b-h1b6oeajwu] {
    display: inline-flex;
    align-items: center;
    gap: var(--manage-chip-gap);
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.report-filters th[b-h1b6oeajwu] {
    padding-block-start: 0;
}

.report-filters .input[b-h1b6oeajwu] {
    min-inline-size: var(--report-filter-min);
    block-size: var(--report-filter-height);
}

.report-opens[b-h1b6oeajwu] {
    cursor: pointer;
}

.report-detail td[b-h1b6oeajwu] {
    color: var(--color-gray-55);
}
/* /Features/Reports/ReportsPage.razor.rz.scp.css */
.report-format[b-h2nclaae0x] {
    display: flex;
    align-items: center;
    gap: var(--manage-chip-gap);
    min-inline-size: 0;
}

.report-format .input[b-h2nclaae0x] {
    inline-size: auto;
}
/* /Features/Setup/SetupPage.razor.rz.scp.css */
/* The bar of the steps wraps on a phone; the parts themselves are those of the panel. */
.steps[b-hbm7aik2rn] {
    padding: 0;
    list-style: none;
}
/* /Features/Setup/SignInSettingsPage.razor.rz.scp.css */
/* Made of the parts of the panel (ManageScaffold.razor.css): it has nothing of its own. */
/* /Features/Tickets/NewTicketPopup.razor.rz.scp.css */
/* The form shares the look of the panel (ManageScaffold). */
/* /Features/Tickets/TicketPage.razor.rz.scp.css */
/* The conversation has a height of its own: its messages scroll inside it. */
.thread[b-dzfgbzzrpa] {
    block-size: var(--ticket-page-panel-thread-height);
}
/* /Features/Tickets/TicketPopup.razor.rz.scp.css */
/* The conversation has a height of its own: its messages scroll inside it. */
.popup-thread[b-w1yz0e4v0o] {
    block-size: var(--ticket-page-panel-thread-height);
}
/* /Features/Tickets/TicketsPage.razor.rz.scp.css */
/* A ticket with a message of the person not read yet: its row in bold. */
.table tr.unread td[b-ff250g9fd6] {
    font: var(--text-17-bold);
}

@media (max-width: 767.98px) {
    .mobile .table tr.unread td[b-ff250g9fd6] {
        font: var(--text-13-bold);
    }
}
/* /Features/Users/AccountMadeCard.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/HostsPage.razor.rz.scp.css */
/* The list shares the look of the panel (ManageScaffold). */
/* /Features/Users/NewPersonPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/NewStaffPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/OpinionFigures.razor.rz.scp.css */
/* The lines the hosts chose most, under their tab's name. */
.points[b-3y67cbqqyg] {
    display: flex;
    flex-direction: column;
    gap: var(--manage-field-gap);
}

.points-title[b-3y67cbqqyg] {
    margin: 0;
}
/* /Features/Users/PreacherDetailsEditPage.razor.rz.scp.css */
.card-stack[b-6o03u2mgow] {
    display: grid;
    gap: var(--manage-filter-gap);
}

.person-photo[b-6o03u2mgow] {
    display: flex;
    align-items: center;
    gap: var(--manage-filter-gap);
}

.photo-button[b-6o03u2mgow] {
    position: relative;
    cursor: pointer;
}

.photo-button[b-6o03u2mgow]  .photo-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
}

.question[b-6o03u2mgow] {
    display: grid;
    gap: var(--manage-filter-gap);
}
/* /Features/Users/PreachersPage.razor.rz.scp.css */
/* The list shares the look of the panel (ManageScaffold). */
/* /Features/Users/StaffPage.razor.rz.scp.css */
/* The list shares the look of the panel (ManageScaffold). */
/* /Features/Users/StaffScopeField.razor.rz.scp.css */
/* The scope of a staff role, under its box to tick: the look comes from ManageScaffold, this only places the parts. */
.staff-scope[b-w1bif29lr3] {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: var(--manage-filter-gap);
  min-inline-size: 0;
}

.remove[b-w1bif29lr3] {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* /Features/Users/UserAccessCard.razor.rz.scp.css */
/* Made of the parts of the panel (ManageScaffold.razor.css): it has nothing of its own. */
/* /Features/Users/UserAccountCard.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/UserActionsCard.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/UserAddressesCard.razor.rz.scp.css */
.addresses[b-zv9n4ol971] {
    display: grid;
    gap: var(--manage-field-gap);
}

.address[b-zv9n4ol971] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--manage-filter-gap);
}

.address-map[b-zv9n4ol971] {
    position: relative;
    flex: none;
    inline-size: var(--manage-address-map-width);
    block-size: var(--manage-address-map-height);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-gray-95);
}
/* /Features/Users/UserAuditCard.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/UserOpinionsCard.razor.rz.scp.css */
.line[b-f8clcz96lk] {
    display: block;
}

/* The heading is as wide as its words, so that the pencil stands just after them. */
.card-title[b-f8clcz96lk] {
    position: relative;
    inline-size: fit-content;
}

/* /Features/Users/UserPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/UserPersonalCard.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/UserRolesCard.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/UsersPage.razor.rz.scp.css */
/* The page only arranges shared parts: ManageScaffold carries the styles of the management pages. */
/* /Features/Users/UserTickets.razor.rz.scp.css */
/* The list shares the look of the panel (ManageScaffold). */
/* /Layout/FooterArea.razor.rz.scp.css */
.footer-area[b-mwcj3vggk3] {
    position: relative;
}

.card[b-mwcj3vggk3] {
    position: relative;
    inline-size: var(--footer-card-width);
    block-size: var(--footer-card-height);
    margin-inline: auto;
    border-radius: var(--radius-xl);
    background: linear-gradient(var(--footer-card-angle), var(--theme-from) 0%, var(--theme-to) 100%);
}

.watermark[b-mwcj3vggk3] {
    position: absolute;
    inset-inline-start: var(--footer-card-watermark-start);
    inset-block-start: var(--footer-card-watermark-top);
    inline-size: var(--footer-card-watermark-width);
    block-size: var(--footer-card-watermark-height);
    --icon: url("/assets/graphics/logo-2-solid.svg");
    color: var(--color-white);
    opacity: var(--footer-card-watermark-opacity);
}

/* The frame of the design, centred, for the large logo beside the footer; it lies behind the texts and the install bar. */
.frame[b-mwcj3vggk3] {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    inline-size: var(--page-design-width);
    margin-inline: auto;
    pointer-events: none;
}

/* The logo ends above the install bar, as far above it as the logo of the footer card ends above the lower edge of
   its card (#86). The artboards have it lower, with its end behind the bar: owner's decision of 2026-10-11. */
.footer-logo[b-mwcj3vggk3] {
    position: absolute;
    inset-inline-start: var(--footer-area-light-logo-start);
    inset-block-end: calc(var(--install-bar-height) + var(--footer-card-height) - var(--footer-card-watermark-top) - var(--footer-card-watermark-height));
    inline-size: var(--footer-area-light-logo-width);
    block-size: var(--footer-area-light-logo-height);
    opacity: var(--footer-area-light-logo-opacity);
}

.content[b-mwcj3vggk3],
.install[b-mwcj3vggk3] {
    position: relative;
}

/* On the card the footer lies over it, starting below the top edge of the card. */
.on-card .content[b-mwcj3vggk3] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: var(--footer-card-content-top);
}

.on-card .install[b-mwcj3vggk3] {
    margin-block-start: var(--footer-area-card-install-gap);
}

.on-page .install[b-mwcj3vggk3] {
    margin-block-start: var(--footer-area-light-install-gap);
}

@media (max-width: 767.98px) {
    /* Phone: one white column. The card, the large logo and the room between footer and install bar of the desktop
       design are not part of it; the bottom bar lies over the end of the page, so the column ends above it. */
    .mobile .footer-area[b-mwcj3vggk3] {
        padding-block: calc(2 * var(--phone-layout-gap)) calc(2 * var(--phone-layout-gap) + var(--tab-bar-height));
        background: var(--color-white);
    }

    .mobile .card[b-mwcj3vggk3],
    .mobile .frame[b-mwcj3vggk3] {
        display: none;
    }

    .mobile .on-card .content[b-mwcj3vggk3] {
        position: relative;
        inset-block-start: 0;
    }

    .mobile .on-card .install[b-mwcj3vggk3],
    .mobile .on-page .install[b-mwcj3vggk3] {
        margin-block-start: calc(2 * var(--phone-layout-gap));
    }
}
/* /Layout/InstallAppBar.razor.rz.scp.css */
.install-bar[b-6iwvlncaai] {
    position: relative;
    inline-size: var(--install-bar-width);
    block-size: var(--install-bar-height);
    margin-inline: auto;
    border-radius: var(--radius-xl);
    background: linear-gradient(var(--install-bar-angle), var(--theme-from) var(--install-bar-stop-from), var(--theme-to) var(--install-bar-stop-to));
    box-shadow: var(--theme-shadow-lg);
    color: var(--color-white);
}

.tile[b-6iwvlncaai] {
    position: absolute;
    inset-inline-start: var(--install-bar-tile-start);
    inset-block-start: var(--install-bar-tile-top);
    inline-size: var(--install-bar-tile-size);
    block-size: var(--install-bar-tile-size);
    border-radius: var(--radius-xl);
    background: var(--color-white);
}

.dot[b-6iwvlncaai] {
    position: absolute;
    inset-block-start: var(--install-bar-dot-top);
    inline-size: var(--install-bar-dot-size);
    block-size: var(--install-bar-dot-size);
    border-radius: 50%;
    background: var(--color-gray-20);
}

.dot-1[b-6iwvlncaai] {
    inset-inline-start: var(--install-bar-dot-1-start);
}

.dot-2[b-6iwvlncaai] {
    inset-inline-start: var(--install-bar-dot-2-start);
}

.dot-3[b-6iwvlncaai] {
    inset-inline-start: var(--install-bar-dot-3-start);
}

.label[b-6iwvlncaai] {
    position: absolute;
    inset-inline-start: var(--install-bar-label-start);
    inset-block-start: var(--install-bar-label-top);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* Phone: the bar has the size and the corners of a button of the mobile design (design/_tools/pages/phone.py);
       what it holds takes its sizes from the same names as on the desktop. */
    .mobile .install-bar[b-6iwvlncaai] {
        border-radius: var(--install-bar-radius);
        box-shadow: var(--shadow-lg-gray-89);
    }

    .mobile .tile[b-6iwvlncaai] {
        border-radius: var(--install-bar-tile-radius);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* tokens.css switches the brand colours on the data-theme attribute of this element, and the values of the mobile
   design on its class `mobile`, which a page without a mobile frame does not get. */
/* The page is what a menu that hangs from the header is placed in (Overlay, on-page). */
.shell[b-a7kgwb8mfm] {
    display: flex;
    position: relative;
    flex-direction: column;
    min-block-size: 100vh;
}

.main[b-a7kgwb8mfm] {
    flex: 1 0 auto;
}
/* /Layout/MobileTabBar.razor.rz.scp.css */
/* Only the mobile design has this bar. */
.tab-bar[b-yfe2bjisjh] {
    display: none;
}

@media (max-width: 767.98px) {
    /* Stays at the bottom of the screen and lies over the end of the page, as in the design: it takes no room. */
    .mobile .tab-bar[b-yfe2bjisjh] {
        display: block;
        position: sticky;
        inset-block-end: 0;
        z-index: 2;
        /* The box also holds the shadow of the round button, which reaches above the bar. */
        block-size: calc(var(--tab-bar-height) + var(--tab-bar-action-shadow-top));
        margin-block-start: calc(-1 * (var(--tab-bar-height) + var(--tab-bar-action-shadow-top)));
        overflow: hidden;
        pointer-events: none;
    }

    /* On a screen wider than the design the white bar and its shadow continue to both edges. */
    .mobile .tab-bar[b-yfe2bjisjh]::before,
    .mobile .tab-bar[b-yfe2bjisjh]::after {
        content: "";
        position: absolute;
        inset-block: calc(var(--tab-bar-action-shadow-top) + var(--tab-bar-shape-top) + var(--tab-bar-shape-edge)) 0;
        inline-size: calc((100% - var(--page-design-width)) / 2);
        background: var(--color-white);
        box-shadow: 0 calc(-1 * var(--tab-bar-band-shadow-rise)) var(--tab-bar-band-shadow-blur) var(--tab-bar-band-shadow-color);
        pointer-events: auto;
    }

    .mobile .tab-bar[b-yfe2bjisjh]::before {
        inset-inline-start: 0;
    }

    .mobile .tab-bar[b-yfe2bjisjh]::after {
        inset-inline-end: 0;
    }

    /* The frame of the design, centred; positions are measured from its inline start and from the top of the round button. */
    .mobile .frame[b-yfe2bjisjh] {
        position: absolute;
        /* above both bands, so that their shadows stay behind the bar */
        z-index: 1;
        inset-block: var(--tab-bar-action-shadow-top) 0;
        inset-inline: 0;
        inline-size: var(--page-design-width);
        margin-inline: auto;
    }

    /* Beside the bar the image only holds its side shadow; that part is cut so it cannot fall on the white bands. */
    .mobile .shape[b-yfe2bjisjh] {
        position: absolute;
        inset-inline-start: var(--tab-bar-shape-start);
        inset-block-start: var(--tab-bar-shape-top);
        inline-size: var(--tab-bar-shape-width);
        block-size: var(--tab-bar-shape-height);
        clip-path: polygon(
            0 0,
            100% 0,
            100% var(--tab-bar-shape-edge),
            calc(100% - var(--tab-bar-shape-margin)) var(--tab-bar-shape-edge),
            calc(100% - var(--tab-bar-shape-margin)) 100%,
            var(--tab-bar-shape-margin) 100%,
            var(--tab-bar-shape-margin) var(--tab-bar-shape-edge),
            0 var(--tab-bar-shape-edge));
        pointer-events: auto;
    }

    /* A tab reacts in a box of the minimum touch width around the centre of its label, down to the edge of the screen. */
    .mobile .tab[b-yfe2bjisjh] {
        position: absolute;
        inset-block: var(--tab-bar-tab-top) 0;
        inset-inline-start: calc(var(--center) - var(--page-touch-target-min) / 2);
        inline-size: var(--page-touch-target-min);
        pointer-events: auto;
    }

    .mobile .tab-icon[b-yfe2bjisjh] {
        position: absolute;
        inset-inline-start: calc(var(--icon-start) - var(--center) + var(--page-touch-target-min) / 2);
        inset-block-start: calc(var(--icon-top) - var(--tab-bar-tab-top));
        inline-size: var(--icon-width);
        block-size: var(--icon-height);
        color: var(--color-gray-88);
    }

    /* the labels of the home frames on both bars (owner, 2026-10-16): 1:21569 sets them smaller and off the icons */
    .mobile .tab-label[b-yfe2bjisjh] {
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(var(--tab-bar-browse-label-top) - var(--tab-bar-tab-top));
        text-align: center;
        white-space: nowrap;
        color: var(--color-gray-88);
    }

    .mobile .home[b-yfe2bjisjh] {
        --center: var(--tab-bar-browse-home-center);
        --icon-start: var(--tab-bar-home-icon-start);
        --icon-top: var(--tab-bar-home-icon-top);
        --icon-width: var(--tab-bar-home-icon-width);
        --icon-height: var(--tab-bar-home-icon-height);
        --icon: url("/assets/mobile/tab-home.svg");
    }

    .mobile .content[b-yfe2bjisjh] {
        --center: var(--tab-bar-browse-content-center);
        --icon-start: var(--tab-bar-content-icon-start);
        --icon-top: var(--tab-bar-content-icon-top);
        --icon-width: var(--tab-bar-content-icon-width);
        --icon-height: var(--tab-bar-content-icon-height);
        --icon: url("/assets/mobile/tab-content.svg");
    }

    .mobile .follow[b-yfe2bjisjh] {
        --center: var(--tab-bar-browse-follow-center);
        --icon-start: var(--tab-bar-follow-icon-start);
        --icon-top: var(--tab-bar-follow-icon-top);
        --icon-width: var(--tab-bar-follow-icon-width);
        --icon-height: var(--tab-bar-follow-icon-height);
        --icon: url("/assets/mobile/tab-follow.svg");
    }

    .mobile .profile[b-yfe2bjisjh] {
        --center: var(--tab-bar-browse-profile-center);
        --icon-start: var(--tab-bar-profile-icon-start);
        --icon-top: var(--tab-bar-profile-icon-top);
        --icon-width: var(--tab-bar-profile-icon-width);
        --icon-height: var(--tab-bar-profile-icon-height);
        --icon: url("/assets/mobile/tab-profile.svg");
    }

    /* The round button reacts inside its circle; its image is larger because it carries the shadow. */
    .mobile .action[b-yfe2bjisjh] {
        position: absolute;
        inset-inline-start: var(--tab-bar-action-start);
        inset-block-start: 0;
        inline-size: var(--tab-bar-action-size);
        block-size: var(--tab-bar-action-size);
        border-radius: 50%;
        color: var(--color-white);
        pointer-events: auto;
        --plus-start: var(--tab-bar-plus-start);
        --plus-top: var(--tab-bar-plus-top);
        --plus-length: var(--tab-bar-plus-length);
        --plus-thickness: var(--tab-bar-plus-thickness);
        --plus-radius: var(--tab-bar-plus-radius);
    }

    .mobile .action-shape[b-yfe2bjisjh] {
        position: absolute;
        inset-inline-start: calc(-1 * var(--tab-bar-action-shadow-side));
        inset-block-start: calc(-1 * var(--tab-bar-action-shadow-top));
        inline-size: calc(var(--tab-bar-action-size) + 2 * var(--tab-bar-action-shadow-side));
        block-size: calc(var(--tab-bar-action-size) + var(--tab-bar-action-shadow-top) + var(--tab-bar-action-shadow-bottom));
        pointer-events: none;
    }

    /* The bar of the home and content frames: what differs from the one above. */
    .mobile .tab.active .tab-icon[b-yfe2bjisjh],
    .mobile .tab.active .tab-label[b-yfe2bjisjh] {
        color: var(--color-primary);
    }

    .mobile .browse .action[b-yfe2bjisjh] {
        color: var(--color-gray-45);
    }

    .mobile .browse .action-shape[b-yfe2bjisjh] {
        inset-inline-start: calc(-1 * var(--tab-bar-browse-action-bleed));
        inset-block-start: calc(-1 * var(--tab-bar-browse-action-bleed));
        inline-size: calc(var(--tab-bar-action-size) + 2 * var(--tab-bar-browse-action-bleed));
        block-size: calc(var(--tab-bar-action-size) + 2 * var(--tab-bar-browse-action-bleed));
    }
}
/* /Layout/PageLoader.razor.rz.scp.css */
/* Nothing of it takes a click: the page stays usable under it. */
.page-loader[b-zl5etrpfi7] {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}

/* The line along the top of the window: a light in the colours of the theme that runs again and again. */
.line[b-zl5etrpfi7] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: var(--site-loader-bar);
    overflow: hidden;
    opacity: 0;
    transition: opacity 250ms ease;
}

.line[b-zl5etrpfi7]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 45%;
    border-radius: var(--site-loader-bar);
    background: linear-gradient(90deg, transparent, var(--theme-from) 30%, var(--theme-to) 70%, transparent);
}

.shown .line[b-zl5etrpfi7] {
    opacity: 1;
}

.shown .line[b-zl5etrpfi7]::before {
    animation: run-b-zl5etrpfi7 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes run-b-zl5etrpfi7 {
    from {
        inset-inline-start: -45%;
    }

    to {
        inset-inline-start: 100%;
    }
}

/* The logo floats over the middle of the page while the wait goes on. */
.float[b-zl5etrpfi7] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: var(--site-loader-float-top);
    display: flex;
    justify-content: center;
    opacity: 0;
    scale: 0.8;
    transition: opacity 300ms ease, scale 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.float.shown[b-zl5etrpfi7] {
    opacity: 1;
    scale: 1;
}

/* What does not show does not run: a page at rest would be laid out sixty times a second. */
.float:not(.shown) .loader-ring[b-zl5etrpfi7],
.float:not(.shown) .loader-logo[b-zl5etrpfi7] {
    animation: none;
}

/* A page that shows its own loader (Loading) has the line only. */
.shell:has(.loading) .float[b-zl5etrpfi7] {
    display: none;
}
/* /Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-mztxpx10zl] {
    block-size: var(--site-footer-height);
}

.on-page[b-mztxpx10zl] {
    --footer-heading: var(--color-gray-3);
    --footer-text: var(--color-black);
    --footer-rule: var(--color-primary);
    --footer-icon: var(--color-gray-45);
}

.on-card[b-mztxpx10zl] {
    --footer-heading: var(--color-white);
    --footer-text: var(--color-white);
    --footer-rule: var(--color-white);
    --footer-icon: var(--color-white);
}

/* Positions are measured from the inline start of the frame of the design and from the top of the title. */
.frame > *[b-mztxpx10zl] {
    position: absolute;
}

.title[b-mztxpx10zl],
.links[b-mztxpx10zl],
.contact-title[b-mztxpx10zl],
.phone[b-mztxpx10zl],
.email[b-mztxpx10zl],
.social-title[b-mztxpx10zl] {
    color: var(--footer-heading);
    white-space: nowrap;
}

.title[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-main-start);
    inset-block-start: var(--site-footer-title-top);
}

/* A rule is a thick line with round ends. */
.rule[b-mztxpx10zl] {
    block-size: var(--site-footer-rule-thickness);
    border-radius: calc(var(--site-footer-rule-thickness) / 2);
    background: var(--footer-rule);
}

.main-rule[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-main-rule-start);
    inset-block-start: var(--site-footer-main-rule-top);
    inline-size: var(--site-footer-main-rule-width);
}

/* The paragraph and the address wrap on the lines of the design, as many as it has room for: what is longer ends in
   an ellipsis (a phone shows all of it). */
.text[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-main-start);
    inset-block-start: var(--site-footer-text-top);
    inline-size: var(--site-footer-text-width);
    color: var(--footer-text);
}

.written[b-mztxpx10zl] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
}

.text[b-mztxpx10zl] {
    line-height: var(--site-footer-text-line-pitch);
    -webkit-line-clamp: 11;
}

.address[b-mztxpx10zl] {
    line-height: var(--site-footer-address-line-pitch);
    -webkit-line-clamp: 2;
}

.email a[b-mztxpx10zl] {
    color: inherit;
}

/* A network with an address is a link over its drawing. */
.social-link[b-mztxpx10zl] {
    position: absolute;
    inset: 0;
}

.links[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-links-start);
    inset-block-start: 0;
}

.links li[b-mztxpx10zl] {
    position: absolute;
    inset-inline-start: 0;
}

.link-1[b-mztxpx10zl] {
    inset-block-start: var(--site-footer-link-1-top);
}

.link-2[b-mztxpx10zl] {
    inset-block-start: var(--site-footer-link-2-top);
}

.link-3[b-mztxpx10zl] {
    inset-block-start: var(--site-footer-link-3-top);
}

.link-4[b-mztxpx10zl] {
    inset-block-start: var(--site-footer-link-4-top);
}

.link-5[b-mztxpx10zl] {
    inset-block-start: var(--site-footer-link-5-top);
}

.link-6[b-mztxpx10zl] {
    inset-block-start: var(--site-footer-link-6-top);
}

.link-7[b-mztxpx10zl] {
    inset-block-start: var(--site-footer-link-7-top);
}

.contact-title[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-links-start);
    inset-block-start: var(--site-footer-contact-title-top);
}

.contact-rule[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-contact-rule-start);
    inset-block-start: var(--site-footer-contact-rule-top);
    inline-size: var(--site-footer-contact-rule-width);
}

.address[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-links-start);
    inset-block-start: var(--site-footer-address-top);
    inline-size: var(--site-footer-address-width);
    color: var(--footer-text);
}

.phone[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-links-start);
    inset-block-start: var(--site-footer-phone-top);
}

.email[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-links-start);
    inset-block-start: var(--site-footer-email-top);
}

.social-title[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-social-start);
    inset-block-start: var(--site-footer-social-title-top);
}

.social-rule[b-mztxpx10zl] {
    inset-inline-start: var(--site-footer-social-start);
    inset-block-start: var(--site-footer-social-rule-top);
    inline-size: var(--site-footer-social-rule-width);
}

.social[b-mztxpx10zl] {
    inset: 0;
}

.social-icon[b-mztxpx10zl] {
    position: absolute;
    inset-inline-start: var(--start);
    inset-block-start: var(--top);
    inline-size: var(--size);
    block-size: var(--size);
    color: var(--footer-icon);
}

.social-1[b-mztxpx10zl] {
    --start: var(--site-footer-social-1-start);
    --top: var(--site-footer-social-1-top);
    --size: var(--site-footer-social-1-size);
    --icon: url("/assets/icons/instagram.svg");
}

.social-2[b-mztxpx10zl] {
    --start: var(--site-footer-social-2-start);
    --top: var(--site-footer-social-2-top);
    --size: var(--site-footer-social-2-size);
    --icon: url("/assets/icons/icon-01.svg");
}

.social-3[b-mztxpx10zl] {
    --start: var(--site-footer-social-3-start);
    --top: var(--site-footer-social-3-top);
    --size: var(--site-footer-social-3-size);
    --icon: url("/assets/icons/icon-03.svg");
}

.social-4[b-mztxpx10zl] {
    --start: var(--site-footer-social-4-start);
    --top: var(--site-footer-social-4-top);
    --size: var(--site-footer-social-4-size);
    --icon: url("/assets/icons/icon-02.svg");
}

.social-5[b-mztxpx10zl] {
    --start: var(--site-footer-social-5-start);
    --top: var(--site-footer-social-5-top);
    --size: var(--site-footer-social-5-size);
    --icon: url("/assets/icons/icon-04.svg");
}

@media (max-width: 767.98px) {
    /* Phone: one column in the flow of the page, between the side margins. The colours are those of the footer on the
       page background, also where the desktop design has the gradient card. */
    .mobile .site-footer[b-mztxpx10zl] {
        block-size: auto;
        --footer-heading: var(--color-gray-3);
        --footer-text: var(--color-gray-19);
        --footer-rule: var(--color-primary);
        --footer-icon: var(--color-gray-45);
    }

    .mobile .frame[b-mztxpx10zl] {
        padding-inline: var(--phone-layout-margin);
    }

    .mobile .frame > *[b-mztxpx10zl] {
        position: static;
        inline-size: auto;
    }

    /* A rule: one distance under its title, as long and as thick as the rule of the mobile design. */
    .mobile .rule[b-mztxpx10zl] {
        display: block;
        inline-size: var(--phone-layout-rule-width);
        block-size: var(--phone-layout-rule);
        margin-block: var(--phone-layout-gap);
        border-radius: var(--phone-layout-rule);
    }

    /* The two texts wrap as they fit; their lines are a fixed distance apart. */
    .mobile .text[b-mztxpx10zl],
    .mobile .address[b-mztxpx10zl] {
        line-height: var(--phone-layout-line);
    }

    .mobile .written[b-mztxpx10zl] {
        display: block;
    }

    .mobile .social-icon[b-mztxpx10zl] {
        position: relative;
    }

    /* The links: two columns of rows as high as the minimum touch area. */
    .mobile .links[b-mztxpx10zl] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-block-start: var(--phone-layout-gap);
    }

    .mobile .links li[b-mztxpx10zl] {
        display: flex;
        position: static;
        align-items: center;
        block-size: var(--page-touch-target-min);
    }

    .mobile .contact-title[b-mztxpx10zl],
    .mobile .social-title[b-mztxpx10zl] {
        margin-block-start: var(--phone-layout-gap);
    }

    .mobile .phone[b-mztxpx10zl],
    .mobile .email[b-mztxpx10zl] {
        line-height: var(--phone-layout-line);
    }

    /* The social networks: one row of cells as wide as the minimum touch area, each drawing in the middle of its cell. */
    .mobile .social[b-mztxpx10zl] {
        display: flex;
        margin-inline-start: calc((var(--site-footer-social-size) - var(--page-touch-target-min)) / 2);
    }

    .mobile .social-icon[b-mztxpx10zl] {
        position: static;
        inline-size: var(--site-footer-social-size);
        block-size: var(--site-footer-social-size);
        margin: calc((var(--page-touch-target-min) - var(--site-footer-social-size)) / 2);
    }
}
/* /Layout/SiteHeader.razor.rz.scp.css */
.site-header[b-lr7fjtygwa] {
    position: relative;
    z-index: 1;
    block-size: var(--site-header-height);
    background: var(--color-white);
    box-shadow: var(--shadow-sm-2);
}

.logo[b-lr7fjtygwa] {
    position: absolute;
    inset-inline-start: var(--site-header-logo-start);
    inset-block-start: var(--site-header-logo-top);
    inline-size: var(--site-header-logo-width);
    block-size: var(--site-header-logo-height);
}

.logo-image[b-lr7fjtygwa] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

/* The white logo of the mobile bar. */
.logo-mark[b-lr7fjtygwa] {
    display: none;
}

.title[b-lr7fjtygwa] {
    display: none;
}

.search[b-lr7fjtygwa] {
    position: absolute;
    inset-inline-start: var(--site-header-search-start);
    inset-block-start: var(--site-header-search-top);
    inline-size: var(--site-header-search-size);
    block-size: var(--site-header-search-size);
    border: var(--border-1) solid var(--color-gray-69);
    border-radius: var(--radius-lg);
}

/* Inside a bordered box the design positions are measured from the outer edge, CSS from inside the border. */
.search-icon[b-lr7fjtygwa] {
    position: absolute;
    inset-inline-start: calc(var(--site-header-search-icon-start) - var(--border-1));
    inset-block-start: calc(var(--site-header-search-icon-top) - var(--border-1));
    inline-size: var(--site-header-search-icon-width);
    block-size: var(--site-header-search-icon-height);
    --icon: url("/assets/icons/search.svg");
    color: var(--color-gray-81);
}

/* The navigation is as large as the header, so that its entries and its line are placed in the frame of the design;
   it lies over the logo and the search button, which stand before it, and lets their clicks through. */
.nav[b-lr7fjtygwa] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* A navigation entry is centred on its own line of the design. */
.link[b-lr7fjtygwa] {
    position: absolute;
    inset-block-start: var(--site-header-nav-top);
    inset-inline-start: var(--center);
    transform: translateX(50%);
    white-space: nowrap;
    color: var(--color-gray-20);
    pointer-events: auto;
}

.link.active[b-lr7fjtygwa] {
    color: var(--color-primary);
}

.link.home[b-lr7fjtygwa] {
    --center: var(--site-header-nav-home-center);
}

.link.content[b-lr7fjtygwa] {
    --center: var(--site-header-nav-content-center);
}

.guest .link.about[b-lr7fjtygwa] {
    --center: var(--site-header-nav-guest-about-center);
}

.guest .link.contact[b-lr7fjtygwa] {
    --center: var(--site-header-nav-guest-contact-center);
}

.member .link.follow[b-lr7fjtygwa] {
    --center: var(--site-header-nav-member-follow-center);
}

.member .link.ticket[b-lr7fjtygwa] {
    --center: var(--site-header-nav-member-ticket-center);
}

.member .link.about[b-lr7fjtygwa] {
    --center: var(--site-header-nav-member-about-center);
}

.member .link.contact[b-lr7fjtygwa] {
    --center: var(--site-header-nav-member-contact-center);
}

.indicator[b-lr7fjtygwa],
.track[b-lr7fjtygwa] {
    position: absolute;
    inset-block-start: var(--site-header-indicator-top);
    block-size: var(--site-header-indicator-height);
    border-start-start-radius: var(--radius-xs);
    border-start-end-radius: var(--radius-xs);
}

.indicator[b-lr7fjtygwa] {
    inline-size: var(--site-header-indicator-active-width);
    background: var(--color-primary);
}

.indicator.muted[b-lr7fjtygwa] {
    background: var(--color-gray-87);
}

.indicator.home[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-indicator-home-start);
}

.indicator.content[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-indicator-content-start);
}

.member .indicator.follow[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-indicator-member-follow-start);
}

.guest .indicator.about[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-indicator-guest-about-start);
}

.guest .indicator.contact[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-indicator-guest-contact-start);
}

.member .indicator.about[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-indicator-member-about-start);
}

.member .indicator.contact[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-indicator-member-contact-start);
}

.track[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-track-start);
    background: var(--color-gray-87);
}

.guest .track[b-lr7fjtygwa] {
    inline-size: var(--site-header-track-guest-width);
}

.member .track[b-lr7fjtygwa] {
    inline-size: var(--site-header-track-member-width);
}

.preacher .track[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-track-preacher-start);
    inline-size: var(--site-header-track-preacher-width);
}

.donate[b-lr7fjtygwa] {
    position: absolute;
    inset-block-start: var(--site-header-donate-top);
    inline-size: var(--site-header-donate-width);
    block-size: var(--site-header-donate-height);
    border-radius: var(--radius-sm);
    background: linear-gradient(var(--site-header-donate-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    color: var(--color-white);
}

.donate.guest[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-donate-guest-start);
}

.donate.member[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-donate-member-start);
}

.donate-label[b-lr7fjtygwa] {
    position: absolute;
    inset-block-start: var(--site-header-donate-label-top);
    inset-inline-start: var(--site-header-donate-label-center);
    transform: translateX(50%);
    white-space: nowrap;
}

.request[b-lr7fjtygwa] {
    position: absolute;
    inset-block-start: var(--site-header-request-top);
}

.request.guest[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-request-guest-start);
}

.request.member[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-request-host-start);
}

.login[b-lr7fjtygwa],
.account[b-lr7fjtygwa] {
    position: absolute;
    border: var(--border-1) solid var(--color-gray-69);
    border-radius: var(--radius-lg);
}

.login[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-login-start);
    inset-block-start: var(--site-header-login-top);
    inline-size: var(--site-header-login-width);
    block-size: var(--site-header-login-height);
}

.login-label[b-lr7fjtygwa] {
    position: absolute;
    inset-inline-start: calc(var(--site-header-login-label-start) - var(--border-1));
    inset-block-start: calc(var(--site-header-login-label-top) - var(--border-1));
    white-space: nowrap;
    color: var(--color-gray-60);
}

.user-icon[b-lr7fjtygwa] {
    position: absolute;
    inline-size: var(--site-header-user-icon-width);
    block-size: var(--site-header-user-icon-height);
    --icon: url("/assets/icons/user.svg");
    color: var(--color-gray-60);
}

.login .user-icon[b-lr7fjtygwa] {
    inset-inline-start: calc(var(--site-header-login-icon-start) - var(--border-1));
    inset-block-start: calc(var(--site-header-login-icon-top) - var(--border-1));
}

.account[b-lr7fjtygwa] {
    inset-inline-start: var(--site-header-account-start);
    inset-block-start: var(--site-header-account-top);
    inline-size: var(--site-header-account-width);
    block-size: var(--site-header-account-height);
}

.account .user-icon[b-lr7fjtygwa] {
    inset-inline-start: calc(var(--site-header-account-icon-start) - var(--border-1));
    inset-block-start: calc(var(--site-header-account-icon-top) - var(--border-1));
}

/* the picture of the account stands in the middle of the place of the drawing */
.user-picture[b-lr7fjtygwa] {
    position: absolute;
    inset-inline-start: calc(var(--site-header-account-icon-start) - var(--border-1) + (var(--site-header-user-icon-width) - var(--site-header-account-picture)) / 2);
    inset-block-start: calc((var(--site-header-account-height) - var(--site-header-account-picture)) / 2 - var(--border-1));
    inline-size: var(--site-header-account-picture);
}

.chevron[b-lr7fjtygwa] {
    position: absolute;
    inset-inline-start: calc(var(--site-header-account-chevron-start) - var(--border-1));
    inset-block-start: calc(var(--site-header-account-chevron-top) - var(--border-1));
    inline-size: var(--site-header-chevron-width);
    block-size: var(--site-header-chevron-height);
    --icon: url("/assets/icons/chevron-down.svg");
    color: var(--color-gray-60);
}

@media (max-width: 767.98px) {
    /* Mobile design: a gradient bar with the logo, the name of the site and the search icon. */
    .mobile .site-header[b-lr7fjtygwa] {
        background: linear-gradient(var(--site-header-angle), var(--theme-from) 0%, var(--theme-to) 100%);
        box-shadow: var(--shadow-md-5);
    }

    .mobile .site-header.desktop-only[b-lr7fjtygwa] {
        display: none;
    }

    .mobile .nav[b-lr7fjtygwa],
    .mobile .donate[b-lr7fjtygwa],
    .mobile .request[b-lr7fjtygwa],
    .mobile .login[b-lr7fjtygwa],
    .mobile .account[b-lr7fjtygwa],
    .mobile .logo-image[b-lr7fjtygwa] {
        display: none;
    }

    .mobile .logo-mark[b-lr7fjtygwa] {
        display: block;
        position: absolute;
        inset: 0;
        --icon: url("/assets/mobile/header-logo.svg");
        color: var(--color-white);
    }

    .mobile .title[b-lr7fjtygwa] {
        display: block;
        position: absolute;
        inset-inline-start: var(--site-header-title-center);
        inset-block-start: var(--site-header-title-top);
        transform: translateX(50%);
        white-space: nowrap;
        color: var(--color-white);
    }

    .mobile .search[b-lr7fjtygwa] {
        inset-inline-start: var(--site-header-search-icon-start);
        inset-block-start: var(--site-header-search-icon-top);
        inline-size: var(--site-header-search-icon-width);
        block-size: var(--site-header-search-icon-height);
        border: 0;
        border-radius: 0;
    }

    .mobile .search-icon[b-lr7fjtygwa] {
        inset: 0;
        inline-size: auto;
        block-size: auto;
        --icon: url("/assets/mobile/header-search-round.svg"); /* the lens round (circles.css) */
        color: var(--color-white);
    }

    /* The frames of the lists of the preacher: the name of the site smaller, three bars where the search stands elsewhere. */
    .mobile .lists .title[b-lr7fjtygwa] {
        inset-inline-start: var(--site-header-title-small-center);
        inset-block-start: var(--site-header-title-small-top);
    }

    .mobile .lists .search[b-lr7fjtygwa] {
        display: none;
    }

    .mobile .menu[b-lr7fjtygwa] {
        position: absolute;
        inset-inline-start: var(--site-header-menu-icon-start);
        inset-block-start: var(--site-header-menu-icon-top);
        inline-size: var(--site-header-menu-icon-width);
        block-size: var(--site-header-menu-icon-height);
    }

    .mobile .menu-icon[b-lr7fjtygwa] {
        position: absolute;
        inset: 0;
        --icon: url("/assets/mobile/offer-filter-bars.svg");
        color: var(--color-white);
    }
}
/* /Pages/About/AboutPage.razor.rz.scp.css */
/* The content of the page. Only the guest's artboard (#165) draws the band in gray-95 behind it. */
.about[b-w5p2x5dxbk] {
    block-size: var(--about-band-height);
}

.about.with-band[b-w5p2x5dxbk] {
    background: var(--color-gray-95);
}

/* Everything is placed from the inline start of the frame of the design and from the lower edge of the header. */
.frame > *[b-w5p2x5dxbk] {
    position: absolute;
}

/* A photo shows a part of its picture: the picture is larger than the box and shifted inside it. */
.photo[b-w5p2x5dxbk] {
    overflow: hidden;
    border-radius: var(--radius-25);
}

.photo img[b-w5p2x5dxbk] {
    position: absolute;
}

.photo-1[b-w5p2x5dxbk] {
    inset-inline-start: var(--about-photo-1-start);
    inset-block-start: var(--about-photo-1-top);
    inline-size: var(--about-photo-1-width);
    block-size: var(--about-photo-1-height);
}

.photo-1 img[b-w5p2x5dxbk] {
    inset-inline-start: var(--about-photo-1-image-start);
    inset-block-start: var(--about-photo-1-image-top);
    inline-size: var(--about-photo-1-image-width);
    block-size: var(--about-photo-1-image-height);
}

.photo-2[b-w5p2x5dxbk] {
    inset-inline-start: var(--about-photo-2-start);
    inset-block-start: var(--about-photo-2-top);
    inline-size: var(--about-photo-2-width);
    block-size: var(--about-photo-2-height);
}

.photo-2 img[b-w5p2x5dxbk] {
    inset-inline-start: var(--about-photo-2-image-start);
    inset-block-start: var(--about-photo-2-image-top);
    inline-size: var(--about-photo-2-image-width);
    block-size: var(--about-photo-2-image-height);
}

.title[b-w5p2x5dxbk],
.rule[b-w5p2x5dxbk],
.text[b-w5p2x5dxbk] {
    inset-inline-start: var(--about-text-start);
}

.title[b-w5p2x5dxbk] {
    white-space: nowrap;
    color: var(--color-primary);
}

.title-1[b-w5p2x5dxbk] {
    inset-block-start: var(--about-title-1-top);
}

.title-2[b-w5p2x5dxbk] {
    inset-block-start: var(--about-title-2-top);
}

.rule[b-w5p2x5dxbk] {
    inline-size: var(--about-rule-width);
    block-size: var(--border-2);
    background: var(--color-primary);
}

.rule-1[b-w5p2x5dxbk] {
    inset-block-start: var(--about-rule-1-top);
}

.rule-2[b-w5p2x5dxbk] {
    inset-block-start: var(--about-rule-2-top);
}

/* A text keeps its paragraphs on the lines of the design; what is longer than its place scrolls in it. */
.text[b-w5p2x5dxbk] {
    margin: 0;
    overflow-y: auto;
    line-height: var(--about-line-pitch);
    white-space: pre-line;
    color: var(--color-gray-44);
}

.text-1[b-w5p2x5dxbk] {
    inset-block-start: var(--about-text-1-top);
    inline-size: var(--about-text-1-width);
    max-block-size: var(--about-text-1-height);
}

.text-2[b-w5p2x5dxbk] {
    inset-block-start: var(--about-text-2-top);
    inline-size: var(--about-text-2-width);
    max-block-size: var(--about-text-2-height);
}

.gap[b-w5p2x5dxbk] {
    block-size: var(--about-footer-gap);
}

.below[b-w5p2x5dxbk] {
    block-size: var(--about-below);
}

@media (max-width: 767.98px) {
    /* Phone: one column in the flow of the page, between the side margins; the band behind the content is the
       background of the mobile pages. */
    .mobile .about[b-w5p2x5dxbk] {
        block-size: auto;
        padding-block: var(--phone-layout-gap) calc(2 * var(--phone-layout-gap));
    }

    .mobile .frame[b-w5p2x5dxbk] {
        padding-inline: var(--phone-layout-margin);
    }

    .mobile .frame > *[b-w5p2x5dxbk] {
        position: static;
    }

    /* A photo keeps the crop of the desktop design at the width of the column. */
    .mobile .photo[b-w5p2x5dxbk] {
        position: relative;
        inset: auto;
        margin-block-start: var(--phone-layout-gap);
        border-radius: var(--radius-lg);
    }

    .mobile .title[b-w5p2x5dxbk] {
        padding-block-start: var(--phone-layout-gap);
    }

    .mobile .rule[b-w5p2x5dxbk] {
        display: block;
        inline-size: var(--phone-layout-rule-width);
        block-size: var(--phone-layout-rule);
        margin-block: var(--phone-layout-gap);
        border-radius: var(--phone-layout-rule);
    }

    /* The two texts wrap as they fit; their lines are a fixed distance apart. */
    .mobile .text[b-w5p2x5dxbk] {
        line-height: var(--phone-layout-line);
    }

    .mobile .text span[b-w5p2x5dxbk] {
        display: inline;
        white-space: normal;
    }

    .mobile .gap[b-w5p2x5dxbk],
    .mobile .below[b-w5p2x5dxbk] {
        display: none;
    }
}
/* /Pages/Contact/ContactPage.razor.rz.scp.css */
/* The room above the footer and below the install bar, as on the artboard. */
.above[b-iu4ejgykni] {
    block-size: var(--contact-above);
}

.below[b-iu4ejgykni] {
    block-size: var(--contact-below);
}

@media (max-width: 767.98px) {
    /* Phone: the footer brings its own room. */
    .mobile .above[b-iu4ejgykni],
    .mobile .below[b-iu4ejgykni] {
        display: none;
    }
}
/* /Pages/Content/ContentPage.razor.rz.scp.css */
/* The first band starts behind the lower edge of the header, as on the artboards (each a little differently). */
.rows[b-kpossedzqn] {
    margin-block-start: var(--content-rows-top);
}

.rows.host[b-kpossedzqn] {
    margin-block-start: var(--content-rows-top-host);
}

.rows.preacher[b-kpossedzqn] {
    margin-block-start: var(--content-rows-top-preacher);
}

.gap[b-kpossedzqn] {
    block-size: var(--content-footer-gap);
}

.gap.host[b-kpossedzqn] {
    block-size: var(--content-footer-gap-host);
}

.gap.preacher[b-kpossedzqn] {
    block-size: var(--content-footer-gap-preacher);
}

.below[b-kpossedzqn] {
    block-size: var(--content-below);
}

@media (max-width: 767.98px) {
    /* Mobile design: the rows follow the bar at the top; the footer and its room are not part of it. */
    .mobile .rows[b-kpossedzqn],
    .mobile .rows.host[b-kpossedzqn],
    .mobile .rows.preacher[b-kpossedzqn] {
        margin-block-start: 0;
    }

    .mobile .after-rows[b-kpossedzqn] {
        block-size: var(--content-banner-row);
    }

    .mobile .after-rows.preacher[b-kpossedzqn] {
        block-size: var(--content-preacher-gap);
    }

    .mobile .gap[b-kpossedzqn],
    .mobile .below[b-kpossedzqn] {
        display: none;
    }
}
/* /Pages/Donation/DonationResultPage.razor.rz.scp.css */
.donation-result[b-qie4bwgs4a] {
    display: grid;
    justify-items: center;
    gap: var(--donation-result-gap);
    inline-size: var(--donation-result-width);
    margin-inline: auto;
    margin-block: var(--donation-result-top) var(--donation-result-bottom);
    padding: var(--donation-result-padding);
    border-radius: var(--donation-result-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
    text-align: center;
}

.mark[b-qie4bwgs4a] {
    display: grid;
    place-items: center;
    inline-size: var(--donation-result-mark);
    block-size: var(--donation-result-mark);
    border-radius: 50%;
    background: var(--color-gray-89);
    color: var(--color-white);
}

.mark.paid[b-qie4bwgs4a] {
    background: var(--gradient-theme-vertical);
    box-shadow: var(--shadow-md-primary-4);
}

.mark.failed[b-qie4bwgs4a],
.mark.expired[b-qie4bwgs4a] {
    background: var(--color-red);
}

.mark-icon[b-qie4bwgs4a] {
    --icon: url("/assets/icons/close.svg");
    inline-size: var(--donation-result-mark-icon);
    block-size: var(--donation-result-mark-icon);
}

.paid .mark-icon[b-qie4bwgs4a] {
    --icon: url("/assets/icons/tick-check-large.svg");
}

.title[b-qie4bwgs4a] {
    color: var(--color-gray-20);
}

.lead[b-qie4bwgs4a],
.note[b-qie4bwgs4a] {
    color: var(--color-gray-45);
}

.facts[b-qie4bwgs4a] {
    display: grid;
    gap: var(--donation-result-fact-gap);
    inline-size: 100%;
    margin: 0;
}

.fact[b-qie4bwgs4a] {
    display: flex;
    justify-content: space-between;
    gap: var(--donation-result-fact-gap);
    padding-block-end: var(--donation-result-fact-gap);
    border-block-end: var(--border-1) solid var(--color-gray-94);
}

.fact dt[b-qie4bwgs4a] {
    color: var(--color-gray-55);
}

.fact dd[b-qie4bwgs4a] {
    margin: 0;
    color: var(--color-gray-20);
}

.buttons[b-qie4bwgs4a] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--donation-result-fact-gap);
}

.button[b-qie4bwgs4a] {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--donation-result-button-height);
    padding-inline: var(--donation-result-button-padding);
    border: var(--border-1) solid var(--color-gray-80);
    border-radius: var(--donation-result-button-radius);
    color: var(--color-gray-20);
}

.button.primary[b-qie4bwgs4a] {
    border: 0;
    background: var(--gradient-theme-vertical);
    box-shadow: var(--shadow-md-primary-4);
    color: var(--color-white);
}
/* /Pages/Errors/ErrorPage.razor.rz.scp.css */
/* No design: the page is made of the tokens of the site (error-page), in the flow of the page, in its middle. */
.error-page[b-vny3j2u4gh] {
    display: grid;
    justify-items: center;
    gap: var(--error-page-gap);
    max-inline-size: var(--error-page-width);
    margin-inline: auto;
    padding: var(--error-page-padding-top) var(--error-page-padding-inline) var(--error-page-padding-bottom);
    text-align: center;
    color: var(--color-gray-20);
}

/* the number, large, in the colours of the role */
.code[b-vny3j2u4gh] {
    margin: 0;
    background: var(--gradient-theme-vertical);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: var(--text-45-bold);
    font-size: var(--error-page-code);
}

.title[b-vny3j2u4gh],
.text[b-vny3j2u4gh] {
    margin: 0;
}

.text[b-vny3j2u4gh] {
    color: var(--color-gray-45);
}

.buttons[b-vny3j2u4gh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--error-page-gap);
    margin-block-start: var(--error-page-gap);
}

.buttons > *[b-vny3j2u4gh] {
    min-inline-size: var(--error-page-button);
}
/* /Pages/FollowUp/CeremonyCard.razor.rz.scp.css */
/* The card is as high as its kind of card is in the design; what it holds is placed in it. Its white face is a layer
   of its own, so that the edges of the cards behind a ceremony of several sessions lie under it. */
.ceremony[b-xoyr4mkzip] {
    position: relative;
    block-size: var(--box-height);
}

.surface[b-xoyr4mkzip] {
    position: absolute;
    inset: 0;
    border-radius: var(--ceremony-card-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-md-gray-87);
}

.session .surface[b-xoyr4mkzip] {
    background: var(--color-gray-97);
}

/* The edges of further cards under a closed ceremony of several sessions. */
.stack[b-xoyr4mkzip] {
    border-end-start-radius: var(--ceremony-card-stack-radius);
    border-end-end-radius: var(--ceremony-card-stack-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
}

/* The dashed line above a session. */
.dash[b-xoyr4mkzip] {
    background: repeating-linear-gradient(to left, var(--color-gray-44) 0, var(--color-gray-44) var(--ceremony-card-session-dash), transparent var(--ceremony-card-session-dash), transparent calc(2 * var(--ceremony-card-session-dash)));
}

/* The head is a strip with a shadow of its own. */
.head-box[b-xoyr4mkzip] {
    border-radius: var(--ceremony-card-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-md-gray-87);
}

/* The three steps: each has its colour; the open one is written large in it and has the larger dot. */
.step-1[b-xoyr4mkzip] {
    --tone: var(--color-yellow);
}

.step-2[b-xoyr4mkzip] {
    --tone: var(--color-green-5);
}

.step-3[b-xoyr4mkzip] {
    --tone: var(--color-primary);
}

.steps-line[b-xoyr4mkzip] {
    background: repeating-linear-gradient(to left, var(--color-gray-81) 0, var(--color-gray-81) var(--ceremony-card-steps-dash), transparent var(--ceremony-card-steps-dash), transparent calc(var(--ceremony-card-steps-dash) + var(--ceremony-card-steps-dash-gap)));
}

.step-label[b-xoyr4mkzip] {
    color: var(--color-gray-45);
}

.on .step-label[b-xoyr4mkzip] {
    color: var(--tone);
}

.step-dot[b-xoyr4mkzip] {
    border-radius: 50%;
    background: var(--color-gray-87);
}

.step-mark[b-xoyr4mkzip] {
    border-radius: 50%;
    background: var(--tone);
}

/* In the history the steps are drawn at a third of their strength: what became of the ceremony stands before them. */
.faded[b-xoyr4mkzip] {
    opacity: var(--ceremony-card-steps-faded);
}

/* The tile is the colour of what became of the ceremony at half its strength; its drawing is white. */
.tile[b-xoyr4mkzip] {
    border-radius: var(--ceremony-card-tile-radius);
}

.tile[b-xoyr4mkzip]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-primary);
    opacity: var(--opacity-50);
}

.tile.cancelled[b-xoyr4mkzip]::before {
    background: var(--color-red);
}

.status-label[b-xoyr4mkzip],
.slot-text[b-xoyr4mkzip],
.fact[b-xoyr4mkzip],
.duration[b-xoyr4mkzip] {
    color: var(--color-gray-45);
}

.details[b-xoyr4mkzip] {
    color: var(--color-gray-73);
}

.badge[b-xoyr4mkzip] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

/* The day and the time: boxes without a fill whose outline throws the shadow. */
.slot[b-xoyr4mkzip] {
    border-radius: var(--ceremony-card-radius);
    --outline: var(--ceremony-card-date-border) solid var(--color-gray-81);
}

.slot-text[b-xoyr4mkzip] {
    --line-pitch: var(--ceremony-card-date-pitch);
}

.rule[b-xoyr4mkzip] {
    background: var(--color-gray-81);
}

/* Someone the ceremony needs: grey while the search runs, in the colours of the role once someone is found. */
.pill[b-xoyr4mkzip] {
    border-radius: var(--ceremony-card-radius);
    background: var(--color-gray-87);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-white);
    --pill-angle: var(--ceremony-card-pill-narrow-angle);
}

.current > .body .pill[b-xoyr4mkzip],
.session > .body .pill[b-xoyr4mkzip] {
    --pill-angle: var(--ceremony-card-pill-angle);
}

.pill.found[b-xoyr4mkzip] {
    background: linear-gradient(var(--pill-angle), var(--theme-from) 0%, var(--theme-to) 100%);
}

/* What a pill says stands in a row, of one size (owner, 2026-10-28: «سایز متن هایی که کنار هم هستند یکی نیست»; the
   frames drew the role 15 beside 18): the role, then the name or the state in bold, a telephone at the end. */
.pill[b-xoyr4mkzip] {
    display: flex;
    align-items: center;
    gap: var(--ceremony-card-pill-gap);
    padding-inline: var(--ceremony-card-pill-padding);
}

.pill > .part[b-xoyr4mkzip] {
    white-space: nowrap;
}

.pill-phone[b-xoyr4mkzip] {
    margin-inline-start: auto;
}

/* The arrow points down while the sessions are closed and up while they are open. */
.open .arrow[b-xoyr4mkzip] {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    /* Phone (rule 11 of design/_tools/pages/phone.py): the parts of the card stand one below the other, one distance
       apart and one distance from the edges of the card; drawings and dots at the scale of the labels. */
    .mobile .ceremony[b-xoyr4mkzip] {
        display: flex;
        flex-direction: column;
        gap: var(--phone-layout-gap);
        block-size: auto;
        padding: var(--phone-layout-gap);
    }

    .mobile .part[b-xoyr4mkzip] {
        position: relative;
        inset: auto;
        inline-size: auto;
        block-size: auto;
        transform: none;
    }

    .mobile .head[b-xoyr4mkzip],
    .mobile .body[b-xoyr4mkzip] {
        display: flex;
        flex-direction: column;
        gap: var(--phone-layout-gap);
        position: relative;
    }

    .mobile .status[b-xoyr4mkzip],
    .mobile .more[b-xoyr4mkzip] {
        display: flex;
        align-items: center;
        gap: var(--phone-layout-gap);
    }

    .mobile .more[b-xoyr4mkzip] {
        justify-content: flex-end;
    }

    .mobile .tile[b-xoyr4mkzip],
    .mobile .tile-icon[b-xoyr4mkzip],
    .mobile .step-dot[b-xoyr4mkzip],
    .mobile .badge[b-xoyr4mkzip],
    .mobile .slot-icon[b-xoyr4mkzip],
    .mobile .arrow[b-xoyr4mkzip] {
        flex: none;
        inline-size: calc(var(--box-width) * var(--phone-layout-label-scale));
        block-size: calc(var(--box-height) * var(--phone-layout-label-scale));
    }

    /* What lies inside a scaled drawing keeps its place in it, at the same scale. */
    .mobile .tile-icon[b-xoyr4mkzip],
    .mobile .step-mark[b-xoyr4mkzip],
    .mobile .badge-letter[b-xoyr4mkzip] {
        position: absolute;
        inset-inline-start: calc(var(--box-start) * var(--phone-layout-label-scale));
        inset-block-start: calc(var(--box-top) * var(--phone-layout-label-scale));
    }

    .mobile .step-mark[b-xoyr4mkzip] {
        inline-size: calc(var(--box-width) * var(--phone-layout-label-scale));
        block-size: calc(var(--box-height) * var(--phone-layout-label-scale));
    }

    .mobile .badge-letter[b-xoyr4mkzip] {
        inset-block-start: calc((100% - var(--font-size-15) * 1.5) / 2);
    }

    /* The three steps side by side, each with its dot under its word. */
    .mobile .steps[b-xoyr4mkzip] {
        display: flex;
    }

    .mobile .step[b-xoyr4mkzip] {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--phone-layout-gap) / 2);
    }

    /* The day and the time side by side; for a ceremony of several sessions, whose day takes two lines, one below
       the other. */
    .mobile .when[b-xoyr4mkzip] {
        display: flex;
        gap: var(--phone-layout-gap);
    }

    .mobile .current-multi .when[b-xoyr4mkzip],
    .mobile .history-multi .when[b-xoyr4mkzip] {
        flex-direction: column;
        gap: calc(var(--phone-layout-gap) / 2);
    }

    /* Each takes the room its text needs and a share of what is left, so that the time stays on one line. */
    .mobile .slot[b-xoyr4mkzip] {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: calc(var(--phone-layout-gap) / 2);
        min-block-size: var(--app-button-height);
        padding-inline: calc(var(--phone-layout-gap) / 2);
        border-radius: var(--radius-lg);
        --outline: var(--border-1) solid var(--color-gray-81);
    }

    .mobile .slot-icon[b-xoyr4mkzip] {
        order: 2;
        margin-inline-start: auto;
    }

    .mobile .slot-text[b-xoyr4mkzip] {
        --line-pitch: var(--phone-layout-line);
    }

    .mobile .facts[b-xoyr4mkzip] {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--phone-layout-gap) / 2) var(--phone-layout-gap);
    }

    .mobile .people[b-xoyr4mkzip] {
        display: flex;
        flex-direction: column;
        gap: calc(var(--phone-layout-gap) / 2);
    }

    /* A pill is as high and as round as a button of the mobile design; what it says stands half a distance apart, so
       that a name and a telephone number fit beside each other. */
    .mobile .pill[b-xoyr4mkzip] {
        display: flex;
        align-items: center;
        gap: calc(var(--phone-layout-gap) / 2);
        min-block-size: var(--app-button-height);
        padding-inline: calc(var(--phone-layout-gap) / 2);
        border-radius: var(--radius-lg);
    }

    .mobile .pill-phone[b-xoyr4mkzip] {
        margin-inline-start: auto;
    }

    /* a role, a name and a telephone number of one size may not fit a narrow phone on one line: the number goes under them */
    .mobile .pill[b-xoyr4mkzip] {
        flex-wrap: wrap;
        row-gap: 0;
    }

    /* in the flow of the card: the height of the small button, nothing of its box */
    .mobile .action[b-xoyr4mkzip] {
        block-size: var(--site-button-small-height);
        margin-block-start: 0;
    }

    .mobile .actions[b-xoyr4mkzip] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--phone-layout-gap) / 2) var(--phone-layout-gap);
    }

    .mobile .arrow[b-xoyr4mkzip] {
        margin-inline-start: auto;
    }

    .mobile .open .arrow[b-xoyr4mkzip] {
        transform: rotate(180deg);
    }
}
/* /Pages/FollowUp/CeremonyDetailsPage.razor.rz.scp.css */
/* The page has no styles of its own: CeremonyDetailsView lays it out. */
/* /Pages/FollowUp/CeremonyDetailsView.razor.rz.scp.css */
/* The frame holds what the artboard has above the footer, each part where the artboard has it. The colour of what
   became of a ceremony is named once and used by the strip, its texts and its boxes to tick. */
.details[b-ngx5tdrblz] {
    --became: var(--color-primary);
    --pill-angle: var(--ceremony-details-host-pill-angle);
    --tick-taken: var(--color-gray-87);
}

.details.cancelled[b-ngx5tdrblz] {
    --became: var(--color-red);
}

.preacher[b-ngx5tdrblz] {
    --pill-angle: var(--ceremony-details-preacher-pill-angle);
}

.frame[b-ngx5tdrblz] {
    block-size: var(--ceremony-details-host-footer-top);
}

.preacher .frame[b-ngx5tdrblz] {
    block-size: var(--ceremony-details-preacher-footer-top);
}

/* The strip under the header: a white band. For the preacher it takes the colour of what became of the ceremony,
   thin over the white (the export draws it so; in the Figma file the colour lies over the grey of the page). */
.strip[b-ngx5tdrblz] {
    background: var(--color-white);
    box-shadow: var(--shadow-sm-2);
}

.preacher.held .strip[b-ngx5tdrblz]::before,
.preacher.cancelled .strip[b-ngx5tdrblz]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--became);
    opacity: var(--ceremony-details-strip-tint);
}

/* The three steps of the host: each has its colour; the open one is written large in it and has the larger dot. */
.step-1[b-ngx5tdrblz] {
    --tone: var(--color-yellow);
}

.step-2[b-ngx5tdrblz] {
    --tone: var(--color-green-5);
}

.step-3[b-ngx5tdrblz] {
    --tone: var(--color-primary);
}

.steps-line[b-ngx5tdrblz] {
    background: repeating-linear-gradient(to right, var(--color-gray-81) 0, var(--color-gray-81) var(--ceremony-details-steps-dash), transparent var(--ceremony-details-steps-dash), transparent calc(var(--ceremony-details-steps-dash) + var(--ceremony-details-steps-dash-gap)));
}

.step-label[b-ngx5tdrblz],
.status-label[b-ngx5tdrblz] {
    color: var(--color-gray-45);
}

.on .step-label[b-ngx5tdrblz] {
    color: var(--tone);
}

.step-dot[b-ngx5tdrblz] {
    border-radius: 50%;
    background: var(--color-gray-87);
}

.step-mark[b-ngx5tdrblz] {
    border-radius: 50%;
    background: var(--tone);
}

/* What became of a ceremony of the host: a tile in its colour at half its strength, with a white drawing. */
.tile[b-ngx5tdrblz] {
    border-radius: var(--ceremony-details-tile-radius);
}

.tile[b-ngx5tdrblz]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--became);
    opacity: var(--ceremony-details-tile-tint);
}

/* The strip of the preacher: the boxes to tick with their words, then «عدم نمایش» or «لغو مجلس» with a red badge and
   «پذیرش مجلس», which is grey until a box is ticked; afterwards what became of the ceremony, in its colour. */
.tick-label[b-ngx5tdrblz],
.hide-label[b-ngx5tdrblz] {
    color: var(--color-gray-73);
}

.preacher.held[b-ngx5tdrblz] {
    --tick-fill: var(--color-primary);
}

.preacher.cancelled[b-ngx5tdrblz] {
    --tick-fill: var(--color-red);
}

.held .tick-label[b-ngx5tdrblz] {
    color: var(--color-primary);
}

.cancelled .tick-label[b-ngx5tdrblz] {
    color: var(--color-danger);
}

.hide-badge[b-ngx5tdrblz],
.status-badge[b-ngx5tdrblz] {
    border-radius: 50%;
    background: var(--color-danger);
}

.held .status-badge[b-ngx5tdrblz] {
    background: var(--color-primary);
}

.cross[b-ngx5tdrblz],
.mark[b-ngx5tdrblz] {
    color: var(--color-gray-98);
    --icon: url("/assets/icons/icon-06.svg");
}

.held .mark[b-ngx5tdrblz] {
    color: var(--color-white);
    --icon: url("/assets/icons/icon-16.svg");
}

.preacher .status-label[b-ngx5tdrblz] {
    color: var(--became);
}

/* The two columns. */
.title[b-ngx5tdrblz],
.code[b-ngx5tdrblz],
.sound[b-ngx5tdrblz],
.notes-title[b-ngx5tdrblz] {
    color: var(--color-gray-19);
}

.when[b-ngx5tdrblz],
.fact[b-ngx5tdrblz],
.place[b-ngx5tdrblz] {
    color: var(--color-gray-45);
}

/* The day and the time, and «سایر توضیحات»: boxes without a fill whose outline throws the shadow. */
.slot[b-ngx5tdrblz],
.notes[b-ngx5tdrblz] {
    border-radius: var(--ceremony-details-radius);
    --outline: var(--ceremony-details-border) solid var(--color-gray-81);
}

.notes-text[b-ngx5tdrblz] {
    color: var(--color-gray-73);
}

.tag[b-ngx5tdrblz] {
    border-radius: var(--ceremony-details-tag-radius);
    color: var(--color-gray-60);
    --outline: var(--ceremony-details-tag-border) solid var(--color-gray-60);
    --outline-effect: none;
}

/* Someone the ceremony needs: grey, or in the colours of the role once someone is found. */
.pill[b-ngx5tdrblz] {
    border-radius: var(--ceremony-details-radius);
    background: var(--color-gray-87);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-white);
}

.pill.found[b-ngx5tdrblz] {
    background: linear-gradient(var(--pill-angle), var(--theme-from) 0%, var(--theme-to) 100%);
}

.rule[b-ngx5tdrblz] {
    background: var(--color-gray-81);
}

.owner[b-ngx5tdrblz] {
    border-radius: var(--ceremony-details-radius);
    background: linear-gradient(var(--ceremony-details-owner-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-white);
}

/* The map: a part of a large picture, cut by a shape with round corners. */
.map[b-ngx5tdrblz] {
    overflow: hidden;
    border-radius: var(--ceremony-details-map-radius);
    box-shadow: var(--shadow-lg-gray-89);
}

/* The footer on its card, with the room the artboards leave below it. */
.tail[b-ngx5tdrblz] {
    padding-block-end: var(--ceremony-details-host-below);
}

.preacher .tail[b-ngx5tdrblz] {
    padding-block-end: var(--ceremony-details-preacher-below);
}

@media (max-width: 767.98px) {
    /* Phone: a column. The strip, or the card of the list above an offered ceremony, or nothing; then the four cards,
       each as high as the frames have it, and the row of the buttons. */
    .mobile .details[b-ngx5tdrblz] {
        --became: var(--color-primary);
        --strip-tint: var(--ceremony-details-strip-tint-held);
    }

    .mobile .details.cancelled[b-ngx5tdrblz] {
        --became: var(--color-danger);
        --strip-tint: var(--ceremony-details-strip-tint-cancelled);
    }

    .mobile .m-strip[b-ngx5tdrblz] {
        position: relative;
        block-size: var(--ceremony-details-strip-height);
        background: var(--color-gray-98);
        box-shadow: var(--shadow-lg-gray-89);
    }

    /* The strip of a ceremony that is over has the colour of what became of it, thin over the background of the
       desktop pages: the two colours of the frames are no tokens. */
    .mobile .m-strip.past[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-past-strip-height);
        background: var(--color-background);
    }

    .mobile .m-strip.past[b-ngx5tdrblz]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--became);
        opacity: var(--strip-tint);
    }

    .mobile .strip-label[b-ngx5tdrblz] {
        color: var(--color-gray-45);
    }

    .mobile .badge[b-ngx5tdrblz] {
        border-radius: 50%;
        background: var(--color-gray-73);
        color: var(--color-white);
    }

    /* The card of the list stands where the frame has it; the first card of the page follows where the frame has it,
       whatever the card of the list holds. */
    .mobile .m-offer[b-ngx5tdrblz] {
        box-sizing: border-box;
        inline-size: var(--box-width);
        block-size: var(--ceremony-details-first-offer);
        margin-inline-start: var(--box-start);
        padding-block-start: var(--box-top);
    }

    .mobile .card[b-ngx5tdrblz] {
        position: relative;
        inline-size: var(--ceremony-details-card-width);
        margin-inline-start: var(--ceremony-details-card-start);
        border-radius: var(--ceremony-details-radius);
        --outline: var(--ceremony-details-border) solid var(--color-gray-80);
    }

    .mobile .card + .card[b-ngx5tdrblz] {
        margin-block-start: var(--ceremony-details-card-gap);
    }

    .mobile .column > .card:first-child[b-ngx5tdrblz] {
        margin-block-start: var(--ceremony-details-first-plain);
    }

    .mobile .m-strip + .column > .card:first-child[b-ngx5tdrblz] {
        margin-block-start: calc(var(--ceremony-details-first) - var(--ceremony-details-strip-height));
    }

    .mobile .m-strip.past + .column > .card:first-child[b-ngx5tdrblz] {
        margin-block-start: calc(var(--ceremony-details-first) - var(--ceremony-details-past-strip-height));
    }

    .mobile .when[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-when-height);
    }

    .mobile .people-1[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-people-1-height);
    }

    .mobile .people-2[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-people-2-height);
    }

    .mobile .host-card[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-host-height);
    }

    .mobile .card-title[b-ngx5tdrblz] {
        color: var(--color-gray-19);
    }

    .mobile .line[b-ngx5tdrblz] {
        background: var(--color-gray-19);
    }

    .mobile .lines[b-ngx5tdrblz] {
        --line-pitch: var(--ceremony-details-address-pitch);
    }

    /* «سایر اطلاعات مجلس»: rows with a line between them. A row that the frames do not have (rule 13 of
       design/_tools/pages/phone.py) is a row like theirs, closed by a line. */
    .mobile .more-head[b-ngx5tdrblz],
    .mobile .row[b-ngx5tdrblz],
    .mobile .notes-part[b-ngx5tdrblz] {
        position: relative;
    }

    .mobile .more-head[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-more-head);
    }

    .mobile .row[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-more-row);
    }

    .mobile .notes-part[b-ngx5tdrblz] {
        block-size: var(--ceremony-details-more-notes);
    }

    .mobile .added .line[b-ngx5tdrblz] {
        inset-block-start: var(--ceremony-details-more-row);
    }

    /* A pill: outlined while the host waits for someone, grey for the preacher, in the colours of the role for
       someone who is found. The two drawings lead to a message and to a call where the pill names someone. */
    .mobile .m-pill[b-ngx5tdrblz] {
        border-radius: var(--ceremony-details-radius);
        background: var(--color-gray-88);
        box-shadow: var(--shadow-lg-gray-89);
        color: var(--color-white);
    }

    .mobile .m-pill.on[b-ngx5tdrblz] {
        background: linear-gradient(var(--ceremony-details-pill-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    }

    .mobile .m-pill.open[b-ngx5tdrblz] {
        background: none;
        box-shadow: none;
        color: var(--color-gray-19);
        --outline: var(--ceremony-details-border) solid var(--color-gray-73);
    }

    .mobile .open .value[b-ngx5tdrblz] {
        color: var(--color-gray-45);
    }

    .mobile .open .contact[b-ngx5tdrblz] {
        color: var(--color-gray-73);
    }

    .mobile .message[b-ngx5tdrblz] {
        --icon: url("/assets/mobile/details-message.svg");
    }

    .mobile .call[b-ngx5tdrblz] {
        --icon: url("/assets/mobile/details-call.svg");
    }

    /* The row of the buttons reaches down to the end of the page. */
    .mobile .actions[b-ngx5tdrblz] {
        position: relative;
        block-size: var(--ceremony-details-actions-height);
    }

    .mobile .tail[b-ngx5tdrblz] {
        padding-block-end: 0;
    }
}
/* /Pages/FollowUp/FollowUpPage.razor.rz.scp.css */
/* The column stands where the artboard has it; the list stands in the flow of the frame, so the page is as long as
   its ceremonies, and at least as long as the column. */
.frame[b-zzf2xgpj0s] {
    min-block-size: calc(var(--follow-up-column-height) + var(--follow-up-footer-gap));
}

/* A tab: white; the open one in the colours of the role. The file gives both a shadow, but each lies in a mask of
   its own size, which cuts the shadow off: the artboards show none. */
.tab[b-zzf2xgpj0s] {
    border-radius: var(--follow-up-tab-radius);
    background: var(--color-white);
    color: var(--color-gray-45);
}

.tab.open[b-zzf2xgpj0s] {
    background: linear-gradient(var(--follow-up-tab-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    color: var(--color-white);
}

/* The numbers of the open tab: a dot for each in the colour of what it counts, on a dashed line. */
.counter[b-zzf2xgpj0s] {
    color: var(--color-gray-45);
}

.count-line[b-zzf2xgpj0s] {
    background: repeating-linear-gradient(to bottom, var(--color-gray-60) 0, var(--color-gray-60) var(--follow-up-count-dash), transparent var(--follow-up-count-dash), transparent calc(2 * var(--follow-up-count-dash)));
}

.dot[b-zzf2xgpj0s] {
    border-radius: 50%;
}

.confirming[b-zzf2xgpj0s] {
    background: var(--color-yellow);
    box-shadow: var(--shadow-sm-yellow);
}

.arranging[b-zzf2xgpj0s] {
    background: var(--color-green-5);
    box-shadow: var(--shadow-sm-green-5);
}

.arranged[b-zzf2xgpj0s] {
    background: var(--color-primary);
    box-shadow: var(--shadow-sm-primary);
}

.cancelled[b-zzf2xgpj0s] {
    background: var(--color-red);
    box-shadow: var(--shadow-sm-red);
}

/* The list: its cards follow each other; under a closed ceremony of several sessions there is room for the edges of
   the cards behind it, and a session follows what is above it more closely. */
.list[b-zzf2xgpj0s] {
    inline-size: var(--box-width);
    margin-inline-start: var(--box-start);
    padding-block: var(--box-top) var(--follow-up-footer-gap);
}

.item + .item[b-zzf2xgpj0s] {
    margin-block-start: var(--follow-up-gap);
}

.item.stacked + .item[b-zzf2xgpj0s] {
    margin-block-start: var(--follow-up-stack-gap);
}

.item + .item.session[b-zzf2xgpj0s] {
    margin-block-start: var(--follow-up-session-gap);
}

.support[b-zzf2xgpj0s] {
    border-radius: var(--follow-up-support-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-gray-45);
}

/* The footer on its card, with the room the artboard leaves below it. */
.tail[b-zzf2xgpj0s] {
    padding-block-end: var(--follow-up-below);
}

@media (max-width: 767.98px) {
    /* Phone (rule 11 of design/_tools/pages/phone.py): the tabs side by side, the numbers of the open one in a row,
       the cards and «تماس با پشتیبانی» one below the other, between the side margins. */
    .mobile .frame[b-zzf2xgpj0s] {
        display: flex;
        flex-direction: column;
        gap: var(--phone-layout-gap);
        min-block-size: 0;
        padding: var(--phone-layout-gap) var(--phone-layout-margin) calc(2 * var(--phone-layout-gap));
    }

    .mobile .part[b-zzf2xgpj0s],
    .mobile .tab[b-zzf2xgpj0s],
    .mobile .support[b-zzf2xgpj0s] {
        position: relative;
        inset: auto;
        inline-size: auto;
        block-size: auto;
        transform: none;
    }

    .mobile .tabs[b-zzf2xgpj0s] {
        display: flex;
        gap: var(--phone-layout-gap);
    }

    .mobile .tab[b-zzf2xgpj0s] {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        block-size: var(--app-button-height);
        border-radius: var(--radius-lg);
    }

    .mobile .counters[b-zzf2xgpj0s] {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--phone-layout-gap) / 2) var(--phone-layout-gap);
    }

    .mobile .counter[b-zzf2xgpj0s] {
        display: flex;
        align-items: center;
        gap: calc(var(--phone-layout-gap) / 2);
    }

    .mobile .dot[b-zzf2xgpj0s],
    .mobile .support-icon[b-zzf2xgpj0s] {
        flex: none;
        inline-size: calc(var(--box-width) * var(--phone-layout-label-scale));
        block-size: calc(var(--box-height) * var(--phone-layout-label-scale));
    }

    .mobile .list[b-zzf2xgpj0s] {
        inline-size: auto;
        margin-inline-start: 0;
        padding-block: 0;
    }

    .mobile .support[b-zzf2xgpj0s] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        block-size: var(--app-button-height);
        padding-inline: var(--phone-layout-gap);
        border-radius: var(--radius-lg);
    }

    .mobile .tail[b-zzf2xgpj0s] {
        padding-block-end: 0;
    }
}
/* /Pages/FollowUp/OfferBoard.razor.rz.scp.css */
/* The column and the panel stand where the artboard has them; the list stands in the flow of the frame, so the page
   is as long as its ceremonies, and at least as long as the column. */
.frame[b-l74cd89g57] {
    min-block-size: calc(var(--offer-list-column-height) + var(--offer-list-footer-gap));
}

/* A tab: white; the open one in the colours of the role. The file gives both a shadow, but each lies in a mask of
   its own size, which cuts the shadow off: the artboards show none. */
.tab[b-l74cd89g57] {
    border-radius: var(--offer-list-tab-radius);
    background: var(--color-white);
    color: var(--color-gray-45);
}

.tab.open[b-l74cd89g57] {
    background: linear-gradient(var(--offer-list-tab-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    color: var(--color-white);
}

/* The numbers of the open tab: a dot for each in the colour of what it counts, on a dashed line. */
.counter[b-l74cd89g57] {
    color: var(--color-gray-45);
}

.count-line[b-l74cd89g57] {
    background: repeating-linear-gradient(to bottom, var(--color-gray-60) 0, var(--color-gray-60) var(--offer-list-count-dash), transparent var(--offer-list-count-dash), transparent calc(2 * var(--offer-list-count-dash)));
}

.dot[b-l74cd89g57] {
    border-radius: 50%;
}

.waiting[b-l74cd89g57] {
    background: var(--color-yellow-2);
    box-shadow: var(--shadow-sm-yellow-2);
}

.running[b-l74cd89g57] {
    background: var(--color-orange);
    box-shadow: var(--shadow-sm-orange-2);
}

.held[b-l74cd89g57] {
    background: var(--color-primary);
    box-shadow: var(--shadow-sm-primary);
}

.cancelled[b-l74cd89g57] {
    background: var(--color-red);
    box-shadow: var(--shadow-sm-red);
}

.filters[b-l74cd89g57] {
    border-radius: var(--offer-list-filters-radius);
    background: var(--color-white);
    color: var(--color-gray-45);
}

/* «فیلترها» takes the press on the whole box; «حذف فیلترها» stands over it (#43). */
.filters-open[b-l74cd89g57] {
    position: absolute;
    inset: 0;
    border-radius: var(--offer-list-filters-radius);
}

.clear[b-l74cd89g57] {
    color: var(--color-teal-4);
}

/* The panel: «پذیرش مجالس» is grey until something is chosen. */
.panel[b-l74cd89g57] {
    border-radius: var(--offer-list-panel-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-73);
}

/* The list: its cards follow each other. Under a closed ceremony of several sessions there is room for the edges
   of the cards behind it; a session is a little narrower and follows what is above it more closely. */
.list[b-l74cd89g57] {
    inline-size: var(--box-width);
    margin-inline-start: var(--box-start);
    padding-block: var(--box-top) var(--offer-list-footer-gap);
}

.item + .item[b-l74cd89g57] {
    margin-block-start: var(--offer-list-gap);
}

.item.stacked + .item[b-l74cd89g57] {
    margin-block-start: var(--offer-list-stack-gap);
}

.item.session[b-l74cd89g57] {
    margin-inline-start: var(--offer-list-session-start);
}

.item + .item.session[b-l74cd89g57] {
    margin-block-start: var(--offer-list-first-session-gap);
}

.item.session + .item.session[b-l74cd89g57] {
    margin-block-start: var(--offer-list-session-gap);
}

.item.session + .item:not(.session)[b-l74cd89g57] {
    margin-block-start: var(--offer-list-after-sessions-gap);
}

.support[b-l74cd89g57] {
    border-radius: var(--offer-list-support-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-gray-45);
}

/* The footer on its card, with the room the artboard leaves below it; the artboards of the three lists leave a little
   more or less above and below it. */
.tail[b-l74cd89g57] {
    padding-block-end: var(--offer-list-below);
}

.current .tail[b-l74cd89g57] {
    padding-block-end: var(--offer-list-current-below);
}

.history .list[b-l74cd89g57] {
    padding-block-end: var(--offer-list-history-footer-gap);
}

.history .tail[b-l74cd89g57] {
    padding-block-end: var(--offer-list-history-below);
}

@media (max-width: 767.98px) {
    /* Phone: the strip of the tabs under the header, then the list of the frames; the panel keeps its place above
       the bottom bar while the list scrolls. */
    .mobile .frame[b-l74cd89g57] {
        min-block-size: 0;
    }

    .mobile .tabs[b-l74cd89g57] {
        position: relative;
        display: block;
        block-size: var(--offer-list-strip-height);
        background: linear-gradient(var(--offer-list-strip-angle), var(--color-gray-94) 0%, var(--color-gray-98) 100%);
        box-shadow: var(--shadow-md-5);
    }

    /* A tab is its word, where the frame of its list has it; the line stands under the open one. */
    .mobile .tab[b-l74cd89g57],
    .mobile .tab.open[b-l74cd89g57] {
        border-radius: 0;
        background: none;
        color: var(--color-gray-73);
    }

    .mobile .tab.open[b-l74cd89g57] {
        color: var(--color-gray-45);
    }

    .mobile .tab > .label[b-l74cd89g57] {
        position: static;
        transform: none;
    }

    .mobile .tab-line[b-l74cd89g57] {
        border-radius: var(--offer-list-tab-line-radius);
        background: var(--color-primary);
        box-shadow: var(--shadow-md-primary-2);
    }

    /* The number of the open tab, which the frames leave out (rule 11 of design/_tools/pages/phone.py). */
    .mobile .counters[b-l74cd89g57] {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--phone-layout-gap) / 2) var(--phone-layout-gap);
        padding: var(--phone-layout-gap) var(--phone-layout-margin) 0;
    }

    .mobile .counter[b-l74cd89g57] {
        display: flex;
        align-items: center;
        gap: calc(var(--phone-layout-gap) / 2);
    }

    /* «حذف فیلترها», which the frames do not draw: at the far end of the row of the numbers. */
    .mobile .clear-phone[b-l74cd89g57] {
        margin-inline-start: auto;
    }

    .mobile .part[b-l74cd89g57] {
        position: relative;
        inset: auto;
        inline-size: auto;
        block-size: auto;
        transform: none;
    }

    .mobile .dot[b-l74cd89g57] {
        flex: none;
        inline-size: calc(var(--box-width) * var(--phone-layout-label-scale));
        block-size: calc(var(--box-height) * var(--phone-layout-label-scale));
    }

    .mobile .list[b-l74cd89g57] {
        padding-block: calc(var(--box-top) - var(--offer-list-strip-height)) 0;
    }

    /* The panel above the bottom bar: it takes no room in the page and stays in the window as long as the list does. */
    .mobile .panel[b-l74cd89g57] {
        position: sticky;
        inset: auto;
        inset-block-end: var(--offer-list-panel-bottom);
        inline-size: var(--offer-list-panel-width);
        block-size: var(--offer-list-panel-height);
        margin-block-start: calc(-1 * var(--offer-list-panel-height));
        margin-inline-start: var(--offer-list-panel-start);
        box-shadow: var(--shadow-lg-gray-89);
    }

    .mobile .tail[b-l74cd89g57] {
        padding-block-end: 0;
    }
}
/* /Pages/FollowUp/OfferCard.razor.rz.scp.css */
/* The card is as high as its kind of card is in the design; what it holds is placed in it, and the boxes to tick
   stand beside it. The edges of the cards behind a ceremony of several sessions lie under everything else. */
.offer[b-86rb9tb11u] {
    position: relative;
    isolation: isolate;
    block-size: var(--box-height);
    --card-height: var(--box-height);
}

.surface[b-86rb9tb11u] {
    position: absolute;
    inset: 0;
    border-radius: var(--offer-card-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-md-gray-87);
}

.session .surface[b-86rb9tb11u] {
    background: var(--color-gray-97);
}

.stack[b-86rb9tb11u] {
    z-index: -1;
    border-end-start-radius: var(--offer-card-stack-radius);
    border-end-end-radius: var(--offer-card-stack-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
}

/* The dashed line above a session; its dashes are counted from its left end, as the design draws the line. */
.dash[b-86rb9tb11u] {
    background: repeating-linear-gradient(to right, var(--color-gray-44) 0, var(--color-gray-44) var(--offer-card-session-dash), transparent var(--offer-card-session-dash), transparent calc(2 * var(--offer-card-session-dash)));
}

/* The head is a strip with a shadow of its own; in the history it carries the colour of what became of the
   ceremony, thin over the white. */
.head-box[b-86rb9tb11u] {
    border-radius: var(--offer-card-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-md-gray-87);
}

.held[b-86rb9tb11u],
.cancelled[b-86rb9tb11u] {
    --became: var(--color-primary);
}

.cancelled[b-86rb9tb11u] {
    --became: var(--color-red);
}

.held .head-box[b-86rb9tb11u]::before,
.cancelled .head-box[b-86rb9tb11u]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--became);
    opacity: var(--offer-card-head-tint);
}

.owner[b-86rb9tb11u],
.when[b-86rb9tb11u],
.fact[b-86rb9tb11u] {
    color: var(--color-gray-45);
}

.held .owner[b-86rb9tb11u] {
    color: var(--color-primary);
}

.cancelled .owner[b-86rb9tb11u] {
    color: var(--color-danger);
}

.hide-badge[b-86rb9tb11u] {
    border-radius: 50%;
    background: var(--color-danger);
}

.cross[b-86rb9tb11u] {
    color: var(--color-gray-98);
    --icon: url("/assets/icons/icon-06.svg");
}

.hide-label[b-86rb9tb11u],
.tick-label[b-86rb9tb11u] {
    color: var(--color-gray-73);
}

.place[b-86rb9tb11u] {
    color: var(--color-gray-19);
}

/* The day and the time: boxes without a fill whose outline throws the shadow. */
.slot[b-86rb9tb11u] {
    border-radius: var(--offer-card-radius);
    --outline: var(--offer-card-date-border) solid var(--color-gray-81);
}

.lines[b-86rb9tb11u] {
    --line-pitch: var(--offer-card-date-pitch);
}

.rule[b-86rb9tb11u] {
    background: var(--color-gray-81);
}

.tag[b-86rb9tb11u] {
    border-radius: var(--offer-card-tag-radius);
    color: var(--color-gray-60);
    --outline: var(--offer-card-tag-border) solid var(--color-gray-60);
    --outline-effect: none;
}

@media (max-width: 767.98px) {
    /* Phone: the card of the mobile frames, as high as the frame has it; under it the two rows the frames do not have,
       and at the lower edge of the card, wherever that is then, what hangs there. */
    .mobile .offer[b-86rb9tb11u] {
        display: flex;
        flex-direction: column;
        block-size: auto;
    }

    .mobile .first[b-86rb9tb11u] {
        position: relative;
        block-size: var(--card-height);
    }

    .mobile .foot[b-86rb9tb11u] {
        position: relative;
    }

    .mobile .foot > .at[b-86rb9tb11u] {
        inset-block-start: calc(var(--box-top) - var(--card-height));
    }

    /* The white of the card runs from below the head to the end of the card, however long the card is. */
    .mobile .surface-phone[b-86rb9tb11u] {
        inset-block-end: 0;
        block-size: auto;
        border-radius: var(--offer-card-radius);
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-89);
    }

    .mobile .head-box[b-86rb9tb11u] {
        border-radius: var(--offer-card-radius) var(--offer-card-radius) 0 0;
        background: var(--color-gray-98);
        box-shadow: var(--shadow-lg-gray-89);
    }

    .mobile .when[b-86rb9tb11u] {
        color: var(--color-gray-19);
    }

    /* The frames keep the name grey in the history too; the head alone says what became of the ceremony. */
    .mobile .held .owner[b-86rb9tb11u],
    .mobile .cancelled .owner[b-86rb9tb11u] {
        color: var(--color-gray-45);
    }

    .mobile .cross[b-86rb9tb11u] {
        --icon: url("/assets/mobile/offer-hide-cross.svg");
    }

    /* The frames draw the day and the time as lines with a drawing, not as boxes. */
    .mobile .slot[b-86rb9tb11u] {
        position: static;
        inline-size: auto;
        block-size: auto;
    }

    .mobile .slot[b-86rb9tb11u]::before {
        content: none;
    }

    .mobile .stack[b-86rb9tb11u] {
        border-end-start-radius: var(--offer-card-stack-radius);
        border-end-end-radius: var(--offer-card-stack-radius);
    }

    .mobile .duration[b-86rb9tb11u] {
        color: var(--color-gray-45);
    }

    /* The arrow points down while the sessions are closed and up while they are open. */
    .mobile .open .arrow[b-86rb9tb11u] {
        transform: rotate(180deg);
    }

    /* Rule 12 of design/_tools/pages/phone.py: «ذکر توسل» and the tags as two more rows of the card. */
    .mobile .more[b-86rb9tb11u] {
        position: relative;
        padding-inline: var(--offer-card-more-start) var(--offer-card-more-end);
        padding-block-end: var(--offer-card-more-below);
    }

    .mobile .more > .fact[b-86rb9tb11u],
    .mobile .tags[b-86rb9tb11u] {
        block-size: var(--offer-card-more-row);
    }

    .mobile .more > .fact[b-86rb9tb11u] {
        padding-block-start: var(--offer-card-more-text-top);
        color: var(--color-gray-19);
        white-space: nowrap;
    }

    .mobile .tags[b-86rb9tb11u] {
        display: flex;
        gap: var(--offer-card-tag-gap);
    }

    .mobile .more .tag[b-86rb9tb11u] {
        position: relative;
        display: flex;
        align-items: center;
        block-size: var(--offer-card-tag-height);
        padding-inline: var(--offer-card-tag-pad);
        border-radius: var(--offer-card-tag-radius);
        white-space: nowrap;
        --outline: var(--border-1) solid var(--color-gray-60);
    }
}
/* /Pages/FollowUp/OpinionPage.razor.rz.scp.css */
/* The page has no styles of its own: OpinionView lays it out. */
/* /Pages/FollowUp/OpinionView.razor.rz.scp.css */
/* The frame holds what the artboard has above the footer, each part where the artboard has it. The colour of the
   open tab is named once and used by its mark, its panel and a line that is chosen. The note is the field of the
   forms with the look of this page. */
.opinion[b-u68krl30u1] {
    --tone: var(--color-primary);
}

.frame[b-u68krl30u1] {
    block-size: var(--opinion-page-host-footer-top);
}

.preacher .frame[b-u68krl30u1] {
    block-size: var(--opinion-page-preacher-footer-top);
}

/* Beside the page of the host: the day and the time in boxes without a fill, then who was there, in the colours of
   the role, and the host of the ceremony in grey. */
.slot[b-u68krl30u1] {
    border-radius: var(--opinion-page-radius);
    --outline: var(--opinion-page-border) solid var(--color-gray-81);
}

.when-text[b-u68krl30u1] {
    color: var(--color-gray-45);
}

.pill[b-u68krl30u1] {
    border-radius: var(--opinion-page-radius);
    background: var(--color-gray-87);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-white);
}

.pill.found[b-u68krl30u1] {
    background: linear-gradient(var(--opinion-page-pill-angle), var(--theme-from) 0%, var(--theme-to) 100%);
}

/* The one who is spoken about: a round part of a larger photo, the role and the name. */
.photo[b-u68krl30u1] {
    overflow: hidden;
    border-radius: 50%;
}

/* a real ceremony: the drawing of a person in the middle of a grey circle */
.photo.drawn[b-u68krl30u1] {
    background: var(--color-gray-95);
}

.drawing[b-u68krl30u1] {
    position: absolute;
    inset-block-start: 25%;
    inset-inline-start: 25%;
    inline-size: 50%;
    block-size: 50%;
}

.role[b-u68krl30u1] {
    color: var(--color-gray-19);
}

.name[b-u68krl30u1] {
    color: var(--color-gray-73);
}

/* The two tabs: the open one is dark and stands a little higher; its mark shows above the panel, which lies over
   the rest of it. «نقاط ضعف» is red. */
.weak[b-u68krl30u1] {
    --tone: var(--color-red);
}

.tab[b-u68krl30u1] {
    color: var(--color-gray-73);
}

.tab.open[b-u68krl30u1] {
    color: var(--color-gray-19);
}

.tab-mark[b-u68krl30u1] {
    border-radius: var(--opinion-page-mark-radius);
    background: var(--tone);
}

.panel[b-u68krl30u1] {
    border-radius: var(--opinion-page-panel-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
    --outline: var(--opinion-page-panel-border) solid var(--tone);
    --outline-effect: none;
}

/* A line of the open tab: outlined, and filled once it is chosen. */
.option[b-u68krl30u1] {
    border-radius: var(--opinion-page-radius);
    color: var(--color-gray-19);
    --outline: var(--opinion-page-border) solid var(--color-gray-73);
}

.option.chosen[b-u68krl30u1] {
    background: linear-gradient(var(--opinion-page-option-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-white);
}

.weak .option.chosen[b-u68krl30u1] {
    background: var(--tone);
}

.option:disabled[b-u68krl30u1] {
    cursor: default;
}

/* A question of the preacher: a row with its answers, each a ring that holds a dot once it is chosen (ChoiceRing,
   the one radio of the site), under the radio button that takes the press. The rows follow each other at one distance. */
.row[b-u68krl30u1] {
    margin-block-start: calc(var(--row) * var(--opinion-page-row-pitch));
    border-radius: var(--opinion-page-row-radius);
    --row: 0;
    --outline: var(--opinion-page-border) solid var(--color-gray-81);
}

.row-label[b-u68krl30u1] {
    color: var(--color-gray-45);
}

.answer[b-u68krl30u1] {
    color: var(--color-gray-60);
    cursor: pointer;
}

.given .answer[b-u68krl30u1] {
    cursor: default;
}

.pick[b-u68krl30u1] {
    border-radius: 50%;
}

/* The footer on its card, with the room the artboards leave below it. */
.tail[b-u68krl30u1] {
    padding-block-end: var(--opinion-page-host-below);
}

.preacher .tail[b-u68krl30u1] {
    padding-block-end: var(--opinion-page-preacher-below);
}

@media (max-width: 767.98px) {
    .mobile .weak[b-u68krl30u1] {
        --tone: var(--color-danger);
    }

    /* The strip has the colour of the site, thin over the background of the desktop pages (the frame of the preacher
       is built that way; the colour of the frames of the host is no token). */
    .mobile .m-strip[b-u68krl30u1] {
        position: relative;
        block-size: var(--opinion-page-strip-height);
        background: var(--color-background);
        box-shadow: var(--shadow-lg-gray-89);
    }

    .mobile .m-strip[b-u68krl30u1]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--color-primary);
        opacity: var(--opinion-page-strip-tint);
    }

    .mobile .strip-label[b-u68krl30u1] {
        color: var(--color-gray-45);
    }

    /* A block of the column stands where its frame has it from the side, as large as there. */
    .mobile .card[b-u68krl30u1] {
        position: relative;
        inline-size: var(--box-width);
        block-size: var(--box-height);
        margin-inline-start: var(--box-start);
        border-radius: var(--opinion-page-radius);
        --outline: var(--opinion-page-border) solid var(--color-gray-80);
    }

    .mobile .host .person[b-u68krl30u1] {
        margin-block-start: var(--opinion-page-host-person-gap);
    }

    .mobile .choice[b-u68krl30u1] {
        margin-block-start: var(--opinion-page-host-choice-gap);
    }

    .mobile .host .note[b-u68krl30u1] {
        margin-block-start: var(--opinion-page-host-note-gap);
    }

    .mobile .preacher .when[b-u68krl30u1] {
        margin-block-start: var(--opinion-page-preacher-when-gap);
    }

    .mobile .preacher .person[b-u68krl30u1] {
        margin-block-start: var(--opinion-page-preacher-person-gap);
    }

    .mobile .rows[b-u68krl30u1] {
        margin-block-start: var(--opinion-page-preacher-rows-gap);
    }

    .mobile .preacher .note[b-u68krl30u1] {
        margin-block-start: var(--opinion-page-preacher-note-gap);
    }

    .mobile .dark[b-u68krl30u1] {
        color: var(--color-gray-19);
    }

    /* Rule 12 of design/_tools/pages/phone.py: who was there as more rows of the card of the day, under what the
       frame draws; the room the frame has under its last row stands under them. */
    .mobile .host .when[b-u68krl30u1] {
        block-size: auto;
        margin-block-start: var(--opinion-page-host-when-gap);
        padding-block: var(--opinion-page-host-there-top) calc(var(--box-height) - var(--opinion-page-host-there-top));
    }

    .mobile .there-row[b-u68krl30u1] {
        block-size: var(--opinion-page-host-there-row);
        padding-inline-start: var(--opinion-page-host-there-start);
        white-space: nowrap;
    }

    /* A line that is chosen runs through the two colours the other way round; one of «نقاط ضعف» is red (the two
       reds of the frames are no tokens). */
    .mobile .option.chosen[b-u68krl30u1] {
        background: linear-gradient(var(--opinion-page-option-angle), var(--theme-to) 0%, var(--theme-from) 100%);
    }

    .mobile .weak .option.chosen[b-u68krl30u1] {
        background: var(--tone);
    }

    /* A question of the preacher is a white row with a thin outline. */
    .mobile .row[b-u68krl30u1] {
        background: var(--color-white);
        --outline: var(--opinion-page-border) solid var(--color-gray-73);
    }

    .mobile .row-label[b-u68krl30u1] {
        color: var(--color-gray-19);
    }

    .mobile .answer[b-u68krl30u1] {
        color: var(--color-gray-45);
    }

    /* The row of the buttons reaches down to the end of the page. */
    .mobile .actions[b-u68krl30u1] {
        position: relative;
        block-size: var(--opinion-page-host-actions-height);
    }

    .mobile .preacher .actions[b-u68krl30u1] {
        block-size: var(--opinion-page-preacher-actions-height);
    }

    .mobile .tail[b-u68krl30u1] {
        padding-block-end: 0;
    }
}
/* /Pages/FollowUp/PreacherFollowUpPage.razor.rz.scp.css */
/* The page has no styles of its own: OfferBoard lays it out. */
/* /Pages/Home/DonationBar.razor.rz.scp.css */
.donation[b-1i21bpkahx] {
    block-size: var(--donation-bar-height);
}

.bar[b-1i21bpkahx] {
    border-radius: var(--radius-30);
    background: linear-gradient(var(--donation-bar-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    box-shadow: var(--shadow-lg-gray-89);
    color: var(--color-white);
}

@media (max-width: 767.98px) {
    .mobile .donation[b-1i21bpkahx] {
        block-size: var(--donation-bar-height);
    }

    .mobile .bar[b-1i21bpkahx] {
        border-radius: var(--radius-lg);
    }

    .mobile .tab[b-1i21bpkahx] {
        border-radius: var(--donation-bar-tab-radius);
        background: var(--donation-bar-tab-fill);
    }

    .mobile .tab-icon[b-1i21bpkahx] {
        --icon: url("/assets/mobile/donation-chevron.svg");
        color: var(--color-white);
    }
}
/* /Pages/Home/HomeHero.razor.rz.scp.css */
.hero[b-nvt9ctw5k7] {
    block-size: var(--home-hero-height);
}

.slider[b-nvt9ctw5k7] {
    overflow: hidden;
    border-radius: var(--radius-25);
    box-shadow: var(--shadow-md-gray-88);
    isolation: isolate;
}

/* The slides lie on each other. Moved forward (the arrow at the left end), the new one glides in from the left while
   the old one fades away to the right; moved back, the other way round. The picture shown drifts slowly closer. */
.slide[b-nvt9ctw5k7] {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}

.banner-link[b-nvt9ctw5k7] {
    display: block;
    block-size: 100%;
}

.slide.current[b-nvt9ctw5k7] {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    animation: enter-forward-b-nvt9ctw5k7 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.back .slide.current[b-nvt9ctw5k7] {
    animation-name: enter-back-b-nvt9ctw5k7;
}

.slide.leaving[b-nvt9ctw5k7] {
    visibility: visible;
    animation: leave-forward-b-nvt9ctw5k7 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.back .slide.leaving[b-nvt9ctw5k7] {
    animation-name: leave-back-b-nvt9ctw5k7;
}

@keyframes enter-forward-b-nvt9ctw5k7 {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--home-hero-slide-shift))) scale(1.03);
    }

    60% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes enter-back-b-nvt9ctw5k7 {
    from {
        opacity: 0;
        transform: translateX(var(--home-hero-slide-shift)) scale(1.03);
    }

    60% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes leave-forward-b-nvt9ctw5k7 {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateX(var(--home-hero-slide-shift)) scale(1.03);
    }
}

@keyframes leave-back-b-nvt9ctw5k7 {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateX(calc(-1 * var(--home-hero-slide-shift))) scale(1.03);
    }
}

.current .picture[b-nvt9ctw5k7] {
    animation: drift-b-nvt9ctw5k7 9s ease-out forwards;
}

@keyframes drift-b-nvt9ctw5k7 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}

/* The title, its tab and the subtitle of a slide rise in after its picture. */
.tab[b-nvt9ctw5k7],
.title[b-nvt9ctw5k7],
.subtitle[b-nvt9ctw5k7] {
    animation: rise-b-nvt9ctw5k7 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.title[b-nvt9ctw5k7] {
    animation-delay: 120ms;
}

.subtitle[b-nvt9ctw5k7] {
    animation-delay: 220ms;
}

@keyframes rise-b-nvt9ctw5k7 {
    from {
        opacity: 0;
        translate: 0 var(--home-hero-text-rise);
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* The green tab beside the title of the slide. */
.tab[b-nvt9ctw5k7] {
    border-start-end-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
    background: var(--color-primary);
    box-shadow: var(--shadow-md-primary-4);
}

.title[b-nvt9ctw5k7] {
    color: var(--color-white);
}

.subtitle[b-nvt9ctw5k7] {
    color: var(--color-gray-55);
}

.arrow[b-nvt9ctw5k7] {
    --icon: url("/assets/icons/chevron-left.svg");
    color: var(--color-white);
}

/* The drawing points to the left; the arrow at the right end is its mirror image. */
.prev[b-nvt9ctw5k7] {
    transform: scaleX(-1);
}

.dot[b-nvt9ctw5k7] {
    cursor: pointer;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--shadow-md-3);
    transition: background-color 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dot.current[b-nvt9ctw5k7] {
    background: var(--color-primary);
    transform: scale(1.3);
}

.arrow[b-nvt9ctw5k7] {
    transition: opacity 200ms ease;
}

.arrow:hover[b-nvt9ctw5k7] {
    opacity: var(--opacity-62);
}

.offers[b-nvt9ctw5k7] {
    border-radius: var(--radius-lg);
    background: linear-gradient(var(--home-hero-offers-angle), var(--theme-from) var(--home-hero-offers-from), var(--theme-to) var(--home-hero-offers-to));
    box-shadow: var(--shadow-md-green-3);
    color: var(--color-white);
}

@media (max-width: 767.98px) {
    .mobile .hero[b-nvt9ctw5k7] {
        block-size: var(--home-hero-height);
    }

    .mobile .hero.plain[b-nvt9ctw5k7] {
        block-size: var(--home-hero-height-plain);
    }

    .mobile .slider[b-nvt9ctw5k7] {
        border-radius: var(--radius-lg);
    }

    .mobile .shade[b-nvt9ctw5k7] {
        border-end-start-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg);
        background: var(--media-card-shade);
        box-shadow: var(--shadow-sm);
    }

    /* On the mobile frames the tab is turned round: its round corners are at the start. */
    .mobile .tab[b-nvt9ctw5k7] {
        border-radius: 0;
        border-start-start-radius: var(--radius-lg);
        border-end-start-radius: var(--radius-lg);
    }

    .mobile .subtitle[b-nvt9ctw5k7] {
        color: var(--color-white);
        opacity: var(--opacity-50);
    }

    .mobile .arrow[b-nvt9ctw5k7] {
        --icon: url("/assets/mobile/hero-arrow.svg");
    }
}
/* /Pages/Home/HomePage.razor.rz.scp.css */
/* The page is its sections (HomeSections); it has no rules of its own. */
/* /Pages/Home/HomeSections.razor.rz.scp.css */
/* The room above the footer and below the install bar, as on the artboards; the mobile design has neither. */
.gap[b-f9u08myvd9] {
    block-size: var(--home-footer-gap);
}

.below[b-f9u08myvd9] {
    block-size: var(--home-below);
}

.below.preacher[b-f9u08myvd9] {
    block-size: var(--home-below-preacher);
}

@media (max-width: 767.98px) {
    .mobile .gap[b-f9u08myvd9],
    .mobile .below[b-f9u08myvd9] {
        display: none;
    }
}
/* /Pages/Home/NewsList.razor.rz.scp.css */
.news[b-buxhc93s9q] {
    --entry-width: var(--news-list-text-width);
    --entry-pitch: var(--news-list-line-pitch);
    --entry-lines: 2;
    block-size: var(--news-list-height);
}

.empty[b-buxhc93s9q] {
    margin: 0;
    color: var(--color-gray-55);
}

.more[b-buxhc93s9q] {
    color: var(--color-primary);
}

.more-circle[b-buxhc93s9q] {
    border-radius: 50%;
    background: var(--color-primary);
}

.more-icon[b-buxhc93s9q] {
    --icon: url("/assets/icons/upload-1-2.svg");
    color: var(--color-gray-98);
}

@media (max-width: 767.98px) {
    .mobile .news[b-buxhc93s9q] {
        block-size: var(--news-list-height);
        background: var(--color-white);
    }

    .mobile .more-icon[b-buxhc93s9q] {
        --icon: url("/assets/mobile/news-more-icon.svg");
    }
}
/* /Pages/Home/NewsPage.razor.rz.scp.css */
/* The page is its sections (HomeSections); it has no rules of its own. */
/* /Pages/Media/MediaAudioPage.razor.rz.scp.css */
/* The photo of the sound, as a card of the lists has it: small corners, a dark shade over its lower part that
   throws a soft shadow. */
.photo[b-3av8obn2k8],
.picture[b-3av8obn2k8] {
    border-radius: var(--radius-lg);
}

.shade[b-3av8obn2k8] {
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
    background: var(--media-card-shade);
    box-shadow: var(--shadow-sm);
}
/* /Pages/Media/MediaListPage.razor.rz.scp.css */
/* The page has no styles of its own: MediaScaffold places its blocks. */
/* /Pages/Media/MediaScaffold.razor.rz.scp.css */
/* The part of the page between the bar of tabs and the white band of the footer: as high as the artboard has it;
   its blocks stand where the artboard has them. */
.body[b-xu2vihana5] {
    position: relative;
    block-size: var(--media-page-body-height);
}

/* The footer of these pages lies on a white band that runs to the end of the page. Where the install bar stands in
   it, and the room below, differ from artboard to artboard. */
.tail[b-xu2vihana5] {
    padding-block: var(--media-page-footer-top) var(--media-page-below);
    background: var(--color-white);
    --footer-area-light-install-gap: var(--media-page-footer-install-gap);
}

@media (max-width: 767.98px) {
    /* Phone: the blocks follow each other in the flow of the page. The occasions start a new section, two distances
       below the people; the footer brings its own room. */
    .mobile .body[b-xu2vihana5] {
        block-size: auto;
        padding-block-end: calc(2 * var(--phone-layout-gap));
    }

    .mobile .block[b-xu2vihana5] {
        position: static;
    }

    .mobile .occasions[b-xu2vihana5] {
        padding-block-start: var(--phone-layout-gap);
    }

    .mobile .tail[b-xu2vihana5] {
        padding-block: 0;
    }
}
/* /Pages/Media/MediaTextPage.razor.rz.scp.css */
/* The picture fills its box from the middle; the box itself is the placed element. */
.photo[b-74nrk90k8j] {
    border-radius: var(--radius-25);
    object-fit: cover;
}

.title[b-74nrk90k8j] {
    color: var(--color-primary);
}

.rule[b-74nrk90k8j] {
    background: var(--color-primary);
}

/* The text: its lines at the pitch of the design, its paragraphs kept; what does not fit its box scrolls in it. */
.text[b-74nrk90k8j] {
    margin: 0;
    color: var(--color-gray-44);
    line-height: var(--media-item-text-pitch);
}

.written[b-74nrk90k8j] {
    overflow-y: auto;
    white-space: pre-line;
}
/* /Pages/Media/MediaVideoPage.razor.rz.scp.css */
/* The film fills the place of the picture of the design, on black where its shape is another. */
.film[b-veo1tobh4c] {
    border-radius: var(--radius-lg);
    background: var(--color-black);
    object-fit: contain;
}
/* /Pages/Notifications/NotificationsPage.razor.rz.scp.css */
/* No design: a column of cards in the look of the cards of the profile, as wide as the text reads well. */
.notifications[b-efsd702o0d] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--notifications-page-gap);
    inline-size: min(100%, var(--notifications-page-width));
    margin-inline: auto;
    padding-block: var(--notifications-page-top) var(--notifications-page-bottom);
}

.head[b-efsd702o0d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--notifications-page-head-gap);
}

.title[b-efsd702o0d] {
    margin: 0;
    color: var(--color-gray-19);
}

/* the strip of the browser stands in the column here, not as wide as the frame */
.notifications[b-efsd702o0d]  .push-prompt {
    inline-size: 100%;
    margin: 0;
}

.list[b-efsd702o0d] {
    display: flex;
    flex-direction: column;
    gap: var(--notifications-page-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.item[b-efsd702o0d] {
    display: flex;
    align-items: flex-start;
    gap: var(--notifications-page-item-gap);
    padding: var(--notifications-page-item-padding);
    border-radius: var(--notifications-page-item-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
}

/* an unread notification has the dot of the role */
.dot[b-efsd702o0d] {
    flex: none;
    inline-size: var(--notifications-page-dot);
    block-size: var(--notifications-page-dot);
    margin-block-start: var(--notifications-page-item-gap);
    border-radius: 50%;
}

.unread .dot[b-efsd702o0d] {
    background: var(--theme-to);
}

.body[b-efsd702o0d] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--notifications-page-item-gap);
    min-inline-size: 0;
}

.item-title[b-efsd702o0d],
.item-text[b-efsd702o0d],
.item-time[b-efsd702o0d],
.empty[b-efsd702o0d] {
    margin: 0;
}

.item-title[b-efsd702o0d] {
    color: var(--color-gray-19);
}

.item-text[b-efsd702o0d] {
    color: var(--color-gray-45);
    overflow-wrap: anywhere;
}

.item-time[b-efsd702o0d],
.empty[b-efsd702o0d] {
    color: var(--color-gray-60);
}

.read-all[b-efsd702o0d],
.open[b-efsd702o0d],
.more[b-efsd702o0d] {
    flex: none;
    block-size: var(--notifications-page-button-height);
    padding-inline: var(--notifications-page-button-padding);
    border: 0;
    border-radius: var(--notifications-page-button-radius);
    cursor: pointer;
}

.read-all[b-efsd702o0d],
.more[b-efsd702o0d] {
    border: var(--push-prompt-border) solid var(--color-gray-80);
    background: var(--color-white);
    color: var(--color-gray-45);
}

.more[b-efsd702o0d] {
    align-self: center;
}

.open[b-efsd702o0d] {
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
}

@media (max-width: 767.98px) {
    .mobile .notifications[b-efsd702o0d] {
        inline-size: var(--notifications-page-width);
    }
}
/* /Pages/Profile/PreacherDetailsPage.razor.rz.scp.css */
.frame[b-55tv8ox41j] {
    block-size: var(--preacher-details-one-height);
}

.step-2 .frame[b-55tv8ox41j] {
    block-size: var(--preacher-details-two-height);
}

/* the footer stands where #221 and #202 have it, lower when the cards are longer: then as far below the buttons as
   on #224 */
.step-3 .frame[b-55tv8ox41j],
.step-4 .frame[b-55tv8ox41j] {
    block-size: auto;
    min-block-size: var(--preacher-details-three-min);
    padding-block-end: var(--preacher-details-three-footer-gap);
}

.step-4 .frame[b-55tv8ox41j] {
    min-block-size: var(--preacher-details-four-min);
}

.step-5 .frame[b-55tv8ox41j] {
    block-size: var(--preacher-details-five-height);
}

/* the footer on its card, with the room the artboards leave below it */
.tail[b-55tv8ox41j] {
    padding-block-end: var(--preacher-details-below);
}

/* The large logo behind the step, as on #82, #77 and #7 (the logo behind the sign-in cards). */
.watermark[b-55tv8ox41j] {
    opacity: var(--preacher-details-watermark-opacity);
}

/* The head: the step in grey, the line between it and «از 5», the rule with the bar of the step in the primary
   colour (as long as the step is far), what the step asks for. */
.step[b-55tv8ox41j],
.of[b-55tv8ox41j],
.subtitle[b-55tv8ox41j] {
    margin: 0;
    white-space: nowrap;
    color: var(--color-gray-45);
}

/* the heading of the step: «مرحله ۱», a line, «از ۲» of the same size and lighter */
.step-head[b-55tv8ox41j] {
    display: flex;
    align-items: center;
    inline-size: max-content;
    white-space: nowrap;
}

.of[b-55tv8ox41j] {
    margin-inline-start: var(--preacher-details-step-gap);
    padding-inline-start: var(--preacher-details-step-gap);
    border-inline-start: var(--border-2) solid var(--color-gray-44);
    font: var(--text-30-medium);
}

.rule[b-55tv8ox41j] {
    background: var(--color-gray-81);
}

.progress[b-55tv8ox41j] {
    inline-size: var(--progress);
    border-radius: calc(var(--box-height) / 2);
    background: var(--color-primary);
}

/* The picture: a grey circle with a camera; a chosen picture fills it. */
.photo[b-55tv8ox41j] {
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-gray-87);
    box-shadow: inset 0 0 0 var(--border-1) var(--color-gray-60);
    cursor: pointer;
}

.photo .chosen[b-55tv8ox41j] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* the control of the browser over the picture and over a number of a rating: as large as what it lies on (the controls
   of the answers are placed on their rings and boxes) */
.photo[b-55tv8ox41j]  .pick,
.rate-circle .pick[b-55tv8ox41j] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

/* the control that chooses a file (InputFile, a component of its own: hence ::deep) draws a button with words of the
   browser: it stays, unseen, over the circle */
.photo[b-55tv8ox41j]  .pick {
    opacity: 0;
    cursor: pointer;
}

.photo-title[b-55tv8ox41j],
.photo-text[b-55tv8ox41j] {
    white-space: nowrap;
}

.photo-title[b-55tv8ox41j] {
    color: var(--color-gray-20);
}

.photo-text[b-55tv8ox41j] {
    color: var(--color-gray-60);
}

/* A field that opens a sheet: the outline of the fields; its words light until it shows a choice. */
.field-text[b-55tv8ox41j] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: start;
    color: var(--color-gray-19);
}

.field-text.empty[b-55tv8ox41j] {
    color: var(--color-gray-73);
}

/* The note: a field of several lines; what it says while empty is light and small. */
.notes[b-55tv8ox41j] {
    border-radius: var(--preacher-details-field-radius);
    --outline: var(--preacher-details-field-border) solid var(--color-gray-81);
}

.notes-text[b-55tv8ox41j] {
    padding: 0;
    border: 0;
    background: none;
    resize: none;
    line-height: var(--preacher-details-notes-pitch);
    color: var(--color-gray-20);
    outline: none;
}

.notes-hint[b-55tv8ox41j] {
    line-height: var(--preacher-details-notes-pitch);
    color: var(--color-gray-73);
    pointer-events: none;
}

.notes-line[b-55tv8ox41j] {
    display: block;
    white-space: nowrap;
}

/* What steps 2 and 3 are for; the headings of the two kinds of studies of step 2 with a line between them (#219). */
.intro[b-55tv8ox41j],
.heading[b-55tv8ox41j] {
    margin: 0;
    white-space: nowrap;
    color: var(--color-gray-60);
}

.divider[b-55tv8ox41j] {
    background: var(--color-gray-81);
}

/* On the desktop the fields of both kinds stand where #219 has them; the tabs belong to the phone. */
.two-body[b-55tv8ox41j] {
    display: contents;
}

/* Step 2 on a phone: the word of the open tab higher and dark, of the other lower and light; under the open one the
   upper part of a pill in the primary colour. */
.tab[b-55tv8ox41j] {
    white-space: nowrap;
    color: var(--color-gray-73);
}

.tab:not(.open)[b-55tv8ox41j] {
    translate: 0 var(--preacher-details-tab-drop);
}

.tab.open[b-55tv8ox41j] {
    color: var(--color-gray-19);
}

.pill[b-55tv8ox41j] {
    border-radius: var(--preacher-details-pill-radius);
    background: var(--color-primary);
    clip-path: inset(0 0 calc(100% - var(--preacher-details-pill-shown)) 0);
}

/* Steps 3 and 4: the cards and the lists one under the other (#224, #202), each as far from the one before it as the
   artboard has a card or a list after a card or a list; a list stands as far in from the edge of the cards as there. */
.cards[b-55tv8ox41j] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block-start: var(--preacher-details-three-cards-top);
    padding-inline-start: var(--preacher-details-card-start);
}

.step-4 .cards[b-55tv8ox41j] {
    padding-block-start: var(--preacher-details-four-cards-top);
}

.cards > *[b-55tv8ox41j] {
    margin-inline-start: calc(var(--box-start) - var(--preacher-details-card-start));
}

.card + .card[b-55tv8ox41j] {
    margin-block-start: var(--preacher-details-gap-card-card);
}

.list + .list[b-55tv8ox41j] {
    margin-block-start: var(--preacher-details-gap-list-list);
}

.card:not(.list) + .list[b-55tv8ox41j] {
    margin-block-start: var(--preacher-details-gap-card-list);
}

.list + .card:not(.list)[b-55tv8ox41j] {
    margin-block-start: var(--preacher-details-gap-list-card);
}

.step-4 .card + .card[b-55tv8ox41j] {
    margin-block-start: var(--preacher-details-four-gap);
}

/* A card: an outline that throws the shadow of a row; what it holds stands where the card of the artboard has it. A
   list that the first question opens has no outline on the desktop. */
.card[b-55tv8ox41j] {
    position: relative;
    flex: none;
    inline-size: var(--box-width);
    block-size: var(--box-height);
    border-radius: var(--preacher-details-card-radius);
    --outline: var(--preacher-details-field-border) solid var(--color-gray-81);
}

.card[b-55tv8ox41j]::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--outline);
    border-radius: inherit;
    filter: drop-shadow(var(--shadow-lg-gray-89));
    pointer-events: none;
}

.list[b-55tv8ox41j]::before {
    display: none;
}

/* what a ticked eulogy asks for on a phone (1:6660), light */
.card-hint[b-55tv8ox41j] {
    white-space: nowrap;
    color: var(--color-gray-73);
}

.card-title[b-55tv8ox41j],
.choice-label[b-55tv8ox41j] {
    white-space: nowrap;
    color: var(--color-gray-45);
}

.choice[b-55tv8ox41j],
.choice-label[b-55tv8ox41j] {
    color: var(--color-gray-60);
}

.choice[b-55tv8ox41j] {
    cursor: pointer;
}

/* The rating of a ticked eulogy on the desktop: «امتیاز از 10», a stroke, the box to write it in (#224). */
.rate-label[b-55tv8ox41j] {
    white-space: nowrap;
    color: var(--color-gray-60);
}

.rate-slash[b-55tv8ox41j] {
    background: linear-gradient(to top left, transparent calc(50% - var(--border-1) / 2), var(--color-gray-81) calc(50% - var(--border-1) / 2),
                var(--color-gray-81) calc(50% + var(--border-1) / 2), transparent calc(50% + var(--border-1) / 2));
}

.rate-field[b-55tv8ox41j] {
    padding: 0;
    border: 0;
    border-radius: var(--preacher-details-rate-radius);
    background: var(--color-white);
    box-shadow: inset 0 0 0 var(--border-1) var(--color-gray-81);
    text-align: center;
    color: var(--color-gray-45);
}

.badge[b-55tv8ox41j] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

/* A rating: ten numbered circles, 10 at the right (--n 0) and 1 at the left, the one chosen in the colours of the role. */
.rate-circle[b-55tv8ox41j] {
    inset-inline-start: calc(var(--box-start) + var(--n) * var(--preacher-details-three-rate-pitch));
    inset-block-start: calc(var(--box-top) + var(--line) * var(--preacher-details-line-pitch) + var(--row) * var(--preacher-details-rate-extra));
    border-radius: 50%;
    box-shadow: inset 0 0 0 var(--border-1) var(--color-gray-44), var(--shadow-md-primary-2);
    color: var(--color-gray-45);
    cursor: pointer;
}

.rate-circle.on[b-55tv8ox41j] {
    background: linear-gradient(var(--preacher-details-confirm-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    box-shadow: var(--shadow-md-primary-2);
    color: var(--color-white);
}

/* the number lies over the control of its circle, in its middle whether it has one digit or two (owner, 2026-10-30:
   every radio of the site), and lets the press through to it */
.rate-text[b-55tv8ox41j] {
    inset: 0;
    display: grid;
    place-items: center;
    inline-size: auto;
    block-size: auto;
    transform: none;
    pointer-events: none;
}

.card-buttons[b-55tv8ox41j] {
    position: relative;
    block-size: var(--preacher-details-buttons-height);
    margin-block-start: var(--preacher-details-three-buttons-gap);
}

.step-4 .card-buttons[b-55tv8ox41j] {
    margin-block-start: var(--preacher-details-four-buttons-gap);
}

@media (max-width: 767.98px) {
    .mobile .of[b-55tv8ox41j] {
        font: var(--text-14-medium);
    }

    /* Phone: the column of the frames over the light grey of the page, the waves of the frames behind; the line above
       the step with its dot; the fields, buttons and cards of the frames; «Rozekhoonegi.com» over its line at the end. */
    .mobile .details[b-55tv8ox41j] {
        background: var(--color-gray-95);
    }

    .mobile .frame[b-55tv8ox41j] {
        overflow-x: clip;
    }

    .mobile .step-3 .frame[b-55tv8ox41j],
    .mobile .step-4 .frame[b-55tv8ox41j] {
        min-block-size: 0;
        padding-block-end: var(--preacher-details-site-gap);
    }

    .mobile .waves[b-55tv8ox41j] {
        opacity: var(--preacher-details-waves-opacity);
    }

    .mobile .hint[b-55tv8ox41j] {
        margin: 0;
        white-space: nowrap;
        color: var(--color-gray-45);
    }

    .mobile .hint-dot[b-55tv8ox41j] {
        border-radius: 50%;
        background: linear-gradient(180deg, var(--theme-from) 0%, var(--theme-to) 100%);
        box-shadow: var(--shadow-md-primary-2);
    }

    .mobile .rule[b-55tv8ox41j] {
        background: var(--color-gray-19);
    }

    .mobile .photo[b-55tv8ox41j] {
        background: var(--color-gray-73);
        box-shadow: none;
    }

    .mobile .photo-title[b-55tv8ox41j],
    .mobile .photo-text[b-55tv8ox41j] {
        color: var(--color-gray-45);
    }

    .mobile .notes[b-55tv8ox41j],
    .mobile .card[b-55tv8ox41j] {
        --outline: var(--preacher-details-field-border) solid var(--color-gray-45);
    }

    .mobile .card[b-55tv8ox41j] {
        --outline: var(--preacher-details-field-border) solid var(--color-gray-80);
    }

    /* the buttons of step 1 and what follows them stand one field lower: the frame has no field for the organizer */
    .mobile .step-1 .buttons > *[b-55tv8ox41j] {
        translate: 0 var(--preacher-details-one-shift);
    }

    /* What a step is for has no frame: on a phone above the tabs of step 2 and above the cards of step 3, in the
       width of the cards; the tabs, the fields and the buttons of step 2 follow it. */
    .mobile .intro[b-55tv8ox41j] {
        position: static;
        inline-size: auto;
        block-size: auto;
        white-space: normal;
        color: var(--color-gray-45);
    }

    .mobile .step-3 .intro[b-55tv8ox41j] {
        margin-block-start: var(--preacher-details-cards-top);
        margin-inline: var(--preacher-details-card-start);
        padding-block-end: var(--preacher-details-three-gap);
    }

    .mobile .two-intro[b-55tv8ox41j] {
        margin-block-start: var(--preacher-details-two-body-top);
        margin-inline: var(--preacher-details-card-start);
        padding-block-end: var(--preacher-details-three-gap);
    }

    .mobile .intro-line[b-55tv8ox41j] {
        display: block;
    }

    /* the frame keeps the margin of what follows its head inside it (a new block formatting context) */
    .mobile .step-2 .frame[b-55tv8ox41j],
    .mobile .step-3 .frame[b-55tv8ox41j] {
        display: flow-root;
    }

    .mobile .step-2 .frame[b-55tv8ox41j] {
        block-size: auto;
    }

    /* The tabs, the fields and the buttons keep the places of the frame, measured from a box that begins as far above
       the end of what the step is for as the tabs stand below the top of the frame: they all move down by its height. */
    .mobile .two-body[b-55tv8ox41j] {
        display: block;
        position: relative;
        block-size: var(--preacher-details-two-height);
        margin-block-start: calc(-1 * var(--preacher-details-two-body-top));
        pointer-events: none;
    }

    .mobile .two-body > *[b-55tv8ox41j] {
        pointer-events: auto;
    }

    .mobile .closed-tab[b-55tv8ox41j] {
        display: none;
    }

    /* the cards of the frames one under the other, the lists as cards too */
    .mobile .cards[b-55tv8ox41j],
    .mobile .step-4 .cards[b-55tv8ox41j] {
        padding-block-start: var(--preacher-details-cards-top);
        padding-inline-start: var(--preacher-details-card-start);
    }

    .mobile .step-3 .cards[b-55tv8ox41j] {
        padding-block-start: 0;
    }

    .mobile .cards > *[b-55tv8ox41j] {
        margin-inline-start: 0;
    }

    /* one distance between every two cards (more specific than the distances of the desktop) */
    .mobile .cards > .card + .card[b-55tv8ox41j] {
        margin-block-start: var(--preacher-details-three-gap);
    }

    .mobile .step-4 .cards > .card + .card[b-55tv8ox41j] {
        margin-block-start: var(--preacher-details-four-gap);
    }

    .mobile .list[b-55tv8ox41j]::before {
        display: block;
    }

    .mobile .choice[b-55tv8ox41j],
    .mobile .choice-label[b-55tv8ox41j] {
        color: var(--color-gray-45);
    }

    /* The eulogies: the second line moves down by the rows of ratings under the first; the card grows by every row. */
    .mobile .eulogy[b-55tv8ox41j] {
        block-size: calc(var(--preacher-details-eulogy-base) + var(--rows) * var(--preacher-details-rate-extra));
    }

    /* (the box to tick is a component of its own: ::deep) */
    .mobile .eulogy .choice > *[b-55tv8ox41j],
    .mobile .eulogy .choice[b-55tv8ox41j]  .tick-mark {
        translate: 0 calc(var(--second, 0) * (var(--first-rows) - 1) * var(--preacher-details-rate-extra));
    }

    .mobile .site-line[b-55tv8ox41j] {
        background: var(--color-gray-19);
    }

    .mobile .site[b-55tv8ox41j] {
        white-space: nowrap;
        color: var(--color-gray-45);
    }

    .mobile .card-site[b-55tv8ox41j] {
        position: relative;
        block-size: calc(var(--preacher-details-site-gap) - var(--preacher-details-site-line-gap));
        margin-block-start: var(--preacher-details-site-line-gap);
    }

    .mobile .card-site .site[b-55tv8ox41j] {
        inset-block-start: calc(var(--preacher-details-site-gap) - var(--preacher-details-site-line-gap));
    }
}
/* /Pages/Profile/PreacherRequestCard.razor.rz.scp.css */
/* In the flow under the profile, as wide as its frame: a white card with the shadow of the cards of the profile. */
.preacher-request[b-goqxo0ac59] {
    padding-block: var(--preacher-request-card-top);
}

.card[b-goqxo0ac59] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--preacher-request-card-gap);
    inline-size: min(100%, var(--preacher-request-card-width));
    margin-inline: auto;
    padding: var(--preacher-request-card-padding);
    border-radius: var(--preacher-request-card-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
}

.title[b-goqxo0ac59],
.state[b-goqxo0ac59],
.note[b-goqxo0ac59] {
    margin: 0;
}

.title[b-goqxo0ac59] {
    color: var(--color-gray-19);
}

.state[b-goqxo0ac59] {
    color: var(--color-gray-45);
}

/* what the staff wrote, in the colour of the role */
.note[b-goqxo0ac59] {
    color: var(--theme-to);
    white-space: pre-line;
}

.go[b-goqxo0ac59] {
    display: inline-flex;
    align-items: center;
    block-size: var(--preacher-request-card-button-height);
    padding-inline: var(--preacher-request-card-button-padding);
    border: 0;
    border-radius: var(--preacher-request-card-button-radius);
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .mobile .card[b-goqxo0ac59] {
        inline-size: var(--preacher-request-card-width);
    }
}
/* /Pages/Profile/ProfileAccountPage.razor.rz.scp.css */
.form-message[b-7q16ccqk6x] {
    white-space: nowrap;
    color: var(--color-danger);
}

.form-message.saved[b-7q16ccqk6x] {
    color: var(--color-primary);
}

@media (max-width: 767.98px) {
    .mobile .form-message[b-7q16ccqk6x] {
        text-align: center;
        white-space: normal;
    }

    .mobile .heading[b-7q16ccqk6x] {
        color: var(--color-gray-45);
    }

}
/* /Pages/Profile/ProfileAddressesPage.razor.rz.scp.css */
/* While a new address is written, the list is drawn at half its strength (#29). */
.list.adding[b-xw7z071ihc] {
    opacity: var(--opacity-50);
}

.heading[b-xw7z071ihc] {
    color: var(--color-gray-60);
}

/* The pencil: grey, and red while the marks are shown. The mobile design has a drawing for each of the two. */
.pencil[b-xw7z071ihc] {
    --icon: url("/assets/icons/edit.svg");
    color: var(--color-gray-60);
}

.removing .pencil[b-xw7z071ihc] {
    color: var(--color-red);
}

.photo[b-xw7z071ihc],
.map[b-xw7z071ihc] {
    overflow: hidden;
    box-shadow: var(--shadow-lg-gray-89);
}

.photo[b-xw7z071ihc] {
    border-radius: var(--radius-30);
}

.title[b-xw7z071ihc] {
    color: var(--color-gray-19);
}

/* No address yet: the line stands in the place of the first title, in the grey of the texts. */
.title.none[b-xw7z071ihc] {
    white-space: nowrap;
    color: var(--color-gray-45);
}

/* A refused address: the heading of the form says why, in red. */
.heading.refused[b-xw7z071ihc] {
    color: var(--color-red);
}

/* An address is one line; what does not fit beside the mark is cut off, as on #30. */
.text[b-xw7z071ihc] {
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-gray-45);
}

.line[b-xw7z071ihc] {
    background: var(--color-gray-19);
}

/* The lines of the preacher's list are lighter (#211). */
.preacher .line[b-xw7z071ihc] {
    background: var(--color-gray-81);
}

/* With the marks every address stands further from the start; the mark takes the room that makes. */
.removing .moved[b-xw7z071ihc] {
    transform: translateX(calc(-1 * var(--profile-addresses-shift)));
}

.removing .text[b-xw7z071ihc] {
    inline-size: var(--profile-addresses-text-width-removing);
}

.add[b-xw7z071ihc] {
    color: var(--color-gray-19);
}

.removing .add[b-xw7z071ihc] {
    opacity: var(--opacity-50);
}

.map[b-xw7z071ihc] {
    border-radius: var(--profile-address-form-map-radius);
}

/* the pin stands over the map, which moves under it */
.pin[b-xw7z071ihc] {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    /* Phone: a new address is a page of its own (1:19156); the list is not shown behind it. */
    .mobile .list.adding[b-xw7z071ihc] {
        display: none;
    }

    .mobile .heading[b-xw7z071ihc],
    .mobile .title[b-xw7z071ihc] {
        color: var(--color-gray-45);
    }

    .mobile .heading.refused[b-xw7z071ihc] {
        color: var(--color-red);
    }

    .mobile .removing .add[b-xw7z071ihc] {
        opacity: 1;
    }

    /* On a phone the list of the preacher is the list of the host's frame, continued (rule 10). */
    .mobile .preacher .line[b-xw7z071ihc] {
        background: var(--color-gray-19);
    }
}
/* /Pages/Profile/ProfileAvailability.razor.rz.scp.css */
/* The card of the desktop design has no fill: its outline throws the shadow (`outlined`). */
.sheet[b-zqm1bas1ky] {
    border-radius: var(--radius-xl);
    --outline: var(--border-2) solid var(--color-gray-80);
}

.title[b-zqm1bas1ky] {
    color: var(--color-gray-19);
}

/* A choice: its ring and its label are placed in its box; the ring is the one radio of the site (ChoiceRing). */
.option[b-zqm1bas1ky] {
    color: var(--color-gray-60);
}

.line[b-zqm1bas1ky] {
    background: var(--color-gray-81);
}

@media (max-width: 767.98px) {
    /* The popup of the mobile design: a white sheet with a shadow, a row with an outline for every choice. */
    .mobile .sheet[b-zqm1bas1ky] {
        border-radius: var(--profile-availability-sheet-radius);
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-45);
    }

    .mobile .sheet[b-zqm1bas1ky]::before {
        display: none;
    }

    /* A choice is a row with an outline that throws the shadow (`outlined-on-phone`). */
    .mobile .option[b-zqm1bas1ky] {
        border-radius: var(--profile-availability-row-radius);
        color: var(--color-gray-45);
        --outline: var(--border-1) solid var(--color-gray-45);
    }

    .mobile .label[b-zqm1bas1ky] {
        color: var(--color-gray-19);
    }
}
/* /Pages/Profile/ProfileEnding.razor.rz.scp.css */
@media (max-width: 767.98px) {
    /* As high as the frame has it down to its end, the room for the bottom bar included. */
    .mobile .ending[b-6urtjv7ljm] {
        block-size: var(--ending-height);
        margin-block-start: var(--ending-gap);
    }

    .mobile .support[b-6urtjv7ljm] {
        border-radius: var(--radius-lg);
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-89);
        color: var(--color-gray-45);
    }

    .mobile .network[b-6urtjv7ljm] {
        color: var(--color-gray-45);
    }
}
/* /Pages/Profile/ProfileFaqPage.razor.rz.scp.css */
/* The list stands in the flow of the frame, so that the page grows with an open question: it starts where the
   artboard has the first question and leaves the room of the artboard under the last one. */
.list[b-j33qcgyqnu] {
    display: flex;
    flex-direction: column;
    gap: var(--profile-faq-gap);
    inline-size: var(--box-width);
    margin-inline-start: var(--box-start);
    padding-block: var(--box-top) var(--profile-faq-below);
}

/* The pencil stands above the list, not in it. */
.pencil-place[b-j33qcgyqnu] {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--box-top);
    inset-inline-start: var(--box-start);
    inline-size: var(--box-width);
}

/* A closed question is a box without a fill whose outline throws the shadow (`outlined`). */
.item[b-j33qcgyqnu] {
    position: relative;
    min-block-size: var(--profile-faq-height);
    border-radius: var(--radius-xl);
    --outline: var(--border-2) solid var(--color-gray-80);
}

/* An open one is white; the whole box throws the shadow. */
.item.open[b-j33qcgyqnu] {
    background: var(--color-white);
    box-shadow: var(--shadow-lg-gray-89);
}

.item.open[b-j33qcgyqnu]::before {
    filter: none;
}

.head[b-j33qcgyqnu] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: var(--profile-faq-height);
    color: var(--color-gray-19);
}

.chevron[b-j33qcgyqnu] {
    --icon: url("/assets/icons/icon-13.svg");
    color: var(--color-gray-44);
}

/* The arrow of an open question is the same arrow, turned about its middle. */
.open .chevron[b-j33qcgyqnu] {
    transform: rotate(-90deg);
}

.answer[b-j33qcgyqnu] {
    inline-size: var(--profile-faq-answer-width);
    white-space: pre-line;
    line-height: var(--profile-faq-line-pitch);
    margin-inline-start: var(--profile-faq-answer-start);
    padding-block: var(--profile-faq-answer-top) var(--profile-faq-answer-below);
    color: var(--color-gray-20);
}

@media (max-width: 767.98px) {
    .mobile .heading[b-j33qcgyqnu] {
        color: var(--color-gray-45);
    }

    .mobile .item[b-j33qcgyqnu] {
        border-radius: var(--profile-faq-radius);
    }

    .mobile .item[b-j33qcgyqnu]::before {
        border-width: var(--border-1);
    }

    /* The answer wraps as the screen needs; its lines keep their distance, so the first one starts half of the
       extra room higher. */
    .mobile .answer[b-j33qcgyqnu] {
        padding-block-start: calc(var(--profile-faq-answer-top) - (var(--profile-faq-line-pitch) - var(--font-size-13) * 1.5) / 2);
        line-height: var(--profile-faq-line-pitch);
    }

    .mobile .ending[b-j33qcgyqnu] {
        block-size: var(--profile-faq-ending-height);
    }
}
/* /Pages/Profile/ProfileHeader.razor.rz.scp.css */
/* Only the mobile design has this band; the element is not shown on the desktop (on-phone). */
@media (max-width: 767.98px) {
    .mobile .band[b-hjsinhvgw2] {
        border-end-start-radius: var(--profile-header-radius);
        border-end-end-radius: var(--profile-header-radius);
        background: linear-gradient(var(--profile-header-angle), var(--theme-from) 0%, var(--theme-to) 100%);
        box-shadow: var(--shadow-md-5);
        color: var(--color-white);
    }

    .mobile .divider[b-hjsinhvgw2] {
        background: var(--color-white);
    }

    .mobile .exit[b-hjsinhvgw2] {
        --icon: url("/assets/mobile/profile-exit.svg");
    }
}

/* the picture of the account in the circle of the drawing */
.picture[b-hjsinhvgw2] {
    overflow: hidden;
    background: var(--color-gray-87);
}
/* /Pages/Profile/ProfileNews.razor.rz.scp.css */
.heading[b-8qkixd1iul] {
    color: var(--color-gray-60);
}

.more[b-8qkixd1iul] {
    color: var(--color-primary);
}

.card[b-8qkixd1iul] {
    border-radius: var(--radius-xl);
    background: var(--color-white);
}

/* What scrolls in the window: as high as the four news of the design. */
.held[b-8qkixd1iul] {
    position: relative;
    block-size: var(--profile-news-held-height);
}

.title[b-8qkixd1iul],
.text[b-8qkixd1iul] {
    color: var(--color-black);
}

.title[b-8qkixd1iul] {
    max-inline-size: var(--profile-news-text-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A summary wraps on four lines of the design; what is longer ends in an ellipsis. */
.text[b-8qkixd1iul] {
    display: -webkit-box;
    inline-size: var(--profile-news-text-width);
    margin: 0;
    overflow: hidden;
    line-height: var(--profile-news-line-pitch);
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

/* A thick line with round ends. */
.rule[b-8qkixd1iul] {
    border-radius: calc(var(--profile-news-rule-thickness) / 2);
    background: var(--color-primary);
}

.button[b-8qkixd1iul] {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    border-start-end-radius: var(--radius-2xl);
    border-end-end-radius: var(--radius-2xl);
    background: var(--color-gray-20);
    color: var(--color-white);
}

.button-icon[b-8qkixd1iul] {
    --icon: url("/assets/icons/icon-19.svg");
}
/* /Pages/Profile/ProfileOrganizer.razor.rz.scp.css */
.title[b-sfhbbb67k4],
.name[b-sfhbbb67k4] {
    color: var(--color-gray-19);
}

.subtitle[b-sfhbbb67k4] {
    color: var(--color-gray-73);
}

/* The rows stand in the window of the list; the window is as long as all of them need. */
.rows[b-sfhbbb67k4] {
    block-size: calc(var(--profile-organizer-row) * var(--rows));
}

/* An organizer, and an answer to the question: the ring and what belongs to it are placed in its box; the ring
   is the one radio of the site (ChoiceRing). */
.option[b-sfhbbb67k4],
.answer[b-sfhbbb67k4] {
    color: var(--color-gray-60);
}

.text[b-sfhbbb67k4],
.question[b-sfhbbb67k4] {
    color: var(--color-gray-45);
}

.badge[b-sfhbbb67k4] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

/* The box of a row that holds «!» over it: only «!» takes a press. */
.badge-place[b-sfhbbb67k4] {
    pointer-events: none;
}

.badge-place > .badge[b-sfhbbb67k4] {
    pointer-events: auto;
}

.rule[b-sfhbbb67k4] {
    background: var(--color-gray-81);
}

/* The bar beside the list: a grey line, and on it a thumb in the colours of the role that moves down the line as
   far as the list is scrolled (wwwroot/js/scroll.js sets --scrolled). */
.track[b-sfhbbb67k4] {
    background: var(--color-gray-87);
}

.thumb[b-sfhbbb67k4] {
    border-radius: var(--profile-organizer-thumb-radius);
    --scrolled: 0;
    background: linear-gradient(var(--profile-organizer-thumb-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    transform: translateY(calc(var(--scrolled) * var(--profile-organizer-thumb-travel)));
    cursor: grab;
    touch-action: none;
}

/* The box of the question has no fill: its outline throws the shadow (`outlined`). */
.know[b-sfhbbb67k4] {
    border-radius: var(--profile-organizer-know-radius);
    --outline: var(--border-2) solid var(--color-gray-81);
}

@media (max-width: 767.98px) {
    /* The popup of the mobile design: a white sheet with a shadow behind the title and the list. */
    .mobile .sheet[b-sfhbbb67k4] {
        border-radius: var(--profile-organizer-sheet-radius);
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-45);
    }

    /* An organizer is a row with an outline that throws the shadow (`outlined-on-phone`). */
    .mobile .option[b-sfhbbb67k4] {
        border-radius: var(--profile-organizer-row-radius);
        color: var(--color-gray-45);
        --outline: var(--border-1) solid var(--color-gray-45);
    }

    /* The question stands on a white sheet of its own. */
    .mobile .know[b-sfhbbb67k4] {
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-45);
    }

    .mobile .know[b-sfhbbb67k4]::before {
        display: none;
    }

    .mobile .question[b-sfhbbb67k4] {
        color: var(--color-gray-19);
    }

    .mobile .answer[b-sfhbbb67k4] {
        color: var(--color-gray-45);
    }
}
/* /Pages/Profile/ProfilePage.razor.rz.scp.css */
/* The line between the numbers and the news. */
.line[b-8hqttoyo1n] {
    background: var(--color-gray-81);
}
/* /Pages/Profile/ProfileScaffold.razor.rz.scp.css */
/* The part of the page above the footer is as high as the artboard has it; a page whose content is longer makes it
   grow. Everything stands where the artboard has it, measured from the frame of the design. */
.body[b-8ue1nzzbxk] {
    position: relative;
}

.frame[b-8ue1nzzbxk] {
    min-block-size: var(--profile-body-height);
}

/* The column is a layer of its own, so that it can be drawn at half its strength as a whole. */
.column[b-8ue1nzzbxk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.column > *[b-8ue1nzzbxk],
.links > *[b-8ue1nzzbxk] {
    pointer-events: auto;
}

.column.dimmed[b-8ue1nzzbxk] {
    opacity: var(--opacity-50);
}

.heading[b-8ue1nzzbxk],
.welcome[b-8ue1nzzbxk] {
    color: var(--color-gray-60);
}

.avatar[b-8ue1nzzbxk] {
    overflow: hidden;
    border: var(--border-1) solid var(--color-gray-60);
    border-radius: 50%;
    background: var(--color-gray-87);
}

.camera[b-8ue1nzzbxk] {
    --icon: url("/assets/icons/camera.svg");
    color: var(--color-white);
}

.exit[b-8ue1nzzbxk] {
    --icon: url("/assets/icons/exit.svg");
    color: var(--color-gray-45);
}

.link[b-8ue1nzzbxk] {
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-md-gray-87);
}

.link-icon[b-8ue1nzzbxk] {
    color: var(--color-gray-73);
}

.link.open[b-8ue1nzzbxk] {
    background: linear-gradient(var(--profile-link-angle), var(--theme-from) 0%, var(--theme-to) 100%);
    color: var(--color-white);
}

.link.open .link-icon[b-8ue1nzzbxk] {
    color: var(--color-white);
}

/* The invitation of the host: a photo cut to the card, the logo over it and the button of the header. The design
   blends the photo with the page by its light alone (Figma: luminosity), which leaves it without colour; the card
   has the background of the page for that and blends inside itself. */
.banner[b-8ue1nzzbxk] {
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-lg);
    background: var(--page-background);
    box-shadow: var(--shadow-md-gray-87);
}

.photo[b-8ue1nzzbxk] {
    mix-blend-mode: luminosity;
}

.spine[b-8ue1nzzbxk] {
    block-size: var(--profile-spine-height);
    background: var(--color-gray-81);
}

/* The footer on its card, with the room the artboard leaves below it. */
.tail[b-8ue1nzzbxk] {
    padding-block-end: var(--profile-below);
}

@media (max-width: 767.98px) {
    /* Phone: the frame of the page starts at the top of the screen with the band of the profile and is as high as
       the mobile frame of the page says. */
    .mobile .frame[b-8ue1nzzbxk] {
        min-block-size: 0;
        block-size: var(--profile-phone-height);
    }

    .mobile .column.dimmed[b-8ue1nzzbxk] {
        opacity: 1;
    }

    /* The links lie over what the page puts beside them: the row of the numbers keeps room for the shadow of its
       cards, which reaches down to the first link. */
    .mobile .column[b-8ue1nzzbxk] {
        z-index: 1;
    }

    /* A link of the mobile design: a box whose outline throws the shadow (`outlined-on-phone`), a grey label and
       its own drawing. */
    .mobile .link[b-8ue1nzzbxk] {
        background: none;
        box-shadow: none;
        color: var(--color-gray-45);
        --outline: var(--profile-home-link-border) solid var(--color-gray-73);
    }
}
/* /Pages/Profile/ProfileSheet.razor.rz.scp.css */
/* A card and the box of a longer text have no fill: their outline throws the shadow (`outlined`). */
.card[b-jqkz5k40ci],
.field[b-jqkz5k40ci] {
    border-radius: var(--profile-sheet-card-radius);
    --outline: var(--profile-sheet-card-border) solid var(--color-gray-80);
}

.field[b-jqkz5k40ci] {
    --outline: var(--profile-sheet-card-border) solid var(--color-gray-81);
}

/* Lines, rings and dots are drawn in the colour of their item. */
.rule[b-jqkz5k40ci],
.dot[b-jqkz5k40ci] {
    background: currentColor;
}

.ring[b-jqkz5k40ci],
.dot[b-jqkz5k40ci] {
    border-radius: 50%;
}

.ring[b-jqkz5k40ci] {
    /* a shadow inside, not a border, so that it stays round and even at every scale of the screen (ChoiceRing) */
    box-shadow: inset 0 0 0 var(--profile-sheet-ring) currentColor;
}

.photo[b-jqkz5k40ci] {
    overflow: hidden;
    border-radius: var(--profile-sheet-photo-radius);
    box-shadow: var(--shadow-lg-gray-89);
}

.note[b-jqkz5k40ci] {
    --line-pitch: var(--profile-sheet-note-pitch);
}

.tone-gray-19[b-jqkz5k40ci] {
    color: var(--color-gray-19);
}

.tone-gray-20[b-jqkz5k40ci] {
    color: var(--color-gray-20);
}

.tone-gray-45[b-jqkz5k40ci] {
    color: var(--color-gray-45);
}

.tone-gray-60[b-jqkz5k40ci] {
    color: var(--color-gray-60);
}

.tone-gray-73[b-jqkz5k40ci] {
    color: var(--color-gray-73);
}

.tone-gray-81[b-jqkz5k40ci] {
    color: var(--color-gray-81);
}

@media (max-width: 767.98px) {
    .mobile .chip[b-jqkz5k40ci] {
        border: var(--border-1) solid var(--color-gray-44);
        border-radius: var(--radius-25);
    }

    /* A text that wraps (both are set in 10px): its lines keep the distance of the design, so the first one starts half
       of the extra room higher. */
    .mobile .wrap[b-jqkz5k40ci] {
        white-space: normal;
    }

    .mobile .pitch-17[b-jqkz5k40ci] {
        margin-block-start: calc((var(--font-size-10) * 1.5 - var(--profile-sheet-pitch-17)) / 2);
        line-height: var(--profile-sheet-pitch-17);
    }

    .mobile .pitch-20[b-jqkz5k40ci] {
        margin-block-start: calc((var(--font-size-10) * 1.5 - var(--profile-sheet-pitch-20)) / 2);
        line-height: var(--profile-sheet-pitch-20);
    }
}
/* /Pages/Profile/ProfileStats.razor.rz.scp.css */
.card[b-3x03ejx9nd] {
    border-radius: var(--radius-xl);
    background: var(--color-white);
}

.heading[b-3x03ejx9nd],
.title[b-3x03ejx9nd] {
    color: var(--color-gray-60);
}

.title-icon[b-3x03ejx9nd] {
    --icon: url("/assets/icons/user.svg");
    color: var(--color-gray-60);
}

.count[b-3x03ejx9nd],
.total[b-3x03ejx9nd] {
    color: var(--color-gray-45);
}

.line[b-3x03ejx9nd] {
    background: var(--color-gray-81);
}

.total-label[b-3x03ejx9nd] {
    color: var(--color-gray-81);
}

.button[b-3x03ejx9nd] {
    border-radius: var(--radius-lg);
    background: linear-gradient(var(--profile-stats-button-angle), var(--theme-from) var(--profile-stats-button-from), var(--theme-to) var(--profile-stats-button-to));
    box-shadow: var(--shadow-md-gray-87);
    color: var(--color-white);
}

@media (max-width: 767.98px) {
    /* A layer over the frame of the page that cuts off what reaches beyond its sides: the mobile frames draw the two
       arrows one pixel wider than the screen. The layer itself lets touches through. */
    .mobile .slider[b-3x03ejx9nd] {
        position: absolute;
        inset: 0;
        overflow-x: clip;
        pointer-events: none;
    }

    .mobile .slider > *[b-3x03ejx9nd] {
        pointer-events: auto;
    }

    /* The row of the two cards: it scrolls sideways from edge to edge of the screen and stops at a card. The box of
       the row is higher than the cards, so that their shadow is not cut off. */
    .mobile .view[b-3x03ejx9nd] {
        position: absolute;
        inset-inline: 0;
        inset-block-start: var(--profile-stats-track-top);
        block-size: calc(var(--profile-stats-slide-height) + var(--profile-stats-shadow-room));
        overflow-y: hidden;
        scroll-snap-type: inline mandatory;
    }

    .mobile .track[b-3x03ejx9nd] {
        display: flex;
        gap: var(--profile-stats-slide-gap);
        inline-size: max-content;
        padding-inline: var(--profile-stats-slide-start);
    }

    .mobile .slide[b-3x03ejx9nd] {
        position: relative;
        inline-size: var(--profile-stats-slide-width);
        block-size: var(--profile-stats-slide-height);
        scroll-snap-align: center;
    }

    .mobile .title[b-3x03ejx9nd] {
        color: var(--color-gray-45);
    }

    .mobile .title-dot[b-3x03ejx9nd] {
        border-radius: 50%;
        background: var(--color-primary);
        box-shadow: var(--shadow-md-primary-2);
    }

    .mobile .sheet[b-3x03ejx9nd] {
        border-radius: var(--radius-lg);
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-89);
    }

    .mobile .m-count[b-3x03ejx9nd] {
        color: var(--color-gray-19);
    }

    /* An arrow is a white tab at the edge of the screen, round on the side of the card. */
    .mobile .arrow[b-3x03ejx9nd] {
        background: var(--color-white);
        box-shadow: var(--shadow-md);
    }

    .mobile .previous[b-3x03ejx9nd] {
        border-start-end-radius: var(--profile-stats-arrow-radius);
        border-end-end-radius: var(--profile-stats-arrow-radius);
    }

    .mobile .next[b-3x03ejx9nd] {
        border-start-start-radius: var(--profile-stats-arrow-radius);
        border-end-start-radius: var(--profile-stats-arrow-radius);
    }

    .mobile .next img[b-3x03ejx9nd] {
        transform: scaleX(-1);
    }
}
/* /Pages/Profile/ProfileTicketFormPage.razor.rz.scp.css */
.label[b-qqyuxjbolk] {
    color: var(--color-gray-45);
}

.star[b-qqyuxjbolk] {
    color: var(--color-red-2);
}

/* The two buttons: the button at the size of its box, with the corners and the shadow of #85. */
.send[b-qqyuxjbolk],
.cancel[b-qqyuxjbolk] {
    --app-button-primary-width: var(--box-width);
    --app-button-secondary-width: var(--box-width);
}

@media (max-width: 767.98px) {
    .mobile .label[b-qqyuxjbolk] {
        color: var(--color-gray-44);
    }

}
/* /Pages/Profile/ProfileTicketFrame.razor.rz.scp.css */
.card[b-y9vt5nf2fy] {
    border-radius: var(--radius-xl);
    background: var(--color-white);
}

.heading[b-y9vt5nf2fy] {
    color: var(--color-gray-60);
}

.envelope[b-y9vt5nf2fy] {
    --icon: url("/assets/icons/message-1.svg");
    color: var(--color-gray-73);
}

@media (max-width: 767.98px) {
    .mobile .heading[b-y9vt5nf2fy] {
        color: var(--color-gray-45);
    }
}
/* /Pages/Profile/ProfileTicketPage.razor.rz.scp.css */
/* «بازگشت به تیکت‌ها» in the place and the look of «ارسال تیکت جدید» of the list, above the card the ticket fills. */
.new[b-7dadok7zra] {
    z-index: 1;
    --app-button-primary-width: var(--box-width);
}

/* The card of the tickets: the parts of the ticket under its heading, the conversation down to its end. */
.ticket-page[b-7dadok7zra] {
    display: flex;
    flex-direction: column;
    gap: var(--ticket-page-gap);
    padding: var(--ticket-page-padding);
    padding-block-start: var(--ticket-page-top);
}

.head[b-7dadok7zra] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ticket-page-head-gap);
}

.subject[b-7dadok7zra] {
    flex: 1 1 100%;
    color: var(--color-gray-20);
}

.chips[b-7dadok7zra] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ticket-page-head-gap);
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip[b-7dadok7zra] {
    display: inline-flex;
    align-items: center;
    block-size: var(--ticket-page-chip-height);
    padding-inline: var(--ticket-page-chip-padding);
    border-radius: var(--ticket-page-chip-radius);
    background: var(--color-gray-97);
    color: var(--color-gray-45);
}

.chip.answered[b-7dadok7zra] {
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
}

.chip.open[b-7dadok7zra] {
    background: var(--color-orange);
    color: var(--color-white);
}

.close-ticket[b-7dadok7zra] {
    color: var(--color-red);
}

.close-ticket:disabled[b-7dadok7zra] {
    opacity: var(--opacity-50);
}

.thread[b-7dadok7zra] {
    flex: 1 1 auto;
    min-block-size: 0;
}

.note[b-7dadok7zra] {
    color: var(--color-gray-45);
}

@media (max-width: 767.98px) {
    /* Phone: under the band of the profile, in the flow of the page; the conversation has a height of its own. */
    .mobile .ticket-page[b-7dadok7zra] {
        position: relative;
        inset: auto;
        inline-size: var(--tickets-card-width);
        block-size: auto;
        margin-inline-start: var(--tickets-card-start);
        padding: 0;
        padding-block-start: var(--ticket-page-top);
    }

    .mobile .thread[b-7dadok7zra] {
        block-size: var(--ticket-page-thread-height);
    }

    .mobile .ending[b-7dadok7zra] {
        block-size: var(--tickets-ending-height);
    }
}
/* /Pages/Profile/ProfileTicketsPage.razor.rz.scp.css */
/* «ارسال تیکت جدید»: the button at the size of its box, with the gradient, the corners and the shadow of #84. */
.new[b-y3m2ccpx5n] {
    --app-button-primary-width: var(--box-width);
}

.head[b-y3m2ccpx5n] {
    color: var(--color-gray-81);
}

/* A ticket: a grey row; what it says is grey, one text beside the other between dashed lines. */
.row[b-y3m2ccpx5n] {
    border-radius: var(--tickets-row-radius);
    background: var(--color-gray-97);
    color: var(--color-gray-45);
}

/* The time and the day stand in one line as the design writes them, the time first, with its two spaces between them. */
.clock[b-y3m2ccpx5n],
.pair[b-y3m2ccpx5n] {
    white-space: pre;
}

.sep[b-y3m2ccpx5n] {
    background: repeating-linear-gradient(to bottom, var(--color-gray-44) 0, var(--color-gray-44) var(--tickets-dash), transparent var(--tickets-dash), transparent calc(2 * var(--tickets-dash)));
}

.details[b-y3m2ccpx5n] {
    display: block;
    border-radius: var(--tickets-details-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-sm-4);
    color: var(--color-gray-20);
}

/* The place of the first row while the tickets are read, or when there is none. */
.waiting[b-y3m2ccpx5n] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.note[b-y3m2ccpx5n] {
    color: var(--color-gray-45);
}

/* The pager under the eight rows of the card. */
.pager[b-y3m2ccpx5n] {
    inset-block-start: var(--ticket-page-pager-top);
    block-size: var(--ticket-page-pager-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ticket-page-pager-gap);
}

.turn[b-y3m2ccpx5n] {
    block-size: 100%;
    padding-inline: var(--ticket-page-pager-padding);
    border: var(--border-1) solid var(--color-gray-89);
    border-radius: var(--ticket-page-pager-radius);
    background: var(--color-white);
    color: var(--color-gray-20);
}

.turn:disabled[b-y3m2ccpx5n] {
    opacity: var(--opacity-50);
    cursor: default;
}

.where[b-y3m2ccpx5n] {
    color: var(--color-gray-45);
}

@media (max-width: 767.98px) {
    /* Phone: the heading and the button stand in the frame under the band of the profile; the tickets follow them
       in the flow of the page, one card below the other. */
    .mobile .tickets[b-y3m2ccpx5n] {
        padding-block-start: var(--tickets-top-height);
    }

    /* A ticket is a white card with a shadow, as wide and as high as the cards of 1:20713, as far below the card
       before it. */
    .mobile .row[b-y3m2ccpx5n] {
        position: relative;
        inset: auto;
        inline-size: var(--tickets-card-width);
        block-size: var(--tickets-card-height);
        margin-inline-start: var(--tickets-card-start);
        margin-block-start: var(--tickets-card-gap);
        border-radius: var(--tickets-card-radius);
        background: var(--color-white);
        box-shadow: var(--shadow-lg-gray-89);
    }

    .mobile .row:first-child[b-y3m2ccpx5n] {
        margin-block-start: 0;
    }

    .mobile .waiting[b-y3m2ccpx5n],
    .mobile .pager[b-y3m2ccpx5n] {
        position: relative;
        inset: auto;
        inline-size: var(--tickets-card-width);
        margin-inline-start: var(--tickets-card-start);
    }

    .mobile .waiting[b-y3m2ccpx5n] {
        block-size: var(--tickets-card-height);
    }

    .mobile .pager[b-y3m2ccpx5n] {
        block-size: var(--ticket-page-pager-height);
        margin-block-start: var(--tickets-card-gap);
    }

    /* The tickets that the mobile frames do not draw: their block starts one distance below the last card of the
       frames, so that it holds all the room they take. */
    .mobile .more[b-y3m2ccpx5n] {
        padding-block-start: var(--tickets-card-gap);
    }

    .mobile .time[b-y3m2ccpx5n],
    .mobile .status[b-y3m2ccpx5n] {
        color: var(--color-gray-73);
    }

    .mobile .details[b-y3m2ccpx5n] {
        border: var(--border-1) solid var(--color-gray-44);
        border-radius: var(--tickets-details-radius);
    }

    /* Under the last card: the name of the site, down to the end of the frame. */
    .mobile .ending[b-y3m2ccpx5n] {
        block-size: var(--tickets-ending-height);
    }
}
/* /Pages/Profile/SiteNameLine.razor.rz.scp.css */
@media (max-width: 767.98px) {
    .mobile .line[b-o29x3suf5f] {
        background: var(--color-gray-19);
    }

    .mobile .name[b-o29x3suf5f] {
        color: var(--color-gray-45);
    }
}
/* /Pages/Request/RequestPage.razor.rz.scp.css */
/* The frame holds what the artboard has above the footer: the head, the fields of the first step or the rows of the
   second, each where the artboard has it. The rows of the second step follow each other one distance apart from the
   first row; the first row is taller while it asks «ذکر توسل», and what follows the rows moves down with it. */
.request[b-o9rf3pk4zp] {
    --open-shift: calc(0 * var(--px));
    --footer-shift: calc(0 * var(--px));
}

.request.opened[b-o9rf3pk4zp] {
    --open-shift: var(--request-page-two-open-extra);
    --footer-shift: var(--request-page-two-open-footer);
}

.frame[b-o9rf3pk4zp] {
    block-size: var(--request-page-one-height);
}

/* The footer moves down with an opened row, by a little less than the row grows (#92). */
.step-2 .frame[b-o9rf3pk4zp] {
    block-size: calc(var(--request-page-two-height) + var(--footer-shift));
}

/* The footer on its card, with the room the artboards leave below it. */
.tail[b-o9rf3pk4zp] {
    padding-block-end: var(--request-page-below);
}

/* The head: the step in grey, the line between it and «از 2», the rule with the bar of the step in the primary
   colour, what the step asks for. */
.step[b-o9rf3pk4zp],
.of[b-o9rf3pk4zp],
.subtitle[b-o9rf3pk4zp] {
    white-space: nowrap;
    color: var(--color-gray-45);
}

/* the heading of the step: «مرحله ۱», a line, «از ۲» of the same size and lighter */
.step-head[b-o9rf3pk4zp] {
    display: flex;
    align-items: center;
    inline-size: max-content;
    white-space: nowrap;
}

.of[b-o9rf3pk4zp] {
    margin-inline-start: var(--request-page-step-gap);
    padding-inline-start: var(--request-page-step-gap);
    border-inline-start: var(--border-2) solid var(--color-gray-44);
    font: var(--text-30-medium);
}

.rule[b-o9rf3pk4zp] {
    background: var(--color-gray-81);
}

.progress[b-o9rf3pk4zp] {
    border-radius: var(--request-page-progress-radius);
    background: var(--color-primary);
}

.other-label[b-o9rf3pk4zp],
.choice-label[b-o9rf3pk4zp],
.terms-label[b-o9rf3pk4zp] {
    white-space: nowrap;
    color: var(--color-gray-60);
}

.ticked > .other-label[b-o9rf3pk4zp] {
    color: var(--color-gray-20);
}

.other[b-o9rf3pk4zp],
.choice[b-o9rf3pk4zp],
.terms[b-o9rf3pk4zp],
.same[b-o9rf3pk4zp] {
    color: var(--color-gray-60);
    cursor: pointer;
}

/* A field that opens a sheet: an outline like the fields of the form, its words grey until it shows a choice. */
.organizer[b-o9rf3pk4zp] {
    border-radius: var(--request-page-field-radius);
    --outline: var(--request-page-field-border) solid var(--color-gray-81);
}

.field-text[b-o9rf3pk4zp] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: start;
    color: var(--color-gray-19);
}

.field-text.empty[b-o9rf3pk4zp] {
    color: var(--color-gray-73);
}

.field-text.filled[b-o9rf3pk4zp] {
    color: var(--color-gray-45);
    --line-pitch: var(--request-page-two-date-pitch);
}

.organizer-text[b-o9rf3pk4zp],
.row-title[b-o9rf3pk4zp] {
    white-space: nowrap;
    color: var(--color-gray-45);
}

/* The field of the organizer opens the choice; «!» in it opens what the organizers are. Its words start at its right
   end, not in the middle where a button sets them. */
.organizer-open[b-o9rf3pk4zp] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    text-align: start;
}

/* The words of the terms that are drawn as a link: a button over them opens the terms. */
.terms-link[b-o9rf3pk4zp] {
    z-index: 1;
}

.mark[b-o9rf3pk4zp] {
    border-radius: 50%;
    background: var(--color-gray-73);
    color: var(--color-white);
}

/* The rows: the first where the artboard has it, the others one distance under it. */
.rows[b-o9rf3pk4zp] {
    position: absolute;
    inset-inline-start: var(--box-start);
    inset-block-start: var(--box-top);
    inline-size: var(--box-width);
    display: flex;
    flex-direction: column;
    gap: var(--request-page-row-gap);
}

.row[b-o9rf3pk4zp] {
    position: relative;
    flex: none;
    block-size: var(--request-page-row-height);
    border-radius: var(--request-page-row-radius);
    --outline: var(--request-page-field-border) solid var(--color-gray-81);
}

.row[b-o9rf3pk4zp]::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--outline);
    border-radius: inherit;
    filter: drop-shadow(var(--shadow-lg-gray-89));
    pointer-events: none;
}

.row.open[b-o9rf3pk4zp] {
    block-size: calc(var(--request-page-row-height) + var(--request-page-two-open-extra));
}

.notes-row[b-o9rf3pk4zp] {
    block-size: var(--request-page-notes-height);
    background: var(--color-white);
}

.below[b-o9rf3pk4zp] {
    position: absolute;
    inset: 0;
    transform: translateY(var(--open-shift));
    pointer-events: none;
}

.below > *[b-o9rf3pk4zp] {
    pointer-events: auto;
}

/* «ذکر توسل»: a white field inside the row. */
.open-field[b-o9rf3pk4zp] {
    border-radius: var(--request-page-open-field-radius);
    background: var(--color-white);
    cursor: text;
}

.input[b-o9rf3pk4zp] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-gray-20);
    outline: none;
}

.input[b-o9rf3pk4zp]::placeholder {
    color: var(--color-gray-60);
    opacity: 1;
}

.notes-text[b-o9rf3pk4zp] {
    resize: none;
    color: var(--color-gray-19);
}

.terms-line[b-o9rf3pk4zp] {
    background: var(--color-gray-81);
}

@media (max-width: 767.98px) {
    .mobile .of[b-o9rf3pk4zp] {
        font: var(--text-15-medium);
    }

    /* Phone: the column of the frames over the light grey of the page, the waves of the frames behind the fields. The
       rows are of their own heights; what follows them stands where the frame has it and moves down with the first. */
    .mobile .phone[b-o9rf3pk4zp] {
        overflow-x: clip;
        background: var(--color-gray-95);
    }

    .mobile .column[b-o9rf3pk4zp] {
        block-size: var(--request-page-one-height);
    }

    .mobile .step-2 .column[b-o9rf3pk4zp] {
        block-size: calc(var(--request-page-two-height) + var(--open-shift));
    }

    .mobile .waves[b-o9rf3pk4zp] {
        opacity: var(--request-page-waves-opacity);
    }

    .mobile .rule[b-o9rf3pk4zp] {
        background: var(--color-gray-19);
    }

    .mobile .other-label[b-o9rf3pk4zp],
    .mobile .choice-label[b-o9rf3pk4zp],
    .mobile .terms-label[b-o9rf3pk4zp],
    .mobile .ticked > .other-label[b-o9rf3pk4zp] {
        color: var(--color-gray-45);
    }

    .mobile .tail[b-o9rf3pk4zp] {
        padding-block-end: 0;
    }

    .mobile .organizer[b-o9rf3pk4zp] {
        --outline: var(--request-page-field-border) solid var(--color-gray-80);
    }

    .mobile .row[b-o9rf3pk4zp] {
        --outline: var(--request-page-field-border) solid var(--color-gray-80);
    }

    .mobile .row.coordination[b-o9rf3pk4zp],
    .mobile .row.guests[b-o9rf3pk4zp],
    .mobile .row.age[b-o9rf3pk4zp] {
        block-size: var(--request-page-two-coordination-height);
    }

    .mobile .row.count[b-o9rf3pk4zp] {
        block-size: var(--request-page-two-count-height);
    }

    .mobile .row.open[b-o9rf3pk4zp] {
        block-size: calc(var(--request-page-two-coordination-height) + var(--request-page-two-open-extra));
    }

    .mobile .notes-box[b-o9rf3pk4zp] {
        border-radius: var(--request-page-row-radius);
        --outline: var(--request-page-field-border) solid var(--color-gray-80);
    }

    .mobile .notes-box[b-o9rf3pk4zp]::before {
        content: "";
        position: absolute;
        inset: 0;
        border: var(--outline);
        border-radius: inherit;
        filter: drop-shadow(var(--shadow-lg-gray-89));
        pointer-events: none;
    }

    .mobile .open-field[b-o9rf3pk4zp] {
        border-radius: var(--request-page-field-radius);
        box-shadow: inset 0 0 0 var(--request-page-field-border) var(--color-gray-80);
    }

    .mobile .terms-line[b-o9rf3pk4zp] {
        background: var(--color-gray-19);
    }

}
/* /Pages/SignIn/SignInDetailsPage.razor.rz.scp.css */
/* The page only arranges shared parts: SignInScene and SignInPanel carry the styles. */
/* /Pages/SignIn/SignInPage.razor.rz.scp.css */
/* The page only arranges shared parts: SignInScene and SignInPanel carry the styles. */
/* /Pages/SignIn/SignInPanel.razor.rz.scp.css */
/* One sign-in system. On the desktop the element is the card: what belongs to it is placed from the top and the inline
   start of the card. The mobile design has no card: there the element is the frame of the page under the header. */
.panel[b-nh8n4qankk] {
    position: absolute;
    inset-inline-start: var(--card-start);
    inset-block-start: var(--sign-in-card-top);
    inline-size: var(--sign-in-card-width);
    block-size: var(--card-height);
    --card-start: var(--sign-in-card-single-start);
    --field-pitch: calc(var(--sign-in-field-2-top) - var(--sign-in-field-1-top));
    --fields-shift: calc(0 * var(--px));
}

/* One field: the geometry of the code step (#197). Two fields: the one of step 1 (#231). Three fields: one field more,
   at the distance of the first two, with the buttons and the end of the card moved down by as much. */
.panel.fields-1[b-nh8n4qankk] {
    --card-height: var(--sign-in-card-height-2);
    --buttons-top: var(--sign-in-buttons-top-2);
}

.panel.fields-2[b-nh8n4qankk] {
    --card-height: var(--sign-in-card-height-1);
    --buttons-top: var(--sign-in-buttons-top-1);
}

.panel.fields-3[b-nh8n4qankk] {
    --fields-shift: var(--field-pitch);
    --card-height: calc(var(--sign-in-card-height-1) + var(--fields-shift));
    --buttons-top: calc(var(--sign-in-buttons-top-1) + var(--fields-shift));
}

.card[b-nh8n4qankk] {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-25);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.heading-icon[b-nh8n4qankk] {
    position: absolute;
    inset-inline-start: var(--sign-in-heading-icon-start);
    inset-block-start: var(--sign-in-heading-icon-top);
    inline-size: var(--sign-in-heading-icon-width);
    block-size: var(--sign-in-heading-icon-height);
    --icon: url("/assets/icons/user.svg");
    color: var(--color-gray-60);
}

.heading[b-nh8n4qankk] {
    position: absolute;
    inset-inline-start: var(--sign-in-heading-start);
    inset-block-start: var(--sign-in-heading-top);
    white-space: nowrap;
    color: var(--color-gray-60);
}

.title[b-nh8n4qankk],
.step[b-nh8n4qankk],
.hint[b-nh8n4qankk] {
    position: absolute;
    inset-inline-start: var(--sign-in-text-start);
    white-space: nowrap;
}

.title[b-nh8n4qankk] {
    inset-block-start: var(--sign-in-title-top);
    color: var(--color-gray-20);
}

.step[b-nh8n4qankk] {
    inset-block-start: var(--sign-in-step-top);
    font: var(--text-20-bold);
    color: var(--color-gray-45);
}

.rule[b-nh8n4qankk] {
    position: absolute;
    inset-inline-start: var(--sign-in-rule-start);
    inset-block-start: var(--sign-in-rule-top);
    inline-size: var(--sign-in-rule-width);
    block-size: var(--border-1);
    background: var(--color-gray-19);
}

.hint[b-nh8n4qankk] {
    inset-block-start: var(--sign-in-hint-top);
    font: var(--text-20-regular);
    color: var(--color-gray-45);
}

.field[b-nh8n4qankk] {
    position: absolute;
    inset-inline-start: var(--sign-in-field-start);
}

.field-1[b-nh8n4qankk] {
    inset-block-start: var(--sign-in-field-1-top);
}

.field-2[b-nh8n4qankk] {
    inset-block-start: var(--sign-in-field-2-top);
}

.field-3[b-nh8n4qankk] {
    inset-block-start: calc(var(--sign-in-field-2-top) + var(--field-pitch));
}

.action[b-nh8n4qankk] {
    position: absolute;
    inset-block-start: var(--buttons-top);
}

.primary-action[b-nh8n4qankk] {
    inset-inline-start: var(--sign-in-primary-start);
}

.secondary-action[b-nh8n4qankk] {
    inset-inline-start: var(--sign-in-secondary-start);
}

/* The one line for an answer of the API that is not a success (owner's answer 4). The design does not place it:
   it stands in the middle of the room that is left under the buttons, or under the terms. */
.error[b-nh8n4qankk] {
    display: flex;
    position: absolute;
    inset-inline-start: var(--sign-in-text-start);
    inset-block: calc(var(--buttons-top) + var(--app-button-height)) 0;
    align-items: center;
    white-space: nowrap;
    font: var(--text-20-regular);
    color: var(--color-danger);
}

/* With the password method: the way from signing in to registering and back, in the middle under the card. The design
   does not draw it; it stands where the line to the other system stood in Release 1. */
.other-way[b-nh8n4qankk] {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: calc(var(--card-height) + var(--sign-in-other-system-gap));
    transform: translateX(50%);
    white-space: nowrap;
    color: var(--color-primary);
}

/* Parts of the mobile design only. */
.glow[b-nh8n4qankk],
.logo[b-nh8n4qankk],
.phone-title[b-nh8n4qankk],
.site-rule[b-nh8n4qankk],
.site[b-nh8n4qankk] {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile .panel[b-nh8n4qankk] {
        inset-inline-start: 0;
        inset-block-start: 0;
        inline-size: 100%;
        block-size: var(--sign-in-page-height);
    }

    .mobile .card[b-nh8n4qankk],
    .mobile .heading-icon[b-nh8n4qankk],
    .mobile .heading[b-nh8n4qankk],
    .mobile .title[b-nh8n4qankk] {
        display: none;
    }

    .mobile .panel.fields-3[b-nh8n4qankk] {
        block-size: calc(var(--sign-in-page-height) + var(--fields-shift));
    }

    /* under the buttons, above the line of the name of the site */
    .mobile .other-way[b-nh8n4qankk] {
        inset-block-start: calc(var(--buttons-top) + var(--app-button-height) + var(--sign-in-other-system-gap));
        font: var(--text-12-regular);
    }

    .mobile .glow[b-nh8n4qankk],
    .mobile .logo[b-nh8n4qankk],
    .mobile .site-rule[b-nh8n4qankk] {
        display: block;
        position: absolute;
    }

    .mobile .glow[b-nh8n4qankk] {
        inset-inline-start: var(--sign-in-glow-start);
        inset-block-start: var(--sign-in-glow-top);
        inline-size: var(--sign-in-glow-width);
        block-size: var(--sign-in-glow-height);
    }

    .mobile .logo[b-nh8n4qankk] {
        inset-inline-start: var(--sign-in-logo-start);
        inset-block-start: var(--sign-in-logo-top);
        inline-size: var(--sign-in-logo-width);
        block-size: var(--sign-in-logo-height);
    }

    .mobile .phone-title[b-nh8n4qankk],
    .mobile .site[b-nh8n4qankk] {
        display: block;
        position: absolute;
        transform: translateX(50%);
        white-space: nowrap;
    }

    .mobile .phone-title[b-nh8n4qankk] {
        inset-inline-start: var(--sign-in-phone-title-center);
        inset-block-start: var(--sign-in-phone-title-top);
        font: var(--text-16-bold);
        color: var(--color-gray-19);
    }

    .mobile .step[b-nh8n4qankk] {
        font: var(--text-15-bold);
    }

    .mobile .hint[b-nh8n4qankk] {
        font: var(--text-12-regular);
    }

    .mobile .site-rule[b-nh8n4qankk] {
        inset-inline-start: var(--sign-in-site-rule-start);
        inset-block-start: calc(var(--sign-in-site-rule-top) + var(--fields-shift));
        inline-size: var(--sign-in-site-rule-width);
        block-size: var(--border-1);
        background: var(--color-gray-19);
    }

    .mobile .site[b-nh8n4qankk] {
        inset-inline-start: var(--sign-in-site-center);
        inset-block-start: calc(var(--sign-in-site-top) + var(--fields-shift));
        font: var(--text-14-regular);
        color: var(--color-gray-45);
    }

    .mobile .error[b-nh8n4qankk] {
        inset-block-end: calc(var(--sign-in-page-height) - var(--sign-in-site-rule-top));
        font: var(--text-12-regular);
    }
}
/* /Pages/SignIn/SignInScene.razor.rz.scp.css */
/* The page under the header. It is as high as the artboard, and as high as the window where that is higher; what
   the design lets run out at the lower edge (the band, the waves of the mobile design) stays at the lower edge. */
.scene[b-30emep4pwy] {
    position: relative;
    min-block-size: max(var(--sign-in-page-height), calc(100vh - var(--site-header-height)));
    overflow: clip;
}

/* The cards and the large logo are placed from the top and the inline start of the frame of the design. */
.frame[b-30emep4pwy] {
    min-block-size: inherit;
}

.watermark[b-30emep4pwy] {
    position: absolute;
    inline-size: var(--sign-in-watermark-width);
    block-size: var(--sign-in-watermark-height);
    opacity: var(--sign-in-watermark-opacity);
}

.watermark.step-one[b-30emep4pwy] {
    inset-inline-start: var(--sign-in-watermark-step-1-start);
    inset-block-start: var(--sign-in-watermark-step-1-top);
}

.watermark.host-code[b-30emep4pwy] {
    inset-inline-start: var(--sign-in-watermark-host-code-start);
    inset-block-start: var(--sign-in-watermark-host-code-top);
}

.watermark.preacher-code[b-30emep4pwy] {
    inset-inline-start: var(--sign-in-watermark-preacher-code-start);
    inset-block-start: var(--sign-in-watermark-preacher-code-top);
}

/* On the artboard the band starts at --sign-in-band-top and its lower part is cut off by the edge. */
.band[b-30emep4pwy] {
    position: absolute;
    inset-inline-start: var(--sign-in-band-start);
    inset-block-end: calc(var(--sign-in-page-height) - var(--sign-in-band-top) - var(--sign-in-band-height));
    inline-size: var(--sign-in-band-width);
    block-size: var(--sign-in-band-height);
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
    background: linear-gradient(var(--sign-in-band-angle), var(--theme-from) 0%, var(--theme-to) 100%);
}

/* Only the mobile design has the waves. */
.waves[b-30emep4pwy] {
    display: none;
}

@media (max-width: 767.98px) {
    /* The mobile frames have neither the large logo nor the band. */
    .mobile .watermark[b-30emep4pwy],
    .mobile .band[b-30emep4pwy] {
        display: none;
    }

    .mobile .scene.three-fields[b-30emep4pwy] {
        min-block-size: max(
            calc(var(--sign-in-page-height) + var(--sign-in-field-2-top) - var(--sign-in-field-1-top)),
            calc(100vh - var(--site-header-height)));
    }

    /* The waves lie on the lower edge and run from edge to edge of the screen, also where it is wider than the design. */
    .mobile .waves[b-30emep4pwy] {
        display: block;
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        inline-size: 100%;
        block-size: var(--sign-in-waves-height);
    }
}
/* /Tickets/TicketThread.razor.rz.scp.css */
.ticket-thread[b-76cq3pk9w5] {
    display: flex;
    flex-direction: column;
    gap: var(--ticket-thread-gap);
    min-block-size: 0;
    block-size: 100%;
}

/* The messages scroll in their own box; the element around the thread gives it its height. */
.messages[b-76cq3pk9w5] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ticket-thread-gap);
    min-block-size: 0;
    margin: 0;
    padding: var(--ticket-thread-list-padding);
    border-radius: var(--ticket-thread-composer-radius);
    background: var(--color-gray-97);
    list-style: none;
}

.empty[b-76cq3pk9w5] {
    padding-block: var(--ticket-thread-empty-padding);
    text-align: center;
    color: var(--color-gray-60);
}

.message[b-76cq3pk9w5] {
    display: flex;
}

/* The reader's own messages at the start (the right), the other side's at the end. */
.message.other[b-76cq3pk9w5] {
    justify-content: flex-end;
}

.bubble[b-76cq3pk9w5] {
    display: grid;
    gap: var(--ticket-thread-meta-gap);
    max-inline-size: var(--ticket-thread-bubble-max);
    padding-block: var(--ticket-thread-bubble-padding-block);
    padding-inline: var(--ticket-thread-bubble-padding-inline);
    border-radius: var(--ticket-thread-bubble-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-sm-4);
    color: var(--color-gray-20);
}

.own .bubble[b-76cq3pk9w5] {
    border-start-start-radius: 0;
    background: var(--gradient-theme-vertical);
    color: var(--color-white);
}

.other .bubble[b-76cq3pk9w5] {
    border-start-end-radius: 0;
}

.author[b-76cq3pk9w5] {
    color: var(--theme-from);
}

.own .author[b-76cq3pk9w5],
.own .time[b-76cq3pk9w5] {
    color: var(--color-white);
}

.text[b-76cq3pk9w5] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.time[b-76cq3pk9w5] {
    justify-self: end;
    color: var(--color-gray-60);
}

.files[b-76cq3pk9w5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ticket-thread-files-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.thumb[b-76cq3pk9w5] {
    display: block;
    overflow: hidden;
    inline-size: var(--ticket-thread-thumb);
    block-size: var(--ticket-thread-thumb);
    border-radius: var(--ticket-thread-file-radius);
    background: var(--color-gray-94);
    cursor: pointer;
}

.file[b-76cq3pk9w5] {
    display: flex;
    align-items: center;
    gap: var(--ticket-thread-files-gap);
    min-block-size: var(--ticket-thread-file-height);
    padding-inline: var(--ticket-thread-file-padding);
    border-radius: var(--ticket-thread-file-radius);
    background: var(--color-gray-95);
    color: var(--color-gray-20);
    cursor: pointer;
}

.file-icon[b-76cq3pk9w5] {
    --icon: url("/assets/icons/document-align-center-1.svg");
    flex: none;
    inline-size: var(--ticket-thread-file-icon);
    block-size: var(--ticket-thread-file-icon);
    color: var(--theme-from);
}

.file-name[b-76cq3pk9w5] {
    overflow-wrap: anywhere;
}

.file-size[b-76cq3pk9w5] {
    color: var(--color-gray-60);
}

/* The field to write in, with what is sent with it and its buttons. */
.composer[b-76cq3pk9w5] {
    display: grid;
    gap: var(--ticket-thread-composer-gap);
    padding: var(--ticket-thread-composer-padding);
    border: var(--ticket-thread-border) solid var(--color-gray-89);
    border-radius: var(--ticket-thread-composer-radius);
    background: var(--color-white);
}

.field[b-76cq3pk9w5] {
    min-block-size: var(--ticket-thread-field-min);
    padding: 0;
    border: 0;
    resize: vertical;
    outline: none;
    background: none;
}

.pending[b-76cq3pk9w5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ticket-thread-files-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pending-file[b-76cq3pk9w5] {
    display: flex;
    align-items: center;
    gap: var(--ticket-thread-files-gap);
    block-size: var(--ticket-thread-pending-height);
    padding-inline: var(--ticket-thread-pending-padding);
    border-radius: var(--ticket-thread-pending-height);
    background: var(--color-gray-95);
    color: var(--color-gray-20);
}

.pending-remove[b-76cq3pk9w5] {
    --icon: url("/assets/icons/close.svg");
    inline-size: var(--ticket-thread-file-icon);
    block-size: var(--ticket-thread-file-icon);
    color: var(--color-gray-60);
}

.actions[b-76cq3pk9w5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ticket-thread-composer-gap);
}

.attach[b-76cq3pk9w5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ticket-thread-meta-gap);
    color: var(--theme-from);
    cursor: pointer;
}

.attach.off[b-76cq3pk9w5] {
    opacity: var(--opacity-50);
    cursor: default;
}

/* The control of the browser (InputFile, a component of its own) lies over the label, there for the keyboard and the
   screen readers. */
.attach[b-76cq3pk9w5]  input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: inherit;
}

.attach-icon[b-76cq3pk9w5] {
    --icon: url("/assets/icons/attach.svg");
    inline-size: var(--ticket-thread-attach-icon);
    block-size: var(--ticket-thread-attach-icon);
}

.send[b-76cq3pk9w5] {
    min-block-size: var(--ticket-thread-button-height);
    padding-inline: var(--ticket-thread-button-padding);
    border-radius: var(--ticket-thread-button-radius);
    background: var(--gradient-theme-vertical);
    box-shadow: var(--shadow-md-primary-4);
    color: var(--color-white);
}

.send:disabled[b-76cq3pk9w5] {
    opacity: var(--opacity-50);
    box-shadow: none;
    cursor: default;
}

.problem[b-76cq3pk9w5] {
    color: var(--color-red);
}