/* ===== 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;
}

/* ===== 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);
}

.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}}