/* Biuro: wstęp pod pełnym widokiem i kafle „z bliska” (Poczta, Kalendarz, Tablet, Przekazanie, Dysk).
   Kolory, promienie i pismo tylko ze zmiennych :root w styl.css; zieleń jedynym akcentem, bursztyn tylko przy brakach. */
#biuro .bi-wstep{margin-top:clamp(32px, 4vw, 56px)}
#biuro .bi-wstep p{max-width:62ch;font-size:clamp(17px, 1.3vw, 20px);line-height:1.5;color:var(--popiel)}
#biuro .bi-wstep b{color:var(--grafit);font-weight:600}

/* siatka kafli: 7/5, 5/7 i szeroki Dysk (ten sam układ co kafle na projekt-aktu.html) */
#biuro .bi-kafle.karty{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:24px;margin:clamp(24px, 3vw, 40px) auto 0}
#biuro .bi-kafle.karty + .bi-kafle.karty{margin-top:24px}
#biuro .bi-kafle > .kafel{grid-column:span 7;grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;padding:clamp(24px, 2.4vw, 36px)}
#biuro .bi-kafle > .kafel.k-waski{grid-column:span 5}
#biuro .bi-kafle > .kafel.k-szer{grid-column:1 / -1;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;padding:clamp(24px, 3vw, 48px)}
#biuro .bi-kafle .sz{background:var(--panel)}
#biuro .bi-kafle .sz svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Poczta */
.bi-pewne{display:flex;align-items:center;gap:10px;margin:14px 18px 4px;padding:10px 12px;border-radius:10px;background:var(--zielen-jasna);color:var(--zielen);font-size:15px;font-weight:500;
  transition:opacity .35s ease, max-height .45s cubic-bezier(.2,.7,.2,1), margin .45s, padding .45s;max-height:80px;overflow:hidden}
.bi-pewne > span:first-of-type{flex:1}
.bi-pewne .o-btn{font-size:14px;color:var(--grafit)}
.bi-pewne.bi-znika{opacity:0;max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}
.bi-mail{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 22px;border-top:1px solid var(--linia)}
.bi-pewne + .bi-mail, .sz-gora + .bi-mail{border-top:0}
.bi-od{font-weight:600;min-width:0}
.bi-czas{color:var(--popiel);font-size:15px;font-variant-numeric:tabular-nums}
.bi-tag{grid-column:1 / -1;min-height:1.6em}
.bi-tag .o-pill{font-size:13px;white-space:normal}

/* Tablet klienta: w sprawie obok z tabletu */
.bi-tb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:10px;padding:12px 22px;border-top:1px solid var(--linia);font-size:15px}
.bi-tb > span:first-child{color:var(--popiel)}
.bi-tb-gl{border-top:0;padding-top:12px;padding-bottom:6px;font-size:13px;color:var(--popiel);text-transform:uppercase;letter-spacing:.06em}
.bi-pusto{color:var(--popiel)}
.bi-rozne > span:nth-child(3){color:var(--zielen);font-weight:500}
.bi-wez{display:block;width:max-content;margin-top:6px;font-size:13px;font-weight:500;color:var(--zielen);border:1px solid var(--zielen);border-radius:99px;padding:2px 10px}

/* Przekazanie */
.bi-plik{display:flex;align-items:center;gap:10px;padding:12px 22px;border-top:1px solid var(--linia)}
.sz-gora + .bi-plik{border-top:0}
.bi-plik > span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.bi-kod{padding:14px 22px;border-top:1px solid var(--linia)}
.bi-kod .mono{font-weight:600;letter-spacing:.06em;margin-left:6px}
.bi-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 22px 16px;border-top:1px solid var(--linia)}
.bi-guziki{display:flex;flex-wrap:wrap;gap:8px}
.bi-guziki .o-btn{font-size:14px}
.bi-guziki .o-btn.g{background:var(--grafit);border-color:var(--grafit);color:var(--plotno)}
.bi-toast{display:flex;align-items:center;gap:10px;width:max-content;margin:0 22px 18px auto;padding:8px 14px;border-radius:10px;background:var(--grafit);color:var(--plotno);font-size:14px}

/* Dysk */
.bi-dysk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr)}
.bi-drzewo{padding:14px 10px;border-right:1px solid var(--linia);background:var(--plotno)}
.bi-dw{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:15px;line-height:1.3}
.bi-dw.wl{background:var(--kamien);box-shadow:inset 3px 0 0 var(--zielen);font-weight:500}
.bi-tabela{min-width:0;padding:6px 0}
.bi-dy{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,.7fr) minmax(0,.8fr) minmax(0,.9fr);gap:10px;padding:11px 18px;border-top:1px solid var(--linia);font-size:15px}
.bi-dy > span:first-child{overflow-wrap:anywhere}
.bi-dy > span:nth-child(n+3){text-align:right;white-space:nowrap;color:var(--popiel);font-variant-numeric:tabular-nums}
.bi-dy-gl{border-top:0;font-size:13px;color:var(--popiel);text-transform:uppercase;letter-spacing:.06em}

@media (max-width:900px){
  #biuro .bi-kafle.karty{grid-template-columns:minmax(0,1fr);gap:16px}
  #biuro .bi-kafle.karty + .bi-kafle.karty{margin-top:16px}
  #biuro .bi-kafle > .kafel, #biuro .bi-kafle > .kafel.k-waski, #biuro .bi-kafle > .kafel.k-szer{grid-column:1 / -1;grid-template-columns:minmax(0,1fr);padding:24px 16px 16px}
  .bi-dysk{grid-template-columns:minmax(0,1fr)}
  .bi-drzewo{border-right:0;border-bottom:1px solid var(--linia)}
  .bi-dy{grid-template-columns:minmax(0,1fr) auto;padding:10px 16px}
  .bi-dy > span:nth-child(2), .bi-dy > span:nth-child(3){display:none}
  .bi-tb{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px 16px}
  .bi-tb > span:first-child{grid-column:1 / -1}
  .bi-tb-gl > span:first-child{display:none}
}