/* OSK Auto 6-stka – style
   Paleta: ochra #CF802D, ember #CF482D, bursztyn #CF972D, słońce #CFAB2D, rdza #CF642D */

:root{
  --ochre:#CF802D; --ember:#CF482D; --rust:#CF642D;
  --sun:#CFAB2D; --free:#e8f0df; --taken:#ebe7e0;
  --ink:#1F1A16; --muted:#5c5650; --line:#ddd8d0; --soft:#f5f3ef;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; font:17px/1.6 var(--font); color:var(--ink); background:#fff; padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3{margin:0; line-height:1.15}
h1{font-size:clamp(32px,5vw,52px)}
h2{font-size:clamp(26px,3.5vw,34px)}
h3{font-size:22px}
p{margin:0}
a{color:inherit}
img{display:block; max-width:100%}
.wrap{width:min(1080px,100% - 40px); margin-inline:auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:3px solid var(--ember); outline-offset:2px}

/* przyciski */
.btn{display:inline-block; padding:12px 22px; border:2px solid var(--ochre); border-radius:4px; background:var(--ochre); color:var(--ink); font:600 17px/1.2 var(--font); text-decoration:none; cursor:pointer}
.btn:hover{background:var(--rust); border-color:var(--rust)}
.btn-line{background:transparent; border-color:var(--ink)}
.btn-line:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.btn-small{padding:8px 16px; font-size:16px}
.actions{display:flex; gap:12px; flex-wrap:wrap}

/* nagłówek i logo */
.nav{position:sticky; top:0; z-index:50; background:#fff; border-bottom:3px solid var(--ochre); padding-top:env(safe-area-inset-top,0px)}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; text-decoration:none}
.brand .logo-img{height:46px; width:auto}
.menu{display:flex; align-items:center; gap:22px}
.menu a:not(.btn){font-weight:600; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent}
.menu a:not(.btn):hover{border-bottom-color:var(--ochre)}
.menu-btn{display:none; padding:9px 16px; border:2px solid var(--ink); border-radius:4px; background:transparent; color:var(--ink); font:600 16px/1 var(--font); cursor:pointer}
.no-logo .logo-img{display:none}

/* początek strony */
.hero{padding:clamp(40px,7vw,80px) 0}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,5vw,64px); align-items:center}
.no-logo .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero p{margin:20px 0 28px; max-width:56ch; font-size:19px; color:var(--muted)}
.hero-logo{width:100%; max-height:340px; object-fit:contain; margin-inline:auto}

/* sekcje */
.sec{padding:clamp(44px,6vw,72px) 0}
.sec.alt{background:var(--soft)}
.lead{margin:8px 0 28px; max-width:60ch; color:var(--muted)}
.prose{max-width:720px}
.prose h2{margin-bottom:16px}
.prose p+p{margin-top:1em}

/* kursy */
.group+.group{margin-top:36px}
.group h3{padding-bottom:8px; border-bottom:2px solid var(--ink)}
.rows{list-style:none; margin:0; padding:0}
.rows li{display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line)}
.plate{display:grid; place-items:center; min-width:68px; height:42px; padding:0 8px; border-radius:4px; background:var(--p,var(--ochre)); color:var(--pt,var(--ink)); font:700 22px/1 var(--font)}
.rows b{display:block; font-size:19px}
.rows p{font-size:15px; color:var(--muted)}
.age{font-weight:600; white-space:nowrap; text-align:right}

/* tabele */
.table-wrap{overflow-x:auto; border:1px solid var(--line); background:#fff}
table{width:100%; border-collapse:collapse}
th,td{padding:14px 18px; text-align:left}
thead th{background:var(--ink); color:#fff; font-size:15px}
tbody tr+tr>*{border-top:1px solid var(--line)}
.schedule{min-width:460px}
.schedule tbody th,.schedule td{font-size:19px}
.prices{min-width:520px}
.prices .grp th{background:var(--soft); font-size:17px}
.prices tbody th{font-size:19px; white-space:nowrap}
.catcell{display:flex; align-items:center; gap:14px}
.catcell b{font-size:18px}
.prices td.old{white-space:nowrap}
.prices td.cost{font-size:20px; font-weight:700; white-space:nowrap}

/* zdjęcia */
.shot{position:relative; margin:0}
.shot .img{display:block; width:100%; padding:0; border:0; background:var(--soft); cursor:zoom-in; overflow:hidden; border-radius:4px}
.shot .img img{width:100%; height:100%; object-fit:cover}
.shot figcaption{padding-top:8px}
.shot figcaption b{display:block; font-size:18px}
.shot figcaption span{display:block; font-size:15px; color:var(--muted)}

.people{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:24px 18px}
.people .img,.people .ph{aspect-ratio:3/4}

.cars{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px}
.cars .shot:first-child,.cars .ph:first-child{grid-column:1 / -1}
.cars .img,.cars .ph{aspect-ratio:4/3}
.cars .shot:first-child .img,.cars .ph:first-child{aspect-ratio:16/8}

.gallery{column-width:210px; column-gap:18px}
.gallery .shot,.gallery .ph{break-inside:avoid; margin-bottom:20px; display:block}
.gallery .img,.gallery .img img{height:auto; object-fit:initial}
.gallery .ph:nth-child(1){aspect-ratio:3/4}
.gallery .ph:nth-child(2){aspect-ratio:1/1}
.gallery .ph:nth-child(3){aspect-ratio:4/5}
.gallery .ph:nth-child(4){aspect-ratio:4/3}

.ph{display:grid; place-items:center; padding:16px; border:2px dashed var(--line); border-radius:4px; color:var(--muted); text-align:center; font-size:15px; line-height:1.3}

.del{position:absolute; top:8px; right:8px; z-index:2; display:none; width:34px; height:34px; border:2px solid #fff; border-radius:50%; background:var(--ember); color:#fff; font:700 20px/1 var(--font); cursor:pointer}
body.admin .del{display:block}

/* kontakt */
.contact{padding:clamp(44px,6vw,72px) 0; background:var(--ochre); color:var(--ink)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,64px); align-items:start}
.contact p{margin:14px 0 24px; max-width:46ch}
.contact .btn{background:var(--ink); border-color:var(--ink); color:#fff}
.contact .btn:hover{background:#fff; border-color:#fff; color:var(--ink)}
.contact .btn-line{background:transparent; color:var(--ink)}
.contact .btn-line:hover{background:var(--ink); color:#fff}
.contact-list{margin:0; border-top:1px solid var(--ink)}
.contact-list>div{padding:14px 0; border-bottom:1px solid var(--ink)}
.contact-list>div:empty{display:none}
.contact-list dt{font-weight:700; font-size:20px}
.contact-list dd{margin:2px 0 0}
.contact-list a{font-weight:600}

.foot{padding:24px 0 36px; font-size:15px; color:var(--muted); border-top:1px solid var(--line)}
.foot-row{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.admin-link{padding:8px 14px; border:1px solid var(--muted); border-radius:4px; background:transparent; color:var(--muted); font:600 15px/1 var(--font); cursor:pointer}
.admin-link:hover{color:var(--ink); border-color:var(--ink)}

/* powiększenie zdjęcia i komunikat */
#lightbox{position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:24px; background:rgba(15,11,8,.94); cursor:zoom-out}
#lightbox.open{display:grid}
#lightbox figure{margin:0; max-width:min(1000px,100%); text-align:center}
#lightbox img{max-height:78vh; margin:0 auto; border-radius:4px}
#lightbox figcaption{margin-top:12px; color:#fff; font-size:18px}
#toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:400; max-width:90vw; padding:12px 20px; border-left:5px solid var(--ochre); border-radius:4px; background:var(--ink); color:#fff; font-weight:600; opacity:0; transform:translate(-50%,16px); pointer-events:none; transition:opacity .2s,transform .2s}
#toast.show{opacity:1; transform:translate(-50%,0)}

/* panel administratora */
.panel{position:fixed; left:0; right:0; bottom:0; z-index:300; max-height:80vh; overflow:auto; padding:20px 0 calc(22px + env(safe-area-inset-bottom,0px)); background:#fff; color:var(--ink); border-top:4px solid var(--ochre); box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.panel-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.tabs button{padding:9px 16px; border:2px solid var(--ink); border-radius:4px; background:transparent; color:var(--ink); font:600 16px/1 var(--font); cursor:pointer}
.tabs button.on{background:var(--ochre); border-color:var(--ochre)}
.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; align-items:end}
.form label{display:grid; gap:6px; font-size:15px; font-weight:600; color:var(--muted)}
.form input,.form select{width:100%; padding:11px 12px; border:2px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:16px var(--font)}
.hint{margin-top:12px; max-width:70ch; font-size:15px; color:var(--muted)}
.preview{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.preview img{width:64px; height:64px; object-fit:cover; border-radius:4px; border:1px solid var(--line)}
.locked{max-width:520px; margin:0 auto; text-align:center}
.locked p{margin:12px 0 18px; color:var(--muted)}

/* telefon i tablet */
@media (max-width:900px){
  .hero-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .hero-logo{max-height:220px}
}
@media (max-width:1100px){
  .menu-btn{display:block}
  .menu{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start; gap:14px; padding:18px 20px; background:#fff; border-bottom:3px solid var(--ochre)}
  .menu.open{display:flex}
}
@media (max-width:640px){
  .rows li{grid-template-columns:76px minmax(0,1fr)}
  .age{grid-column:2; text-align:left}
  .cars{grid-template-columns:1fr}
  .cars .shot:first-child .img,.cars .ph:first-child{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* rezerwacja jazd */
.rez-title{margin-bottom:20px}
.rez-tabs{display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap}
.rez-tabs button{padding:10px 18px; border:2px solid var(--ink); border-radius:4px; background:transparent; color:var(--ink); font:600 16px/1 var(--font); cursor:pointer}
.rez-tabs button[aria-selected="true"]{background:var(--ochre); border-color:var(--ochre)}
.rez-tabs button:disabled{opacity:.5; cursor:not-allowed}
.rez-note{padding:14px 16px; border-left:5px solid var(--ochre); background:var(--soft)}
.rez-step{margin-top:32px; padding-top:20px; border-top:1px solid var(--line)}
.rez-step h2{font-size:22px; margin-bottom:14px}
.rez-legend{margin:-6px 0 14px; color:var(--muted); font-size:15px}
.rez-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; max-width:760px}
.rez-fields label,.rez-check{display:grid; gap:6px; font-size:15px; font-weight:600; color:var(--muted)}
.rez-fields input,.rez-fields select{width:100%; padding:11px 12px; border:2px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:16px var(--font)}
.rez-hours{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.rez-hour{padding:12px 22px; border:2px solid var(--ink); border-radius:4px; background:transparent; color:var(--ink); font:600 17px/1 var(--font); cursor:pointer}
.rez-hour[aria-pressed="true"]{background:var(--ink); color:#fff}
.rez-days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.rez-day{display:grid; gap:2px; justify-items:center; padding:10px 4px; border:2px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:16px/1.2 var(--font); cursor:pointer}
.rez-day b{font-size:15px}
.rez-day span{font-size:18px; font-weight:700}
.rez-day em{font-size:13px; font-style:normal; font-weight:600}
.rez-day.free{border-color:var(--ochre)}
.rez-day.free em{color:#8a4f10}
.rez-day.busy,.rez-day.off{background:var(--soft); color:var(--muted); cursor:not-allowed}
.rez-day.busy em{color:var(--ember)}
.rez-day.on{background:var(--ochre); border-color:var(--ink)}
.rez-day.on em{color:var(--ink)}
.rez-slots{display:flex; gap:8px; flex-wrap:wrap}
.rez-slot{display:grid; justify-items:center; min-width:130px; padding:10px 14px; border:2px solid var(--ochre); border-radius:4px; background:#fff; color:var(--ink); font:600 17px/1.2 var(--font); cursor:pointer}
.rez-slot em{font-size:13px; font-style:normal; font-weight:500}
.rez-slot:disabled{border-color:var(--line); background:var(--soft); color:var(--muted); text-decoration:line-through; cursor:not-allowed}
.rez-slot:disabled em{text-decoration:none}
.rez-slot.on{background:var(--ochre); border-color:var(--ink)}
.rez-summary{margin-bottom:16px; font-weight:600}
.rez-check{grid-template-columns:auto 1fr; align-items:start; gap:10px; margin:16px 0 20px; max-width:760px; font-weight:500}
.rez-check input{margin-top:5px; width:18px; height:18px}
.rez-msg{margin-top:18px; min-height:1.6em; font-weight:600}
.rez-msg.good{color:#2d6a2d}
.rez-msg.bad{color:var(--ember)}
.rez-panelbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
#viewPanel h3{margin:24px 0 8px}
.rez-list{list-style:none; margin:0; padding:0}
.rez-list li{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid var(--line)}
.rez-list p{margin-top:2px; font-size:15px; color:var(--muted)}
.rez-tag{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:3px; background:var(--soft); font-size:14px; font-weight:600}
.rez-empty{color:var(--muted)}
@media (max-width:640px){
  .rez-days{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* ===== panel rezerwacji jazd (rezerwacje.html) ===== */
.res [hidden]{display:none !important}
.res .rez-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.res .who{display:flex; align-items:center; gap:14px; font-weight:600}
.res .box{padding:24px; border:1px solid var(--line); border-radius:4px; background:#fff}
.res .box+.box,.res .gap{margin-top:24px}
.res .box>p{margin:10px 0 20px; max-width:62ch; color:var(--muted)}
.res .box .form{margin-top:18px}
.res .field{display:grid; gap:6px; font-size:15px; font-weight:600; color:var(--muted)}
.res .field input,.res .field select{width:100%; padding:11px 12px; border:2px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:16px var(--font)}
.res .days{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-weight:600; color:var(--ink)}
.res .days label{display:flex; gap:6px; align-items:center}
.res .note{margin-top:14px; max-width:72ch; font-size:15px; color:var(--muted)}
.res .alert{margin-bottom:18px; padding:14px 16px; border-left:5px solid var(--ochre); background:var(--soft); font-weight:600}
.res .empty{padding:18px; border:2px dashed var(--line); border-radius:4px; color:var(--muted); text-align:center}
.res .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px}
.res .stat{padding:16px 18px; border:1px solid var(--line); border-radius:4px; background:#fff}
.res .stat b{display:block; font-size:34px; line-height:1.1}
.res .stat span{font-size:15px; font-weight:600; color:var(--muted)}
.res .rows li{grid-template-columns:auto minmax(0,1fr) auto}
.res .rows small{font-size:15px; color:var(--muted)}
.res .row-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.res .tabs{margin-bottom:20px}
.res .tag{display:inline-block; padding:2px 10px; border-radius:99px; background:var(--taken); font-size:14px; font-weight:600}
.res .tag.ok{background:var(--free)}
.res .tag.bad{background:var(--ember); color:#fff}
.res .cal-bar{display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin-bottom:18px}
.res .cal-bar .field{min-width:240px}
.res .cal-week{display:flex; align-items:center; gap:10px; margin-left:auto; font-size:19px; font-weight:700}
.res .cal-scroll{overflow-x:auto; border:1px solid var(--line); background:#fff}
.res .cal{min-width:760px; table-layout:fixed}
.res .cal th,.res .cal td{padding:0; border:1px solid var(--line); text-align:center; vertical-align:top}
.res .cal thead th{padding:12px 6px; background:var(--ink); color:#fff; font-size:15px}
.res .cal thead th small{display:block; font-weight:500; opacity:.8}
.res .cal tbody th{width:72px; padding:14px 8px; background:var(--soft); color:var(--muted); font-size:15px; vertical-align:middle}
.res .cal td{height:56px}
.res .slot{display:block; width:100%; min-height:36px; border:0; background:var(--free); color:var(--ink); font:600 14px/1.1 var(--font); cursor:pointer}
.res .slot+.slot{border-top:1px solid var(--line)}
.res .slot:hover:not(:disabled){background:var(--sun)}
.res .slot:disabled{cursor:default}
.res .slot.mine{background:var(--ember); color:#fff}
.res .cal .none{display:block; padding:17px 0; color:var(--line); font-weight:600; font-size:15px}
.res .legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:15px; font-weight:600; color:var(--muted)}
.res .legend i{display:inline-block; width:14px; height:14px; margin-right:6px; border-radius:3px; vertical-align:-2px}
.res .sched{display:grid; gap:10px; margin:16px 0}
.res .sched-row{display:grid; grid-template-columns:110px 90px 90px; gap:12px; align-items:center; font-weight:600}
.res .sched-row label{display:flex; gap:8px; align-items:center}
.res .sched-row select{padding:8px; border:2px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:16px var(--font)}
.res .inline-form{display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-top:14px}
.res .inline-form .field{min-width:200px}
@media (max-width:800px){
  .res .rows li{grid-template-columns:auto minmax(0,1fr)}
  .res .row-actions{grid-column:1 / -1; justify-content:flex-start}
  .res .cal-week{margin-left:0}
}

/* ===== strona publiczna: dodatki ===== */
a.admin-link{display:inline-block; text-decoration:none}
.pager{display:flex; justify-content:center; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap}
.pager span{color:var(--muted); font-size:15px}
.empty-note{padding:28px; border:2px dashed var(--line); border-radius:4px; color:var(--muted); text-align:center}
.nav a[aria-current="page"]:not(.btn){border-bottom-color:var(--ochre)}
.shot .img img{aspect-ratio:auto}
.people .img img,.cars .img img{height:100%}

/* zdjęcia instruktora w panelu rezerwacji */
.res .check{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-weight:600; color:var(--ink)}
.res .check input{margin-top:5px; width:18px; height:18px; flex:none}
.res .pgrid{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px}
.res .pgrid img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; border:1px solid var(--line); background:var(--soft)}
.res .pgrid form{display:grid; gap:6px; margin:8px 0}
.res .pgrid input{width:100%; padding:9px 10px; border:2px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:15px var(--font)}
.res .pgrid .btn{width:100%}

/* atrybut hidden ma wygrywać z display:grid/flex ustawianym przez klasy (np. .field) */
[hidden]{display:none !important}

/* „Pokaż hasło” pod polem hasła */
.showpw{display:flex; gap:8px; align-items:center; font-size:15px; font-weight:500; color:var(--muted); cursor:pointer; user-select:none}
.field .showpw input[type=checkbox],.res .field .showpw input[type=checkbox]{width:20px; height:20px; padding:0; margin:0; flex:none; border:0; accent-color:var(--ochre); cursor:pointer}

/* kalendarz instruktora: jazdy potwierdzone i czekające na potwierdzenie */
.res .cal td.ride-cell{padding:0; height:56px}
.res .ride{display:flex; flex-direction:column; gap:2px; width:100%; height:100%; min-height:54px; padding:6px 8px; border:0; background:transparent; color:inherit; text-align:left; font:600 14px/1.2 var(--font); cursor:pointer}
.res .ride span{font-weight:500; font-size:13px}
.res .ride em{font-style:normal; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.res .ride:hover{filter:brightness(1.08)}
.res .cal td.r-ok{background:#2d6a2d; color:#fff}
.res .cal td.r-wait{background:var(--sun); color:var(--ink); outline:2px dashed var(--ink); outline-offset:-5px}
.res .cal td.c-off{background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 6px,#ebe7e0 6px,#ebe7e0 12px)}
.res .cal td.r-past{background:#6b7b6b; color:#fff}
.res .legend .sw-past{background:#6b7b6b}
.res .icalbox{margin-top:14px}
.res .rows li.inst-li{display:block}
.res .inst-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center}
.res .inst-acts{margin-top:12px}
.res .inst-li .cal-scroll{width:100%}
.res .inst-li .cal-bar{justify-content:flex-start}
.res .legend .sw-ok{background:#2d6a2d}
.res .legend .sw-wait{background:var(--sun); outline:2px dashed var(--ink); outline-offset:-3px}
.res .legend .sw-off{background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 3px,#d9d3c9 3px,#d9d3c9 6px); border:1px solid var(--line)}
.res .legend .sw-free{background:var(--free)}
.res .legend .sw-mine{background:var(--ember)}
.res .tag.boss{background:var(--sun)}
.res details.more{margin-top:8px}
.res details.more form{margin-top:8px}

/* „Pokaż hasło”: pole wyboru wisi tuż pod polem hasła i nie zajmuje miejsca w układzie, więc nie nakłada się na etykietę,
   a wszystkie pola w wierszu (login, hasło itd.) zaczynają się na tej samej wysokości i mają tę samą wysokość */
.form,.res .inline-form{align-items:start}
.form>.btn,.form>button,.res .inline-form>.btn,.res .inline-form>button{align-self:end}
.form label,.res .field{line-height:22px}
.has-showpw{position:relative; margin-bottom:30px}   /* miejsce w układzie na „Pokaż hasło”, żeby nie nachodziło na następny tekst */
.form:has(.has-showpw)>.btn,.form:has(.has-showpw)>button,.res .inline-form:has(.has-showpw)>.btn,.res .inline-form:has(.has-showpw)>button{margin-bottom:30px}
.has-showpw>.showpw{position:absolute; top:calc(100% + 3px); left:0; height:18px; margin:0; font-size:14px; font-weight:500; line-height:18px; white-space:nowrap}
.has-showpw>.showpw input[type=checkbox]{width:16px; height:16px}

/* kalendarze z krokiem 30 minut */
.res .cal30 tbody th{padding:4px 8px; font-size:14px}
.res .cal30 td{height:38px}
.res .cal-i td{height:30px}
.res .cal-i td.ride-cell{height:auto}
.res .cal-i .ride{min-height:0; padding:4px 8px}
.res .cal thead th .dayoff{display:block; margin:6px auto 0; padding:4px 8px; border:1px solid rgba(255,255,255,.6); border-radius:4px; background:transparent; color:#fff; font:600 12px/1.2 var(--font); cursor:pointer}
.res .cal thead th .dayoff:hover{background:rgba(255,255,255,.18)}
.res .cal thead th .dayoff.on{background:var(--sun); border-color:var(--sun); color:var(--ink)}
.res .ride-panel{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:14px 16px; border:2px solid var(--ochre); border-radius:4px; background:var(--soft)}

/* kalendarze: niższe, z przewijaniem w pionie i stałym nagłówkiem dni */
.res .cal-scroll{max-height:min(60vh,460px); overflow:auto}
.res .cal thead th{position:sticky; top:0; z-index:2}
.res .cal tbody th{padding:6px 8px}
.res .cal30 td{height:34px}
.res .slot{min-height:30px}
.res .cal .none{padding:8px 0}
.res .slot-add{display:block; width:100%; height:100%; min-height:28px; border:0; background:transparent; color:var(--muted); font:600 18px/1 var(--font); cursor:pointer; opacity:.35}
.res .slot-add:hover{opacity:1; background:var(--free)}

.badge{display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:var(--ember); color:#fff; font-size:12px; line-height:20px; text-align:center}
body.chat-open{overflow:hidden}
.chat{position:fixed; inset:0; z-index:90; background:rgba(31,26,22,.55); display:flex; align-items:flex-end; justify-content:center}
.chat[hidden]{display:none}
.chat-box{background:#fff; width:min(560px,100%); max-height:92vh; display:flex; flex-direction:column; gap:10px; padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); border-radius:14px 14px 0 0}
.chat-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.chat-head small{display:block; color:var(--muted)}
.chat-place{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 12px; font-size:15px; background:var(--soft); border:1px solid var(--line); border-radius:10px}
.chat-log{flex:1; min-height:160px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:4px 2px}
.cm{max-width:85%; padding:8px 12px; font-size:15px; overflow-wrap:anywhere; background:var(--soft); border:1px solid var(--line); border-radius:12px}
.cm.me{align-self:flex-end; background:#fbeedd; border-color:#ecc99b}
.cm.other{align-self:flex-start}
.cm.sys{align-self:center; max-width:100%; text-align:center; font-style:italic; color:var(--muted); background:none; border:0}
.cm.place{border-style:dashed}
.cm small{display:block; font-size:12px; color:var(--muted)}
.cm em{display:block; margin-top:4px; font-size:13px; color:var(--muted)}
.cm .btn{margin-top:6px}
.chat-form{display:grid; gap:8px}
.chat-form input{width:100%; padding:10px 12px; font:inherit; border:1px solid var(--line); border-radius:10px}
.chat-send,.chat-chips{display:flex; flex-wrap:wrap; gap:8px}
.chat-chips:empty{display:none}
@media (min-width:700px){.chat{align-items:center}.chat-box{border-radius:14px}}

.res .ride small,.res .slot.mine small{display:block; font-size:12px; font-weight:500; line-height:1.25; overflow-wrap:anywhere}