/* ===== Cat line =====
   One sentence spoken by the cat, with the drawn face where the 🐱 emoji used to be.
   Web port of src/main/mobile/src/ui/CatLine.tsx. Colour and font come from the caller,
   so the line sits inside a green banner or an amber warning without extra props. */

.cat-line {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
}

.cat-line--stacked {
    flex-direction: column;
    align-items: center;
}

.cat-line__mark {
    flex-shrink: 0;
    line-height: 0;
    /* Optically centred on the first line of body text. */
    margin-top: -1px;
}

.cat-line--stacked .cat-line__mark {
    margin-top: 0;
    margin-bottom: 0.6rem;
}

.cat-line__text {
    flex: 1 1;
    min-width: 0;
}

.cat-line--stacked .cat-line__text {
    flex: 0 1 auto;
    text-align: center;
}

/* A short line inside centred text (an empty state, a closing offer): the pair keeps the middle of
   the row, and a line that wraps reads from the face on. */
.cat-line--inline {
    display: inline-flex;
    max-width: 100%;
    text-align: left;
}

.cat-line--inline .cat-line__text {
    flex: 0 1 auto;
}

/* ===== „Pomoc” (HelpModal.tsx) =====
   The account menu's help window. The overlay and the card stay inline, per the modal recipe in
   .claude/skills/frontend-patterns.md; the controls live here so their hover and focus states stay in
   CSS. Tokens from DESIGN.md: neutral inputs, green for "go", amber for "look". */

.help-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.help-modal__lead {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    overflow-wrap: anywhere;
}

.help-modal__label {
    display: block;
    margin: 1.25rem 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}

.help-modal__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.25rem 0 0.5rem;
}

.help-modal__label-row .help-modal__label {
    margin: 0;
}

.help-modal__counter {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.help-modal__select,
.help-modal__textarea {
    display: block;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The native arrow differs per browser on a dark field, so the field draws its own chevron */
.help-modal__select {
    min-height: 44px;
    padding: 0.65rem 2.5rem 0.65rem 0.9rem;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-opacity=%270.55%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 6l5 5 5-5%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px 12px;
    cursor: pointer;
}

.help-modal__select option {
    background-color: #1a1f2e;
    color: #ffffff;
}

.help-modal__textarea {
    min-height: 140px;
    resize: vertical;
    padding: 0.65rem 0.9rem;
    line-height: 1.6;
}

.help-modal__select:focus,
.help-modal__textarea:focus {
    border-color: rgba(42, 209, 103, 0.4);
    box-shadow: 0 0 0 3px rgba(42, 209, 103, 0.1);
}

.help-modal__textarea[aria-invalid="true"] {
    border-color: rgba(245, 158, 12, 0.5);
}

.help-modal__field-error {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #f59e0c;
}

.help-modal__note {
    margin: 0.75rem 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.help-modal__error {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #f59e0c;
    overflow-wrap: anywhere;
}

.help-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.help-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-modal__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.help-modal__btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.help-modal__btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.help-modal__btn--primary {
    background: #2ad167;
    color: #0f0f1e;
}

.help-modal__btn--primary:hover:not(:disabled) {
    transform: scale(1.03);
    box-shadow: 0 0 22px rgba(42, 209, 103, 0.25);
}

.help-modal__btn:active:not(:disabled) {
    transform: scale(0.97);
}

.help-modal__btn:focus-visible {
    outline: 2px solid rgba(42, 209, 103, 0.6);
    outline-offset: 2px;
}

/* On a phone the two buttons share the row instead of huddling on the right */
@media (max-width: 480px) {
    .help-modal__actions > .help-modal__btn {
        flex: 1 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-modal__select,
    .help-modal__textarea,
    .help-modal__btn {
        transition: none;
    }

    .help-modal__btn--primary:hover:not(:disabled),
    .help-modal__btn:active:not(:disabled) {
        transform: none;
    }
}

/* ===== Logo + Wordmark ===== */

.header-logo-link {
    text-decoration: none;
    line-height: 0;
}

.header-logo-link:hover {
    text-decoration: none;
}

.header-wordmark {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
}

.header-wordmark--mobile {
    font-size: 1rem;
}

/* The CoNaJutro mark on the CoNaJutro pages (P21). The head is cut at the bottom of its box, so a
   centred box puts the name level with the ears; the lift puts it level with the glasses, as in the
   approved mock-up (34px desktop, 30px phone, 44px in the slide-out menu). */
.header-cnj-mark {
    position: relative;
    top: -7px;
}

.header-cnj-mark--mobile {
    top: -6px;
}

.header-cnj-mark--menu {
    top: -9px;
}

.header-menu-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* ===== „CoNaJutro | Kursy” (R27-przelacznik-b, owner 30.09.2026) =====
   A student account with a course: two fields in the logo slot (HeaderAreaSwitch.tsx), the one of the
   page's area lit, green for CoNaJutro, neutral like an active menu pill for the course. The unlit field's
   mark is grey and faded. Sizes from agent K's mock-up: fields 36px (desktop) and 34px (phone). */

.header-area-switch {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 1;
}

.header-area-switch__field {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 36px;
    padding: 0 0.8rem 0 0.6rem;
    border-radius: 10px;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.header-area-switch__field:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.header-area-switch__field:focus-visible {
    outline: 2px solid rgba(42, 209, 103, 0.5);
    outline-offset: 2px;
}

.header-area-switch__mark {
    display: block;
    flex-shrink: 0;
    filter: grayscale(1);
    opacity: 0.5;
}

/* The CoNaJutro head is cut at the bottom of its box: the lift sets it level with the name, as .header-cnj-mark */
.header-area-switch__mark--cnj {
    position: relative;
    top: -4px;
}

/* The lit field keeps its look under the pointer (these rules come after :hover with the same weight) */
.header-area-switch__field.header-area-switch__field--active {
    color: #fff;
    font-weight: 700;
}

.header-area-switch__field--active .header-area-switch__mark {
    filter: none;
    opacity: 1;
}

.header-area-switch__field--conajutro.header-area-switch__field--active {
    background: linear-gradient(135deg, rgba(42, 209, 103, 0.16), rgba(42, 209, 103, 0.05));
    border-color: rgba(42, 209, 103, 0.32);
}

.header-area-switch__field--kursy.header-area-switch__field--active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.header-area-switch--compact .header-area-switch__field {
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.7rem 0 0.5rem;
    font-size: 0.9rem;
}

.header-area-switch--compact .header-area-switch__mark--cnj {
    top: -3.5px;
}

/* With the names the phone bar needs about 342px (switch, bell, menu button, 20px sides): narrower, the marks
   alone, the lit field framed brighter, the names left for a screen reader */
@media (max-width: 349.98px) {
    .header-area-switch--compact .header-area-switch__field {
        gap: 0;
        padding: 0 0.55rem;
    }

    .header-area-switch--compact .header-area-switch__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .header-area-switch--compact .header-area-switch__field--conajutro.header-area-switch__field--active {
        border-color: rgba(42, 209, 103, 0.6);
    }

    .header-area-switch--compact .header-area-switch__field--kursy.header-area-switch__field--active {
        border-color: rgba(255, 255, 255, 0.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-area-switch__field {
        transition: none;
    }
}

/* ===== Nav Pills ===== */

.header-nav-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.header-nav-pill:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
}

.header-nav-pill--active {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.header-nav-pill--active:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Light theme overrides */
.header-nav-pill--light {
    color: rgba(0, 0, 0, 0.5);
}

.header-nav-pill--light:hover {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.04);
}

.header-nav-pill--light.header-nav-pill--active {
    color: rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.06);
}

.header-nav-pill--light.header-nav-pill--active:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ===== The desktop bar of a student's pages (Kokpit, owner 02.10.2026) =====
   From 1200px the bar runs the whole width of the window and takes the shell's edges (ConajutroShell.css), so
   the switch „CoNaJutro | Kursy” lines up with the rail's left edge and the avatar with the page's right edge.
   It does so on every page of a student's account, the courses and the settings too, so the switch stays where
   it was clicked. Narrower, it keeps the box of every other page. */
.header-desktop-bar--shell {
    max-width: 1160px;
    padding: 0 2rem;
}

@media (min-width: 1200px) {
    .header-desktop-bar--shell {
        max-width: none;
        padding: 0 20px 0 16px;
    }
}

/* ===== „Aplikacja CoNaJutro wkrótce w sklepach” (round 22) =====
   The card in the place of MobileAppCard while the app has no store link. Tokens from DESIGN.md: neutral
   app glass, the Title step, the cat's sentence in body copy, the primary app button (solid green, dark
   text, 44px touch target), a quiet text button for „Nie teraz”, the 36px green icon chip and the amber
   error of the dashboard cards. Hover lives here, never in JS. */

.app-waitlist {
    padding: 1.25rem;
    margin-bottom: 0.5rem;
}

.app-waitlist__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-waitlist__body {
    flex: 1 1;
    min-width: 0;
}

.app-waitlist__title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.app-waitlist__cat .cat-line__text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* The confirmation stands alone on the card: the sentence carries the weight of a title */
.app-waitlist--joined .app-waitlist__cat .cat-line__text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
}

.app-waitlist__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(42, 209, 103, 0.09);
    color: #2ad167;
}

/* ===== Error ===== */
.app-waitlist__error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: rgba(245, 158, 12, 0.08);
    border: 1px solid rgba(245, 158, 12, 0.2);
    color: #f59e0c;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ===== Buttons ===== */
.app-waitlist__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.app-waitlist__join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 10px;
    background: #2ad167;
    color: #0f0f1e;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-waitlist__join:not(:disabled):hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(42, 209, 103, 0.3);
}

.app-waitlist__join:not(:disabled):active {
    transform: scale(0.97);
}

.app-waitlist__join:focus-visible,
.app-waitlist__later:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 209, 103, 0.35);
}

.app-waitlist__join:disabled,
.app-waitlist__later:disabled {
    opacity: 0.6;
    cursor: default;
}

.app-waitlist__later {
    min-height: 44px;
    padding: 0.55rem 0.6rem;
    border: none;
    border-radius: 10px;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.app-waitlist__later:not(:disabled):hover {
    color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .app-waitlist__join,
    .app-waitlist__later {
        transition: none;
    }

    .app-waitlist__join:not(:disabled):hover,
    .app-waitlist__join:not(:disabled):active {
        transform: none;
    }
}

/* ===== „Kokpit”: CoNaJutro's shell on the web (owner, 02.10.2026) =====
   A student's CoNaJutro pages (conajutroNav.ts): from 1200px the rail with the product's places at the left
   edge of the window (ProductRail.tsx), below 1200px the tab bar at the bottom of the screen
   (ProductTabBar.tsx). The page keeps its own padding, width and background; the frame paints the pages'
   gradient behind the rail's column. Tokens from DESIGN.md: the dark gradient shell, hairlines at 0.08, white
   on the opacity ladder, the green glass for the place you are in, amber for what is due.

   .cnj-shell is also the class of ConajutroPageShell's frame (ConajutroPageShell.css, loaded with the pages of
   CoNaJutro's mails): the rules of this shell go through .cnj-shell-frame and reset what that file sets. */

.cnj-shell-frame {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
}

/* Below 1200px one column without side padding: the pages look as they did */
.cnj-shell-frame > .cnj-shell {
    display: block;
    max-width: 1280px;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    background: none;
    color: inherit;
}

.cnj-shell__content {
    min-width: 0;
}

.cnj-shell-frame .cnj-shell__rail {
    display: none;
}

@media (min-width: 1200px) {
    /* The rail stands 16px from the window's left edge at every width, where a student's other apps keep
       their menu, and the page takes the room that is left: each page at its own width, centred in it (owner,
       02.10.2026, after the comparison of four widths). The header's bar takes the same edges (Header.css,
       .header-desktop-bar--shell). */
    .cnj-shell-frame > .cnj-shell {
        display: grid;
        grid-template-columns: 216px minmax(0, 1fr);
        grid-column-gap: 18px;
        column-gap: 18px;
        max-width: none;
        padding: 0 20px 0 16px;
    }

    /* A page shorter than the rail's column ends where the frame does, so its own gradient runs the frame's
       whole height and no seam shows under it on a tall window */
    .cnj-shell-frame .cnj-shell__content {
        display: flex;
        flex-direction: column;
    }

    .cnj-shell-frame .cnj-shell__content > section:last-child {
        flex-grow: 1;
    }

    /* The rail: every place of the product, recessed below the glass of the page. As tall as the first screen
       under the header (its 56px bar and its line, 16px above and below the rail), never taller than the
       screen, and it stays in view while the page scrolls. */
    .cnj-shell-frame .cnj-shell__rail {
        position: sticky;
        top: 16px;
        display: flex;
        flex-direction: column;
        align-self: start;
        min-height: calc(100vh - 89px);
        max-height: calc(100vh - 32px);
        margin: 16px 0;
        padding: 10px;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        background: rgba(10, 10, 20, 0.35);
    }
}

/* ===== The rail's places ===== */

.cnj-rail__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cnj-rail__item {
    display: flex;
    align-items: center;
    gap: 11px;
    /* A finger's size as well: a tablet in landscape is 1200px wide and shows the rail */
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cnj-rail__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
}

.cnj-rail__item:focus-visible {
    outline: 2px solid rgba(42, 209, 103, 0.5);
    outline-offset: 2px;
}

/* The place you are in: the green glass of DESIGN.md's active state (it keeps its look under the pointer) */
.cnj-rail__item.cnj-rail__item--active {
    border-color: rgba(42, 209, 103, 0.2);
    background: linear-gradient(135deg, rgba(42, 209, 103, 0.08) 0%, rgba(42, 209, 103, 0.02) 100%);
    color: #fff;
    font-weight: 700;
}

.cnj-rail__icon {
    flex-shrink: 0;
    width: 22px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
}

.cnj-rail__item--active .cnj-rail__icon {
    color: #2ad167;
}

.cnj-rail__face {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 22px;
}

.cnj-rail__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cnj-rail__end {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    white-space: nowrap;
}

/* The class label („2B”) and „8 z 47”: short by nature, cut rather than let them push the name out */
.cnj-rail__soft {
    max-width: 72px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
}

.cnj-rail__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cnj-rail__count--attention {
    background: rgba(245, 158, 12, 0.12);
    color: #f59e0c;
}

.cnj-rail__count--go {
    background: rgba(42, 209, 103, 0.12);
    color: #2ad167;
}

.cnj-rail__sep {
    height: 1px;
    margin: 9px 10px;
    background: rgba(255, 255, 255, 0.08);
}

/* ===== The rail's foot: the app's notice and the way to the courses ===== */

.cnj-rail__foot {
    margin-top: auto;
    padding-top: 12px;
}

/* AppWaitlistCard (the dashboard's, unchanged) as a quiet notice: no card of its own, the cat beside the title,
   the two buttons as text links. Its sentence stays on the card „Dzisiaj” shows below 1200px. */
.cnj-rail__app .app-waitlist {
    position: relative;
    margin: 0;
    padding: 14px 8px 6px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cnj-rail__app .app-waitlist:hover {
    border-color: rgba(255, 255, 255, 0.08);
}

.cnj-rail__app .app-waitlist__row {
    display: block;
}

.cnj-rail__app .app-waitlist__icon {
    display: none;
}

.cnj-rail__app .app-waitlist__title {
    min-height: 26px;
    margin: 0;
    padding-left: 35px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    line-height: 1.35;
}

.cnj-rail__app .app-waitlist__row .app-waitlist__cat {
    position: absolute;
    top: 14px;
    left: 8px;
}

.cnj-rail__app .app-waitlist__row .app-waitlist__cat .cat-line__text {
    display: none;
}

.cnj-rail__app .app-waitlist__actions {
    flex-wrap: nowrap;
    gap: 14px;
    margin-top: 4px;
    padding-left: 35px;
}

.cnj-rail__app .app-waitlist__join,
.cnj-rail__app .app-waitlist__later {
    min-height: 32px;
    padding: 0;
    border-radius: 6px;
    background: none;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.cnj-rail__app .app-waitlist__join {
    color: #2ad167;
}

.cnj-rail__app .app-waitlist__later {
    color: rgba(255, 255, 255, 0.55);
}

.cnj-rail__app .app-waitlist__join:not(:disabled):hover,
.cnj-rail__app .app-waitlist__later:not(:disabled):hover {
    transform: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cnj-rail__app .app-waitlist__error {
    margin-top: 8px;
    padding: 0.5rem 0.6rem;
    font-size: 0.7rem;
    line-height: 1.45;
}

.cnj-rail__app .app-waitlist--joined .app-waitlist__cat .cat-line__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.45;
}

.cnj-rail__courses {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 10px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.15s ease;
}

.cnj-rail__courses:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.cnj-rail__courses:focus-visible {
    outline: 2px solid rgba(42, 209, 103, 0.5);
    outline-offset: 2px;
    border-radius: 10px;
}

.cnj-rail__courses .bi {
    flex-shrink: 0;
    width: 22px;
    margin-top: 1px;
    font-size: 0.9rem;
    text-align: center;
}

/* ===== The tab bar (below 1200px) =====
   Opaque, 64px plus the phone's bottom inset, above the page and under its overlays (they start at 1000). Its
   colour is the foot of the shell's gradient (DESIGN.md), the colour of the app's tab bar. */

.cnj-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f0f1e;
}

.cnj-tabbar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.cnj-tabbar__tab:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.cnj-tabbar__tab:focus-visible {
    outline: 2px solid rgba(42, 209, 103, 0.5);
    outline-offset: -4px;
    border-radius: 14px;
}

.cnj-tabbar__tab.cnj-tabbar__tab--active {
    color: #fff;
}

.cnj-tabbar__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 30px;
    border-radius: 100px;
    font-size: 1.25rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cnj-tabbar__tab--active .cnj-tabbar__icon {
    background: rgba(42, 209, 103, 0.12);
    color: #2ad167;
}

.cnj-tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cnj-tabbar__badge {
    position: absolute;
    top: -4px;
    left: 34px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #0f0f1e;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* The tint over the bar's own colour, so the badge stays opaque where it overlaps the icon */
.cnj-tabbar__badge--attention {
    background: linear-gradient(rgba(245, 158, 12, 0.22), rgba(245, 158, 12, 0.22)) #0f0f1e;
    color: #f59e0c;
}

.cnj-tabbar__badge--go {
    background: linear-gradient(rgba(42, 209, 103, 0.2), rgba(42, 209, 103, 0.2)) #0f0f1e;
    color: #2ad167;
}

/* The room the bar takes, as the last thing of the page (Root.tsx draws it after the footer, in its colour) */
.cnj-tabbar-spacer {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    background: #0a0a14;
}

/* „Kotepetytor” is the longest name: on the narrowest phones the bar gives up its side room and the names
   set a little tighter before any of them gets cut */
@media (max-width: 359.98px) {
    .cnj-tabbar {
        padding-right: 0;
        padding-left: 0;
    }

    .cnj-tabbar__label {
        letter-spacing: -0.02em;
    }
}

/* A 320px phone gives a tab 64px, a little less than „Kotepetytor” needs: there the names keep their size
   and set tighter still, instead of losing their last letters */
@media (max-width: 339.98px) {
    .cnj-tabbar__label {
        letter-spacing: -0.05em;
    }
}

@media (min-width: 1200px) {
    .cnj-tabbar,
    .cnj-tabbar-spacer {
        display: none;
    }
}

/* Intercom's support bubble sits bottom right: it covered the last tab on the owner's phone even when told to
   sit above the bar, and lay over the list of conversations with Kotepetytor, so below 1200px it stays off
   CoNaJutro's pages (owner, 04.10.2026) and off the settings, which carry the bar without the shell. The
   messenger's own setting (`hide_default_launcher`, ConajutroShell.tsx) is the documented way, and the
   launcher is hidden here as well for a phone where the setting is not applied. The messenger itself still
   opens from the profile's „Napisz do nas”. */
@media (max-width: 1199.98px) {
    body:has(.cnj-shell) .intercom-lightweight-app-launcher,
    body:has(.cnj-shell) .intercom-launcher-frame,
    body:has(.cnj-shell) .intercom-launcher,
    body:has(.cnj-tabbar) .intercom-lightweight-app-launcher,
    body:has(.cnj-tabbar) .intercom-launcher-frame,
    body:has(.cnj-tabbar) .intercom-launcher {
        display: none !important;
    }

    /* The page's toast stands at 88px from the bottom: 24px above the bar, and above the phone's own inset */
    body:has(.cnj-tabbar) .my-toast {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cnj-rail__item,
    .cnj-rail__courses,
    .cnj-tabbar__icon {
        transition: none;
    }
}

.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity .25s ease;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:9999;z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:#000;background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:contain;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:none;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:1;opacity:var(--yarl__pull_opacity,1);transform:translate(0,0);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + 0*1px + 0*1%));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{column-gap:calc(0*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*0*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1 1;overflow:hidden;padding:calc(0*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*0*1%);padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;object-fit:contain;touch-action:none;touch-action:var(--yarl__controller_touch_action,none);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:hsla(0,0%,100%,.8);color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:red;color:var(--yarl__slide_icon_error_color,red);height:48px;height:var(--yarl__slide_icon_error_size,48px);width:48px;width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:none 0s ease 0s;transition:initial}.yarl__slide_loading,.yarl__slide_loading line{animation:none 0s ease 0s 1 normal none running;animation:initial}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:8px;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:32px;height:var(--yarl__icon_size,32px);width:32px;width:var(--yarl__icon_size,32px)}.yarl__button{appearance:none;background-color:transparent;background-color:var(--yarl__button_background_color,transparent);border:0;border:var(--yarl__button_border,0);color:hsla(0,0%,100%,.8);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.8));filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:0;margin:var(--yarl__button_margin,0);outline:none;padding:8px;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:#fff;color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:hsla(0,0%,100%,.8);color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:#fff;color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:#fff;color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:hsla(0,0%,100%,.4);color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:24px 16px;padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:auto;left:initial;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:auto;right:initial;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}