/* Tokeny: system projektowy Krzysztof Kołodziej (motyw ciemny) */
:root{
  --surface:#232323; --surface-muted:#313131; --surface-tab:#3b3b3b;
  --ink:#fff; --ink-body:#fff; --ink-muted:#bcbcbc;
  --accent:#8ab4e8; --on-accent:#232323;
  --action:#ebebeb; --on-action:#181818; --action-hover:#fff; --border:#3b3b3b;
  --ok:#8fd19e; --err:#f2a0a0;
  --font:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-card:16px; --r-pill:35px; --r-md:10px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--surface);color:var(--ink-body);font:400 16px/23px var(--font);min-height:100vh;display:flex;flex-direction:column;align-items:center}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{text-align:center;margin:84px 10px 8px}
.top>a{position:absolute;top:18px;left:22px;display:block;line-height:0;z-index:2}
.logo{height:30px;margin:0;filter:invert(1)}
.headline{font-weight:600;margin:0;line-height:1;font-size:2.2rem}
.headline .line1{display:block;font-size:4.2rem;line-height:.95;text-align:left;transform:translateX(-10%)}
.headline .line2{display:block;margin-top:12px;text-align:right;transform:translateX(10%)}
.wrap{width:100%;max-width:820px;padding:24px 10px 8px;flex:1}
.city-title{margin:6px 0 16px}
.foot{max-width:640px;padding:28px 16px 40px;color:var(--ink-muted);font-size:12px;line-height:18px;text-align:center}
.card{background:var(--surface-muted);border-radius:var(--r-card);padding:28px;margin:0 0 20px}
.card.center,.center{text-align:center}
.card.narrow{max-width:420px;margin-inline:auto}
h2{font-size:23px;line-height:32px;font-weight:700;margin:0 0 12px}
h3{font-size:18px;margin:0 0 8px}
.lead{font-weight:500}
.muted{color:var(--ink-muted)}
.big-line{font-size:23px;font-weight:600;margin:6px 0}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
.btn,button.btn{display:inline-block;background:var(--action);color:var(--on-action);border:2px solid var(--border);border-radius:var(--r-pill);padding:15px 31px;font:500 15px/1 var(--font);cursor:pointer;text-decoration:none;transition:background .5s,color .5s}
.btn:hover{background:var(--action-hover)}
.btn.soft{background:transparent;color:var(--ink);border-color:var(--surface-tab)}
.btn.soft:hover{background:var(--surface-tab)}
.btn.big{box-sizing:border-box;width:168px;padding:13px 0;font-size:16px;margin:6px;text-align:center;background:transparent;color:#fff;border-color:#fff}
.btn.small{padding:9px 16px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:default}
button.link{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.cities{display:flex;flex-wrap:wrap;justify-content:center;margin:18px 0}
.tabs{display:flex;gap:8px;justify-content:center;margin:0 0 18px;flex-wrap:wrap}
.tab{padding:9px 22px;border-radius:var(--r-pill);background:transparent;color:var(--ink);text-decoration:none;font-weight:500;border:2px solid var(--surface-tab)}
.tab.on{background:var(--surface-tab)}
/* wybór terminu */
@media(max-width:640px){.headline .line1{font-size:3.2rem;transform:translateX(-5%)}.headline .line2{transform:translateX(5%)}.card{padding:20px}}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600;font-size:18px}
.cal-head button{background:var(--surface-tab);color:var(--ink);border:0;width:38px;height:38px;border-radius:50%;font-size:18px;cursor:pointer}
.cal-head button.off{visibility:hidden}
.cal-head .todaybtn{width:auto;height:34px;border-radius:var(--r-pill);padding:0 16px;font:500 13px var(--font);background:transparent;border:2px solid var(--accent);color:var(--accent)}
.cal-head .todaybtn:hover{background:var(--accent);color:var(--on-accent)}
.cal-arrows{display:flex;gap:6px;min-width:82px;justify-content:flex-end}
.cal-title{text-align:center;flex:1}
.day.today{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);opacity:1;font-weight:700}
.day.today.av{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.grid .dow{font-size:12px;color:var(--ink-muted);text-align:center;padding:4px 0}
.day{aspect-ratio:1;border:0;border-radius:var(--r-md);background:transparent;color:var(--ink-muted);font:500 15px var(--font);opacity:.45;cursor:default}
.day.av{background:var(--surface-tab);color:var(--ink);opacity:1;cursor:pointer}
.day.av:hover{background:#4a4a4a}
.day.av.sel,.day.av.sel:hover{background:var(--accent);color:var(--on-accent)}
.day.empty{visibility:hidden}
.times h3{margin-top:0}
/* karta zwarta wokół samego kalendarza; po wyborze dnia płynnie się rozszerza i wysuwa godziny */
#app.card{max-width:496px;margin-inline:auto;transition:max-width .5s cubic-bezier(.2,.8,.2,1)}
#app.card.expanded{max-width:860px}
.picker{display:flex;justify-content:center;align-items:flex-start}
.picker>div:first-child{flex:0 0 min(440px,100%);max-width:100%}
.times{width:0;opacity:0;overflow:hidden;margin-left:0;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease .12s,margin .5s cubic-bezier(.2,.8,.2,1)}
.times>*{width:320px;max-width:100%}
.picker.has-sel .times{width:320px;opacity:1;margin-left:36px}
@media(max-width:640px){.picker{flex-direction:column;align-items:stretch}.picker>div:first-child{flex-basis:auto}.times{width:100%;max-height:0;transition:max-height .5s ease,opacity .35s ease .12s,margin .5s ease}.times>*{width:100%}.picker.has-sel .times{width:100%;max-height:420px;margin:18px 0 0}#app.card.expanded{max-width:496px}}
.timelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;max-height:340px;overflow:auto;padding:2px}
.time{background:transparent;border:2px solid var(--accent);color:var(--accent);border-radius:var(--r-pill);padding:10px 0;font:500 15px var(--font);cursor:pointer}
.time:hover,.time.sel{background:var(--accent);color:var(--on-accent)}
.note{font-size:13px;color:var(--ink-muted);margin-top:10px}
/* formularze */
form label,.formgrid label{display:block;font-weight:500;margin:0 0 14px}
input,select,textarea{width:100%;margin-top:6px;background:var(--surface);color:var(--ink);border:2px solid var(--surface-tab);border-radius:var(--r-md);padding:12px 14px;font:400 16px var(--font)}
input[type=checkbox]{width:auto;margin:0 8px 0 0}
label.check{display:flex;align-items:flex-start;font-weight:400;font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err-msg{color:var(--err);margin:8px 0}
.ok-msg{color:var(--ok)}
.summary{background:var(--surface);border-radius:var(--r-md);padding:14px 18px;margin:0 0 16px;font-weight:500}
.linkbox{background:var(--surface);border-radius:var(--r-md);padding:12px 14px;word-break:break-all;font-size:14px;margin:10px 0}
/* panel */
.adminwrap{width:100%;max-width:1100px;padding:28px 16px 60px}
.adminh{font-size:28px;margin:0 0 16px}
.adminnav{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 22px;align-items:center}
.adminnav a{color:var(--ink);text-decoration:none;font-weight:500;padding-bottom:3px}
.adminnav a.on{border-bottom:2px solid var(--accent)}
form.inline{display:inline-flex;gap:8px;align-items:center;margin:2px 6px 2px 0;flex-wrap:wrap}
form.inline input{width:auto;margin:0}
.tablewrap{overflow-x:auto;margin:0 0 20px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--ink-muted);font-weight:500}
.pill{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-tab);font-size:12px}
.pill.approved{background:#2d4a35;color:var(--ok)}.pill.pending{background:#4a4228;color:#f0d98a}.pill.rejected,.pill.cancelled,.pill.expired{background:#4a2d2d;color:var(--err)}
.flash{padding:12px 16px;border-radius:var(--r-md);margin:0 0 16px;background:#2d4a35;color:var(--ok)}.flash.err{background:#4a2d2d;color:var(--err)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 18px;align-items:end}
.formgrid h3,.formgrid .wide,.formgrid>.btn,.formgrid>button{grid-column:1/-1}
.formgrid button.btn{justify-self:start}
textarea.mono{min-height:120px}
body.admin .wrap{max-width:1100px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.card.wideform{max-width:560px}
.card.wideform h2{margin-top:18px}.card.wideform h2:first-child{margin-top:0}

.citylink{margin:0 0 4px;text-align:center;font-size:13px}
.citylink a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid transparent}
.citylink a:hover{color:var(--ink);border-bottom-color:var(--ink-muted)}
.btn.big{transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.btn.big:hover,.btn.big:focus-visible{background:#fff;color:var(--on-action);border-color:#fff;transform:translateY(-2px)}
.btn.big:active{transform:translateY(0)}

/* ===== układ: węższy telefon → tablet → szeroki ekran ===== */
body.split{position:relative}
.corner{position:absolute;top:18px;right:22px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;z-index:2}
.corner-city{font-weight:600;font-size:15px}
.corner a{color:var(--ink-muted);font-size:13px;text-decoration:none;border-bottom:1px solid transparent}
.corner a:hover{color:var(--ink);border-bottom-color:var(--ink-muted)}
@media(min-width:641px) and (max-width:1099px){
  .wrap{max-width:940px}
  #app.card{max-width:620px}
  #app.card.expanded{max-width:940px}
}
@media(min-width:1100px){
  body.split{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:72px;align-items:center;justify-content:center;width:100%;max-width:1440px;margin:0 auto;padding:0 56px;min-height:100vh}
  body.split .top{text-align:center;margin:0;padding:40px 0}
  body.split .top>a{top:28px;left:56px}
  body.split .logo{height:34px}
  body.split .headline{font-size:2.6rem;line-height:1.05;text-align:center}
  body.split .headline .line1{font-size:5.4rem;text-align:center;transform:none;line-height:1}
  body.split .headline .line2{text-align:center;transform:none;margin-top:6px;padding-left:0}
  body.split .wrap{max-width:none;width:100%;padding:56px 0;flex:none}
  .corner{top:28px;right:56px}
  #app.card{width:100%;max-width:690px;margin-inline:0;padding:40px 44px}
  #app.card.expanded{max-width:100%}
  .picker>div:first-child{flex:1 1 440px;max-width:600px}
  .picker.has-sel>div:first-child{max-width:480px}
  .picker.has-sel .times{width:300px}
  .times>*{width:300px}
  .day{font-size:17px}
  .cal-head{font-size:20px}
}

.day{position:relative}
.day.today:hover::after,.day.today:focus-visible::after{content:'Dzisiaj';position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);font:500 12px/1 var(--font);padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;z-index:3}

/* reCAPTCHA v3: pływający znaczek ukryty; wymagana informacja jest w formularzu */
.grecaptcha-badge{visibility:hidden!important}
.recaptcha-note{margin:6px 0 0;text-align:center}
.recaptcha-note a{color:var(--ink-muted)}