:root {
  --bg: #f6f5f2; --surface: #fff; --fg: #17171a; --muted: #6b6b73; --line: #e7e5e0; --soft: #efeeea;
  --accent: #c2410c; --accent-fg: #fff; --ok: #15803d; --err: #b91c1c;
  --logo-edge: rgb(0 0 0 / .08); --radius: 14px; --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113; --surface: #1b1b1f; --fg: #ededf0; --muted: #9a9aa3; --line: #2a2a30; --soft: #232328;
    --accent: #fb923c; --accent-fg: #1b1b1f; --ok: #4ade80; --err: #f87171; --shadow: none; --logo-edge: rgb(255 255 255 / .18);
  }
}
/* one colour per theatre, used for its dot and the card's left edge */
.t-nowy { --c: #e11d48; } .t-studio { --c: #7c3aed; } .t-tr { --c: #0ea5e9; } .t-powszechny { --c: #f59e0b; }
.t-dramatyczny { --c: #10b981; } .t-komuna { --c: #ec4899; } .t-polski { --c: #6366f1; } .t-narodowy { --c: #84cc16; }

* { box-sizing: border-box; }
/* on touch screens a horizontal swipe changes the day/week (app.js), not the browser's history */
@media (pointer: coarse) { html { overscroll-behavior-x: none; } }
body { margin: 0; font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 52rem; margin: 0 auto; padding: 0 16px; }
body:has(.tydzien) .wrap { max-width: 92rem; } /* seven columns need the room */
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* layout: sidebar (wide screens, unless collapsed) | top bar over the results; on narrower screens the sidebar is a drawer */
body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main"; }
@media (min-width: 1024px) {
  html:not(.panel-zwiniety) body { grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: "panel bar" "panel main"; }
  html:not(.panel-zwiniety) .otworz-panel { display: none; }
  html.panel-zwiniety .panel { display: none; }
}
#szukaj { display: contents; } /* the form only groups the inputs; its sidebar and top bar are laid out by body */
main { grid-area: main; min-height: 100vh; width: 100%; } /* tall enough to scroll the hidden bar's space away */

/* sticky top bar */
.filtry { grid-area: bar; transition: transform .2s ease; position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 10px 0; }
.pasek { display: flex; align-items: center; gap: 12px; padding-right: 2.5rem; } /* room for the corner button */
/* the bar hides while scrolling down (app.js); the corner button hides/shows it any time */
.filtry.schowany { transform: translateY(-100%); }
.pasek-przelacz { position: fixed; top: 12px; right: 12px; z-index: 30; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); color: var(--muted); font-size: .8rem; }
.pasek-przelacz::before { content: "▲"; }
.pasek-przelacz[aria-expanded="false"]::before { content: "▼"; }
.otworz-panel { flex: none; width: 2.3rem; height: 2.3rem; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 1.1rem; }
h1 { font-size: 1.35rem; letter-spacing: -.02em; margin: 0; font-weight: 750; }
.szukaj-pole { flex: 1; min-width: 0; position: relative; max-width: 30rem; }
.szukaj { width: 100%; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }

/* week view: hits drop down under the search box */
.podpowiedzi { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 22rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow), 0 8px 24px rgb(0 0 0 / .12); padding: 4px; }
.podpowiedzi:not(:has(*)), .zamkniete .podpowiedzi { display: none; }
.podpowiedzi .trafienie { padding: .4rem .5rem; border-radius: 8px; }
.podpowiedzi .trafienie:hover, .podpowiedzi .trafienie.aktywny { background: var(--soft); }
.podpowiedzi .brak { margin: 0; padding: .5rem; color: var(--muted); }

/* logos: square images (background plate included), shown as rounded squares */
.logo { display: inline-block; flex: none; border-radius: 22%; object-fit: cover; box-sizing: border-box; outline: 1px solid var(--logo-edge); outline-offset: -1px; vertical-align: middle; }

/* sidebar: theatres, groups, sources status */
.panel { grid-area: panel; align-self: start; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.panel h2 { margin: 10px 4px 2px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.panel-gora { display: flex; align-items: center; justify-content: space-between; }
.panel-gora h2 { margin-top: 0; }
.zwin-panel { border: 0; background: none; color: var(--muted); font-size: 1.1rem; padding: .1rem .5rem; border-radius: 8px; }
.zwin-panel:hover { background: var(--soft); }
.teatry { display: grid; gap: 2px; }
.teatr { display: flex; align-items: center; gap: 10px; padding: .4rem .5rem; border-radius: 10px; cursor: pointer; font-size: .9rem; color: var(--muted); }
.teatr:hover { background: var(--soft); }
.teatr input { position: absolute; opacity: 0; pointer-events: none; }
.teatr:has(input:checked) { color: var(--fg); font-weight: 600; }
.teatr:has(input:not(:checked)) .logo { opacity: .35; filter: grayscale(1); }
.teatr:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.teatr::after { content: ""; margin-left: auto; width: 1rem; height: 1rem; flex: none; border-radius: 5px; border: 1.5px solid var(--line); }
.teatr:has(input:checked)::after { border-color: var(--fg); background: var(--fg); box-shadow: inset 0 0 0 2px var(--surface); }

.grupy { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.grupa { display: inline-flex; border-radius: 999px; background: var(--fg); color: var(--bg); overflow: hidden; font-size: .82rem; }
.grupa button { border: 0; background: none; color: inherit; padding: .25rem .4rem .25rem .75rem; font-weight: 600; }
.grupa button + button { padding: .25rem .6rem .25rem .3rem; opacity: .6; }
.grupa button + button:hover { opacity: 1; }
.grupy-akcje { display: grid; font-size: .85rem; }
.grupy-akcje button, .import { text-align: left; border: 0; background: none; padding: .4rem .5rem; border-radius: 8px; cursor: pointer; color: var(--muted); }
.grupy-akcje button:hover, .import:hover { background: var(--soft); color: var(--fg); }
.import { position: relative; }
.import input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* the label is the button */
.import:has(input:focus-visible) { outline: 2px solid var(--accent); }

.podsumowanie { margin-top: auto; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: .55rem .7rem; display: grid; gap: 2px; font-weight: 600; font-size: .85rem; }
.podsumowanie:hover { border-color: var(--muted); }
.podsumowanie small { color: var(--muted); font-weight: 500; }

/* narrower screens: the sidebar slides in over the page */
.zaslona { display: none; }
@media (max-width: 1023.98px) {
  .panel { position: fixed; inset: 0 auto 0 0; width: min(18rem, 85vw); height: 100dvh; z-index: 40; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgb(0 0 0 / .25); }
  html.panel-otwarty .panel { transform: none; }
  html.panel-otwarty .zaslona { display: block; position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .35); }
}

/* results */
#wyniki { padding: 8px 0 24px; transition: opacity .15s; }
.htmx-request#wyniki, form.htmx-request ~ main #wyniki { opacity: .5; }

.nawigacja { display: flex; align-items: center; gap: 8px; padding: 14px 0 12px; }
.nawigacja h2 { margin: 0 4px; font-size: 1.1rem; letter-spacing: -.01em; }
.nawigacja h2::first-letter { text-transform: uppercase; }
.nawigacja button { border: 0; background: var(--soft); border-radius: 999px; font-weight: 600; font-size: .9rem; padding: .4rem .9rem; }
.nawigacja button:hover:not(:disabled) { background: var(--line); }
.nawigacja button:disabled { opacity: .35; cursor: default; }
.nawigacja .strzalka { width: 2.2rem; height: 2.2rem; padding: 0; font-size: 1.3rem; line-height: 1; }
.nawigacja .dzis { margin-left: auto; }
.przelacznik { display: inline-flex; background: var(--soft); border-radius: 999px; padding: 3px; margin-right: 8px; }
.przelacznik button { padding: .3rem .8rem; }
.przelacznik button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); }

/* week: seven columns, each day's shows by time */
.tydzien { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.kolumna { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; min-height: 8rem; }
.kolumna h3 { margin: 0 0 4px; }
.kolumna h3 button { width: 100%; border: 0; background: none; text-align: left; padding: .3rem .4rem; border-radius: 8px; font-weight: 700; font-size: .9rem; }
.kolumna h3 button:hover { background: var(--soft); }
.kolumna.dzis { border-color: var(--accent); }
.kolumna.dzis h3 button { color: var(--accent); }
.kolumna.minione { opacity: .45; }
.kolumna .brak { margin: 0; padding: .3rem .4rem; color: var(--muted); }
.wpis { display: block; text-decoration: none; padding: .4rem; border-radius: 8px; border-left: 3px solid var(--c); margin-bottom: 4px; }
.wpis:hover { background: var(--soft); }
.wpis-gora { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wpis .tytul { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: .85rem; line-height: 1.3; }

/* search hits (dropdown in week view, list in day view) */
.trafienie { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.trafienie .kiedy { flex: none; min-width: 7.5rem; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.trafienie .tytul { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.trafienia h3 { margin: 4px 0 8px; font-size: .95rem; }
.trafienia h3 small { color: var(--muted); font-weight: 500; }
.trafienia .trafienie { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; margin-bottom: 6px; }
.trafienia .trafienie:hover { border-color: var(--muted); }

.karta { scroll-margin-top: 12px; display: grid; grid-template-columns: 4rem 1fr auto; gap: 4px 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 10px; }
.karta[data-cel] { outline: 2px solid var(--accent); outline-offset: 2px; }
.godz { font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tresc { min-width: 0; }
.gdzie { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.scena::before { content: "·"; margin-right: 6px; }
.karta h3 { margin: 2px 0 6px; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; }
.karta h3 a { text-decoration: none; }
.karta h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fakty { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .88rem; }
.fakty b, .obsada b, .obsada-brak b { color: var(--muted); font-weight: 500; margin-right: 2px; }
.obsada { margin-top: 4px; font-size: .88rem; }
.obsada summary { cursor: pointer; list-style: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obsada summary::-webkit-details-marker { display: none; }
.obsada[open] .podglad { display: none; }
.obsada[open] summary b::after { content: " ▴"; }
.obsada p { margin: 2px 0 0; }
.wiecej { font-size: .75rem; background: var(--soft); border-radius: 999px; padding: 0 .45rem; margin-left: 2px; }
.obsada-brak { margin: 4px 0 0; font-size: .88rem; }
.bilety { align-self: center; text-decoration: none; background: var(--accent); color: var(--accent-fg); padding: .45rem 1rem; border-radius: 999px; font-weight: 650; font-size: .88rem; white-space: nowrap; }
.bilety:hover { filter: brightness(1.08); }
.bilety.brak { background: none; color: var(--muted); padding: .45rem .4rem; }

.pusto { text-align: center; padding: 48px 16px; color: var(--muted); }
.pusto-tytul { font-size: 1.1rem; font-weight: 650; color: var(--fg); margin-bottom: 4px; }

/* sources and refresh: a dialog opened from the sidebar */
.okno { width: min(40rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); padding: 16px 20px; box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.okno::backdrop { background: rgb(0 0 0 / .4); }
.okno-gora { display: flex; align-items: center; justify-content: space-between; }
.okno-gora h2 { margin: 0; font-size: 1.1rem; }
.zamknij { border: 0; background: none; font-size: 1.5rem; line-height: 1; padding: .1rem .5rem; border-radius: 8px; color: var(--muted); }
.zamknij:hover { background: var(--soft); }
.okno .male { color: var(--muted); }
.glowny { border: 0; background: var(--fg); color: var(--bg); padding: .5rem 1rem; border-radius: 999px; font-weight: 600; }
.status { width: 100%; border-collapse: collapse; font-size: .88rem; }
.status td, .status th { text-align: left; padding: .45rem .5rem .45rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.status th { color: var(--muted); font-weight: 500; }
.status small { color: var(--muted); display: block; }
.ok { color: var(--ok); font-weight: 600; } .error { color: var(--err); font-weight: 600; } .skipped { color: var(--muted); }
.w-toku { display: none; color: var(--muted); }
.htmx-request .w-toku { display: inline; }
.htmx-request .wynik { display: none; }

@media (max-width: 600px) {
  .przelacznik { display: none; } /* phones only have the day view */
  .nawigacja { flex-wrap: wrap; }
  .nawigacja h2 { order: 5; width: 100%; margin: 6px 0 0; font-size: 1rem; }
  .szukaj-pole { max-width: none; }
  h1 { font-size: 1.1rem; }
  .karta { grid-template-columns: 3.4rem 1fr; padding: 12px 14px; }
  .godz { font-size: 1.15rem; }
  .bilety { grid-column: 2; justify-self: start; margin-top: 6px; }
  .bilety.brak { display: none; }
}