/* /rosnicka - the turnout forecast calendar.
   Built on the same grid as css/calendar.css so the two pages read as one
   system; what differs is that every cell carries a value and a colour band,
   which the calendar's cells do not. Band colours arrive from the script as
   --band-color on the cell, so the scale lives in one place (BANDS in
   src/rosnicka.ts) rather than being repeated here. */

#rosnicka {
    width: 100%;
    min-width: 0;
}

/* --------------------------------------------------------- forecast setup */

/* One panel answering "what am I forecasting": the kind of mission, the side,
   the two faction groups, the map and the expansion - six dropdowns on two
   rows rather than six rows of pills, so the calendar under them is not pushed
   off the first screen. Identity colours arrive as --tag-color from
   MISSION_TAG_COLORS / MISSION_SIDE_COLORS / DLC_COLORS and from the faction
   ring's own hues in src/rosnicka.ts. */

.rosnicka-setup h2 {
    margin: 0 0 4px;
}

.rosnicka-setup__row {
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rosnicka-setup__row[hidden] {
    display: none;
}

/* Four columns on both rows, so the second row's two pickers keep the width of
   the first row's rather than stretching to half the panel each. */
.rosnicka-setup__row--pickers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 18px;
}

.rosnicka-setup__picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rosnicka-setup__picker[hidden] {
    display: none;
}

.rosnicka-setup__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.75;
}

/* The dropdown every setup choice is drawn with: a summary that names what is
   picked, its coefficient and the sample behind it, over a menu of the
   alternatives with the same numbers beside them. */
.rosnicka-search-picker {
    position: relative;
    width: 100%;
}

.rosnicka-search-picker__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 8px 34px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.92rem;
    font-weight: 700;
}

.rosnicka-search-picker__summary-text,
.rosnicka-search-picker__option-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* What is picked wears its own colour: the package, side and DLC hues this
   page already used, and for the factions and maps the hue their slice has in
   the share rings on /statistics/mise. */
.rosnicka-search-picker__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tag-color, #7d2128);
}

.rosnicka-search-picker--selected .rosnicka-search-picker__summary {
    border-color: var(--tag-color);
    background: color-mix(in srgb, var(--tag-color) 34%, rgba(0, 0, 0, 0.28));
}

.rosnicka-search-picker__summary::-webkit-details-marker {
    display: none;
}

.rosnicka-search-picker__summary::after {
    content: "▾";
    position: absolute;
    right: 12px;
}

.rosnicka-search-picker[open] .rosnicka-search-picker__summary::after {
    transform: rotate(180deg);
}

.rosnicka-search-picker__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    /* A column is narrower than a readable list of factions, so the menu is
       allowed to be wider than the summary it hangs off. */
    width: max(100%, 260px);
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: #202420;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.rosnicka-search-picker__search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: #111;
    color: #fff;
    font: inherit;
}

.rosnicka-search-picker__list {
    max-height: 280px;
    overflow-y: auto;
}

.rosnicka-search-picker__option {
    --tag-color: #7d2128;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.rosnicka-search-picker__option:hover {
    background: color-mix(in srgb, var(--tag-color) 45%, transparent);
}

.rosnicka-search-picker__option[aria-pressed="true"] {
    background: var(--tag-color);
}

.rosnicka-search-picker__face {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rosnicka-search-picker__option[hidden] {
    display: none;
}

.rosnicka-search-picker__option small {
    flex: 0 0 auto;
    opacity: 0.72;
}

/* The rightmost column's menu is wider than its column, so it hangs to the
   left of it instead of off the panel. */
.rosnicka-setup__picker:nth-child(4) .rosnicka-search-picker__menu {
    right: 0;
}

@media (max-width: 1100px) {
    .rosnicka-setup__picker:nth-child(even) .rosnicka-search-picker__menu {
        right: 0;
    }

    .rosnicka-setup__row--pickers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .rosnicka-setup__row--pickers {
        grid-template-columns: 1fr;
    }

    .rosnicka-search-picker__menu {
        width: 100%;
    }
}

/* ------------------------------------------------------------- month nav */

#rosnicka-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12pt;
    gap: 12px;
    min-width: 0;
}

#rosnicka-header button {
    background-color: #7d2128;
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    width: 100px;
    font-size: 1.2em;
}

#rosnicka-header button:active {
    background-color: #32402c;
}

.rosnicka-month-card {
    background-color: rgba(4, 5, 5, 0.55);
    border: 3px solid;
    border-radius: 12px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
    padding: 12px 28px;
    min-width: 220px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
}

#rosnicka-month-year {
    font-weight: bold;
    font-size: 16pt;
}

/* --------------------------------------------------------- summary tiles */

#rosnicka-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.rosnicka-tile {
    --tile-color: #7d2128;
    background-color: rgba(4, 5, 5, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-left: 6px solid var(--tile-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rosnicka-tile__label {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    opacity: 0.85;
}

.rosnicka-tile__value {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
}

.rosnicka-tile__note {
    font-size: 0.82em;
    line-height: 1.35;
    color: #ffffff;
    opacity: 0.8;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- legend */

#rosnicka-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 14px 0 4px;
}

.rosnicka-legend__item {
    --band-color: #7d2128;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-color: color-mix(in srgb, var(--band-color) 16%, rgba(4, 5, 5, 0.6));
}

.rosnicka-legend__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.rosnicka-legend__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.rosnicka-legend__text strong {
    color: #ffffff;
    font-size: 0.95em;
}

.rosnicka-legend__range {
    font-size: 0.78em;
    color: #ffffff;
    opacity: 0.8;
}

.rosnicka-legend-note {
    margin: 7px 2px 16px;
    color: #ffffff;
    font-size: 0.85em;
    line-height: 1.4;
    opacity: 0.82;
}

/* ------------------------------------------------------------------ grid */

.rosnicka-grid-scroll {
    max-width: 100%;
}

#rosnicka-weekdays,
#rosnicka-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    background-color: rgba(4, 5, 5, 0.55);
    border: 3px solid;
    border-radius: 12px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
}

#rosnicka-days {
    grid-auto-rows: minmax(130px, auto);
}

#rosnicka-weekdays > div {
    text-align: center;
    padding: 8px 6px;
    border: 0.5px solid #ddd;
    font-weight: 600;
    font-size: 1.05em;
    background-color: rgba(4, 5, 5, 0.55);
    color: #ffffff;
}

.rosnicka-day {
    --band-color: #7d2128;
    /* A cell is a button so the whole day is one keyboard target; the reset
       here is what keeps it looking like a calendar cell rather than a form
       control. */
    appearance: none;
    font: inherit;
    text-align: center;
    cursor: pointer;
    border: 0.5px solid #ddd;
    padding: 8px 6px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #ffffff;
    background-color: color-mix(in srgb, var(--band-color) 20%, rgba(4, 5, 5, 0.55));
    border-top: 4px solid var(--band-color);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.rosnicka-day:hover,
.rosnicka-day:focus-visible {
    background-color: color-mix(in srgb, var(--band-color) 34%, rgba(4, 5, 5, 0.55));
    transform: translateY(-2px);
}

.rosnicka-day--empty {
    background: none;
    border: none;
    cursor: default;
    min-height: 0;
}

.rosnicka-day--selected {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}

.rosnicka-day__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex-wrap: wrap;
}

.rosnicka-day__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 600;
}

/* Today has to be findable at a glance: the cell gets a warm ring and glow
   (not the white outline, which means "selected"), the number flips to a
   white disc so it stands out against the red-tinted cell, and a "today" chip
   names it outright. */
.rosnicka-day--today {
    box-shadow: inset 0 0 0 3px #f5b942, 0 0 14px rgba(245, 185, 66, 0.55);
}

.rosnicka-day--today .rosnicka-day__number {
    background-color: #ffffff;
    color: #7d2128;
    font-weight: 700;
}

.rosnicka-day__today-flag {
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: #f5b942;
    color: #1a1a1a;
}

.rosnicka-day__mission-flag {
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: #7d2128;
    color: #ffffff;
}

/* A training night. Same chip shape as a mission so the day still reads as
   having something on it, but outlined rather than filled in the brand red:
   a training draws a different crowd and counts toward nothing on this page. */
.rosnicka-day__training-flag {
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid rgba(241, 196, 15, 0.55);
    background-color: transparent;
    color: #f1c40f;
}

.rosnicka-day__icon {
    display: inline-flex;
    line-height: 0;
}

/* Forecast, its range and the unit as one block: the numbers stack, "hráčů"
   sits beside them and is centred against the pair rather than against either
   line, so the cell reads as "21 hráčů" with the range hanging under it. */
/* Three columns so the number stack stays centred under the icon and "hráčů"
   hangs off to its right without pushing it off centre. */
.rosnicka-day__figure {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
}

.rosnicka-day__stack {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.rosnicka-day__unit {
    grid-column: 3;
    justify-self: start;
    text-align: left;
    font-size: 9pt;
    font-weight: 700;
    line-height: 1.1;
    opacity: 0.9;
}

.rosnicka-day__value {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.1;
}

.rosnicka-day__range {
    font-size: 7.5pt;
    opacity: 0.85;
}

.rosnicka-day__actual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    width: 100%;
}

.rosnicka-day__actual-value {
    font-size: 7pt;
    opacity: 0.9;
}

/* The monthly-average fallback, for a day whose own missions were never
   counted. Dimmed and italic so it never reads as this day's head count. */
.rosnicka-day__actual-value.is-approximate {
    font-style: italic;
    opacity: 0.72;
}

.rosnicka-day__delta {
    font-size: 7pt;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    color: #ffffff;
}

.rosnicka-day__delta.is-close {
    background-color: #11806a;
}

.rosnicka-day__delta.is-over {
    background-color: #e2850b;
}

.rosnicka-day__delta.is-under {
    background-color: #3498db;
}

/* Past days keep the calendar page's hatching so the two read the same. Only
   the day number is allowed to go gray; the rest of the cell stays white. */
.rosnicka-day--past {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.07) 0,
        rgba(255, 255, 255, 0.07) 2px,
        transparent 2px,
        transparent 10px
    );
}

.rosnicka-day--past:not(.rosnicka-day--today) .rosnicka-day__number {
    color: #7a7a7a;
}

.rosnicka-day--mission {
    border-top-width: 8px;
}

/* A day the model has no basis for: neutral, and the value slot says so rather
   than showing a number worked out from stand-ins. */
.rosnicka-day--nodata {
    justify-content: flex-start;
}

.rosnicka-day--nodata .rosnicka-day__value {
    opacity: 0.6;
}

.rosnicka-day--nodata .rosnicka-day__range {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 7pt;
    opacity: 0.7;
}

.rosnicka-error {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: #ffffff;
}

/* ---------------------------------------------------------------- detail */

#rosnicka-detail {
    background-color: rgba(4, 5, 5, 0.55);
    border: 3px solid;
    border-radius: 12px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
    padding: 16px 18px;
    margin: 18px 0;
    color: #ffffff;
}

.rosnicka-detail__hint {
    margin: 0;
    opacity: 0.85;
}

.rosnicka-detail__title {
    margin: 0 0 12px;
    font-size: 1.3em;
}

.rosnicka-detail__subtitle {
    margin: 18px 0 8px;
    font-size: 1.05em;
}

.rosnicka-detail__headline {
    --band-color: #7d2128;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 6px solid var(--band-color);
    background-color: color-mix(in srgb, var(--band-color) 18%, rgba(4, 5, 5, 0.6));
    flex-wrap: wrap;
}

.rosnicka-detail__icon {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}

.rosnicka-detail__figures {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rosnicka-detail__value {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1;
}

.rosnicka-detail__band {
    font-size: 1.05em;
    font-weight: 600;
}

.rosnicka-detail__range,
.rosnicka-detail__backtest,
.rosnicka-detail__compare,
.rosnicka-detail__slots,
.rosnicka-detail__confidence {
    font-size: 0.9em;
    opacity: 0.88;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.rosnicka-detail__backtest,
.rosnicka-detail__compare,
.rosnicka-detail__slots,
.rosnicka-detail__confidence {
    margin: 10px 0 0;
}

/* The seats the evening had. Set apart from the notes around it because it is
   the one line on the panel that can overrule the forecast above it - behind us
   it explains a number that was cut, ahead of us it is the only line that asks
   the mission maker to do something. Left-aligned even on desktop: it is a
   short paragraph of prose, not a caption under a figure. */
.rosnicka-detail__slots {
    text-align: left;
    padding: 8px 12px;
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 6px 6px 0;
    opacity: 0.95;
}

.rosnicka-detail__events {
    margin: 0;
    padding-left: 20px;
    line-height: 1.6;
}

.rosnicka-detail__events a {
    color: #ffffff;
}

.rosnicka-detail__events li.is-training a {
    color: #f1c40f;
}

/* Sits before the title so the reason is read with the entry, not after it. */
.rosnicka-detail__events-note {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f1c40f;
    margin-right: 8px;
}

/* ------------------------------------------------------------- breakdown */

.rosnicka-breakdown,
.rosnicka-coef {
    width: 100%;
    border-collapse: collapse;
    color: #ffffff;
    font-size: 0.9em;
}

.rosnicka-breakdown th,
.rosnicka-breakdown td,
.rosnicka-coef th,
.rosnicka-coef td {
    padding: 7px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    vertical-align: top;
}

.rosnicka-breakdown__value,
.rosnicka-coef td {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rosnicka-breakdown__note {
    opacity: 0.8;
    font-size: 0.92em;
    white-space: normal;
}

.rosnicka-breakdown tr.is-total th,
.rosnicka-breakdown tr.is-total td {
    font-weight: 700;
    border-top: 2px solid rgba(255, 255, 255, 0.35);
    border-bottom: none;
}

/* ---------------------------------------------------- coefficient table */

.rosnicka-panel {
    background-color: rgba(4, 5, 5, 0.55);
    border: 3px solid;
    border-radius: 12px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
    padding: 16px 18px;
    margin: 18px 0;
    color: #ffffff;
}

.rosnicka-panel h2 {
    margin-top: 0;
}

.rosnicka-panel p {
    line-height: 1.55;
}

.rosnicka-table-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: #7d2128 rgba(4, 5, 5, 0.55);
}

.rosnicka-coef__barcell {
    width: 40%;
    min-width: 90px;
}

.rosnicka-coef__bar {
    display: block;
    height: 10px;
    border-radius: 999px;
    background-color: #e2850b;
}

.rosnicka-coef tr.is-current {
    background-color: rgba(125, 33, 40, 0.35);
}

.rosnicka-coef tr.is-current .rosnicka-coef__bar {
    background-color: #f1c40f;
}

.rosnicka-coef td.is-coefficient {
    font-weight: 700;
}

.rosnicka-coef__row {
    cursor: pointer;
}

.rosnicka-coef__row:hover,
.rosnicka-coef__row:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}

.rosnicka-coef__row.is-open {
    background-color: rgba(255, 255, 255, 0.1);
}

.rosnicka-coef__row.is-current.is-open {
    background-color: rgba(125, 33, 40, 0.5);
}

.rosnicka-coef__detail-cell {
    background-color: rgba(0, 0, 0, 0.25);
    padding: 10px 8px 14px !important;
}

.rosnicka-coef__detail-cell .rosnicka-breakdown {
    margin: 0;
}

.rosnicka-method-panel {
    padding: 0;
    overflow: hidden;
}

.rosnicka-method summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    padding: 20px 64px 20px 22px;
    text-align: left;
    transition: background-color 160ms ease;
}

.rosnicka-method summary::-webkit-details-marker {
    display: none;
}

.rosnicka-method summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: #f1c40f;
    font-size: 1.35rem;
    font-weight: 400;
    transform: translateY(-50%);
    transition: background-color 160ms ease, transform 160ms ease;
}

.rosnicka-method summary:hover,
.rosnicka-method summary:focus-visible {
    background-color: rgba(125, 33, 40, 0.22);
}

.rosnicka-method summary:focus-visible {
    outline: 2px solid #f1c40f;
    outline-offset: -4px;
}

.rosnicka-method[open] summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rosnicka-method[open] summary::after {
    content: "−";
    background-color: rgba(125, 33, 40, 0.45);
}

.rosnicka-method__body {
    padding: clamp(18px, 3vw, 30px);
}

.rosnicka-method__intro {
    max-width: 900px;
    margin: 0 auto 24px;
    text-align: center;
}

.rosnicka-method__intro p {
    margin: 0 auto 14px;
}

.rosnicka-method__formula {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 12px auto 18px;
    padding: 12px 18px;
    border: 1px solid rgba(241, 196, 15, 0.45);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(125, 33, 40, 0.38), rgba(226, 133, 11, 0.14));
    color: #ffffff;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    line-height: 1.45;
}

.rosnicka-method__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: method-card;
    text-align: left;
}

.rosnicka-method__grid li {
    position: relative;
    min-width: 0;
    padding: 18px 18px 18px 58px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.045);
    line-height: 1.55;
    counter-increment: method-card;
}

.rosnicka-method__grid li::before {
    content: counter(method-card, decimal-leading-zero);
    position: absolute;
    top: 17px;
    left: 16px;
    color: #e2850b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.rosnicka-method__grid strong {
    display: block;
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 1rem;
}

.rosnicka-method__grid span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93rem;
}

.rosnicka-method__limits {
    position: relative;
    margin-top: 18px;
    padding: 18px 20px 18px 24px;
    border: 1px solid rgba(226, 133, 11, 0.4);
    border-left: 4px solid #e2850b;
    border-radius: 8px;
    background-color: rgba(226, 133, 11, 0.08);
    text-align: left;
}

.rosnicka-method__limits > strong {
    display: block;
    margin-bottom: 8px;
    color: #f1c40f;
    font-size: 1.05rem;
}

.rosnicka-method__limits p {
    max-width: 105ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.93rem;
}

#rosnicka-generated {
    font-size: 0.85em;
    opacity: 0.8;
    margin: 6px 0 0;
}

/* ----------------------------------------------------------- responsive */

@media screen and (max-width: 760px) {
    .rosnicka-method__grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    /* Same narrow-screen container as the calendar page: this grid needs the
       width for the same reason that one does. Copied rather than shared so
       rosnicka.html does not have to load another page's stylesheet. */
    .container {
        width: calc(100% - 24px);
        padding: 12px;
    }

    .rosnicka-method summary {
        padding: 17px 56px 17px 16px;
    }

    .rosnicka-method summary::after {
        right: 14px;
    }

    .rosnicka-method__body {
        padding: 16px 12px;
    }

    .rosnicka-method__intro {
        margin-bottom: 18px;
    }

    .rosnicka-method__formula {
        box-sizing: border-box;
        width: 100%;
        padding: 11px 12px;
    }

    .rosnicka-method__grid li {
        padding: 16px 14px 16px 50px;
    }

    .rosnicka-method__grid li::before {
        top: 15px;
        left: 14px;
    }

    .rosnicka-method__limits {
        padding: 16px 14px 16px 18px;
    }

    #rosnicka-header {
        display: grid;
        grid-template-columns: minmax(44px, 72px) minmax(0, 1fr) minmax(44px, 72px);
        gap: 8px;
    }

    #rosnicka-header button {
        min-width: 0;
        padding: 12px 8px;
        width: 100%;
    }

    .rosnicka-month-card {
        min-width: 0;
        padding: 12px 8px;
    }

    #rosnicka-month-year {
        font-size: clamp(1rem, 5vw, 1.25rem);
        line-height: 1.2;
    }

    /* The month is made to fit the screen rather than scrolled to. A grid held
       at its desktop width and swiped sideways hid three columns - among them
       Saturday and Sunday, which is where the missions are - and gave no sign
       they were there. So the cells shrink instead: day number, band icon,
       forecast and range still fit, and everything they cannot hold is one tap
       away in the detail panel below. */
    #rosnicka-weekdays,
    #rosnicka-days {
        gap: 1px;
    }

    #rosnicka-days {
        grid-auto-rows: minmax(84px, auto);
    }

    #rosnicka-weekdays > div {
        padding: 6px 2px;
        font-size: 0.8em;
    }

    .rosnicka-day {
        padding: 5px 2px;
        min-height: 80px;
        gap: 1px;
        border-top-width: 3px;
    }

    .rosnicka-day--mission {
        border-top-width: 5px;
    }

    .rosnicka-day__head {
        gap: 3px;
    }

    .rosnicka-day__number {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
    }

    /* The icon is drawn at 34px by the script; at this width it is the one part
       of the cell that can lose size without losing meaning. */
    .rosnicka-day__icon svg {
        width: 20px;
        height: 20px;
    }

    .rosnicka-day__value {
        font-size: 1.05rem;
    }

    .rosnicka-day__range {
        font-size: 6.5pt;
    }

    .rosnicka-day__unit {
        font-size: 6.5pt;
    }

    .rosnicka-day__figure {
        gap: 3px;
    }

    .rosnicka-day__mission-flag,
    .rosnicka-day__training-flag {
        font-size: 5pt;
        padding: 1px 4px;
        letter-spacing: 0.02em;
    }

    .rosnicka-day__actual {
        gap: 3px;
        margin-top: 1px;
        padding-top: 2px;
    }

    .rosnicka-day__actual-value {
        font-size: 6.5pt;
    }

    /* "skutečně" / "měsíc ⌀" is what the detail panel spells out; the cell keeps
       the number and the chip that says how far off the forecast was. */
    .rosnicka-day__actual-word {
        display: none;
    }

    .rosnicka-day__delta {
        font-size: 6pt;
        padding: 1px 4px;
    }

    /* A paragraph of eight centred lines is hard work on a phone. The panels
       read left-aligned here; the desktop layout, where the lines are short
       enough for it not to matter, keeps the centring it was built with. */
    .rosnicka-panel p,
    .rosnicka-panel li,
    .rosnicka-detail__hint,
    .rosnicka-detail__range,
    .rosnicka-detail__backtest,
    .rosnicka-detail__compare,
    .rosnicka-detail__slots,
    .rosnicka-detail__confidence,
    .rosnicka-detail__events {
        text-align: left;
    }

    /* The headline keeps the icon beside the figures instead of letting the
       long range line push it onto a row of its own. */
    .rosnicka-detail__headline {
        flex-wrap: nowrap;
        gap: 12px;
        padding: 12px 14px;
        text-align: left;
    }

    /* The bar is a picture of the number next to it, and at this width the table
       squeezes it to a few pixels. The coefficient column carries it alone. */
    .rosnicka-coef__barcell,
    .rosnicka-coef thead th:last-child {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    #rosnicka-header {
        font-size: 14pt;
        margin-bottom: 15px;
        padding-top: 15px;
        gap: 24px;
    }

    #rosnicka-header button {
        width: 300px;
        padding: 24px;
        font-size: 11pt;
        height: 14pt;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rosnicka-month-card {
        padding: 18px 48px;
        min-width: 320px;
    }

    #rosnicka-month-year {
        font-size: 28pt;
    }

    #rosnicka-days,
    #rosnicka-weekdays {
        gap: 5px;
    }

    #rosnicka-days {
        grid-auto-rows: minmax(170px, auto);
    }

    #rosnicka-weekdays > div {
        padding: 12px 10px;
        font-size: 1.2em;
    }

    .rosnicka-day {
        padding: 12px 10px;
        min-height: 160px;
        gap: 4px;
    }

    .rosnicka-day__number {
        width: 36px;
        height: 36px;
    }

    .rosnicka-day__value {
        font-size: 2em;
    }

    .rosnicka-day__range {
        font-size: 10pt;
    }

    .rosnicka-day__unit {
        font-size: 11pt;
    }

    .rosnicka-day__actual-value,
    .rosnicka-day__delta {
        font-size: 9pt;
    }

    .rosnicka-day__mission-flag,
    .rosnicka-day__training-flag {
        font-size: 8pt;
    }
}

/* The measured-accuracy tiles reuse the month summary's card, so the page has
   one tile design rather than two. */
#rosnicka-accuracy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 14px 0;
}