/* Aplikacja Neuron AIContentWorks — jasny motyw brandowy (spójny z landingiem). */

@font-face { font-family:'Sora'; font-weight:600; font-display:swap; src:url('/static/fonts/sora-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sora'; font-weight:600; font-display:swap; src:url('/static/fonts/sora-600-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
@font-face { font-family:'Sora'; font-weight:700; font-display:swap; src:url('/static/fonts/sora-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sora'; font-weight:700; font-display:swap; src:url('/static/fonts/sora-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
@font-face { font-family:'DM Sans'; font-weight:400; font-display:swap; src:url('/static/fonts/dmsans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'DM Sans'; font-weight:400; font-display:swap; src:url('/static/fonts/dmsans-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
@font-face { font-family:'DM Sans'; font-weight:500; font-display:swap; src:url('/static/fonts/dmsans-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'DM Sans'; font-weight:500; font-display:swap; src:url('/static/fonts/dmsans-500-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }

:root {
  --indigo-900:#211d42; --indigo-700:#37326f; --indigo-100:#e9e8f1; --indigo-50:#f4f3f8;
  --orange-500:#f49500; --orange-600:#d98400; --orange-100:#fff2dd;
  --success:#2e8b57;
  --ink-900:#1c1a33; --ink-700:#3a3852; --ink-500:#6f6d84; --ink-300:#cbcad6;
  --ink-100:#f1f0f5; --ink-50:#f8f8fb;
  --linkedin:#0a66c2; --facebook:#1877f2; --instagram:#d6266b; --x:#1a1a1a; --blog:#37326f;
  --line:#e6e5ee; --bg:#f6f6fb;
  /* Oznaczenia kolorem nadawane przez klienta. Cztery barwy przygaszone,
     dobrane do indygo i pomarańczu marki — mają porządkować kalendarz,
     a nie krzyczeć. Każda ma trzy poziomy: tło karty, obrys, kropka w wyborze. */
  --tag-amber-bg:#fbeed5; --tag-amber-line:#dfbc80; --tag-amber-dot:#d8a13f;
  --tag-sage-bg:#e4eee6;  --tag-sage-line:#a9c4ae;  --tag-sage-dot:#6f9c79;
  --tag-azure-bg:#e3eaf6; --tag-azure-line:#a8bcdd; --tag-azure-dot:#5d78b0;
  --tag-plum-bg:#ece4f2;  --tag-plum-line:#c3aed3;  --tag-plum-dot:#8d70a8;
  --shadow-sm:0 1px 3px rgba(28,26,51,.06), 0 6px 20px -12px rgba(28,26,51,.12);
  --font-display:'Sora', ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body:'DM Sans', ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;


  /* ── System wizualny Neuron (ujednolicenie 2026-08-19) ─────────────
     Paleta była już wyprowadzona z tej samej marki, więc poniżej wchodzi
     WYŁĄCZNIE to, czego brakowało: bordo (odmowy, „czego unikać", błędy),
     błękit (linki, ogniskowanie), brakujące stopnie indygo oraz wspólne
     promienie, odstępy i cienie. Nazwy dotychczasowych zmiennych zostają
     nietknięte — inaczej trzeba by przepisać każdą regułę w pliku. */
  --indigo-950:#16142b; --indigo-800:#2b2658; --indigo-600:#48427f;
  --indigo-500:#5d5794; --indigo-400:#837eae; --indigo-300:#aba7c9;
  --indigo-200:#d1cfe1;
  --maroon-700:#641f31; --maroon-500:#852b42; --maroon-300:#c8768a;
  --maroon-200:#e6bcc7; --maroon-100:#f6e6ea;
  --blue-600:#2b71ab; --blue-500:#307fc0; --blue-200:#b2cfee;
  --blue-100:#dcebf9; --blue-50:#f0f7fd;
  --success-700:#1f6e45; --success-bg:#e6f4ec;
  --orange-400:#ffab2e; --orange-200:#ffe0ad;
  --ink-800:#26243d; --ink-600:#54526a; --ink-400:#adabbd; --ink-200:#e3e2ea;

  /* Role semantyczne — używamy ich w nowych regułach zamiast surowych barw */
  --text-link:var(--blue-600);
  --danger:var(--maroon-500); --danger-bg:var(--maroon-100);
  --warning:var(--orange-500); --warning-bg:var(--orange-100);

  /* Promienie i odstępy (skala 4 px) */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --radius-xl:22px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px;

  /* Cienie: przygaszone indygiem, nigdy neutralna szarość */
  --shadow-xs:0 1px 2px rgba(28,26,51,.06);
  --shadow-md:0 8px 24px -14px rgba(28,26,51,.28);
  --shadow-lg:0 1px 3px rgba(28,26,51,.06), 0 24px 56px -28px rgba(28,26,51,.34);
  --focus-ring:0 0 0 3px rgba(48,127,192,.45);

  /* Kropkowana faktura na indygo — znak rozpoznawczy marki: pas nagłówka
     na komputerze, okładka ekranów logowania na telefonie. */
  --dot-texture:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  --dot-size:16px 16px;

  --tracking-caps:.08em;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink-900);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1,h2,h3 { font-family:var(--font-display); color:var(--ink-900); letter-spacing:-.01em; }

/* Auth / karty */
.center { min-height:100vh; display:grid; place-items:center; padding:24px; }
.card { width:100%; max-width:400px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow-sm); }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-size:17px; font-weight:700; letter-spacing:.01em; color:var(--indigo-700); min-width:0; }
.brand-mark { height:26px; width:auto; display:block; flex:none; }
.brand-tag { font-family:var(--font-body); font-size:10px; font-weight:600; color:var(--ink-500);
  background:var(--ink-100); padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.06em; }
h1 { font-size:22px; font-weight:700; margin:6px 0 8px; }
.muted { color:var(--ink-500); font-size:14px; line-height:1.55; }
.err { color:#b4243f; font-size:14px; margin:8px 0; }

form { margin-top:16px; display:grid; gap:10px; }
input[type="email"], input[type="text"], input[type="url"], textarea {
  width:100%; padding:13px 14px; font-size:16px; font-family:inherit;
  background:#fff; color:var(--ink-900); border:1px solid var(--line); border-radius:11px;
}
input:focus, textarea:focus { outline:none; border-color:var(--ink-700); box-shadow:0 0 0 3px rgba(58,56,82,.1); }
textarea { resize:vertical; }
.filelabel { font-size:14px; color:var(--ink-500); display:grid; gap:8px; }
.fld { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--ink-500); }
.fld > select, .fld > input, .fld > textarea { font-weight:400; color:var(--ink-900); }
select, input[type="date"] {
  width:100%; padding:12px 14px; font-size:16px; font-family:inherit;
  background:#fff; color:var(--ink-900); border:1px solid var(--line); border-radius:11px;
}
select:focus, input[type="date"]:focus { outline:none; border-color:var(--indigo-700); box-shadow:0 0 0 3px rgba(55,50,111,.1); }
input[type="file"] { font-size:14px; color:var(--ink-700); }
.client-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:8px 0 4px; }
.client-actions form { margin:0; }
.team-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.team-row form { margin:0; }

/* Wiersz użytkownika klienta: rozwijany (details) edytor + akcje */
.user-item { border-bottom:1px solid var(--line); padding:11px 0; font-size:15px; }
.user-item > summary { cursor:pointer; padding:2px 0; }
.user-body { display:grid; gap:16px; max-width:440px; margin:14px 0 6px; }
.row-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.row-actions form { margin:0; }
summary.link { font-size:14px; font-weight:600; color:var(--ink-500); }
.confirm-del > summary { list-style:none; display:inline-block; }
.confirm-del > summary::-webkit-details-marker { display:none; }
.confirm-del > summary::marker { content:""; }
.confirm-del form { margin-top:8px; }
.danger, button.link.danger, summary.link.danger { color:#b4243f; }
.confirm-del[open] > summary.danger { color:#8f1a30; }

button {
  min-height:46px; padding:12px 20px; font-size:15px; font-weight:600; font-family:var(--font-display);
  background:var(--indigo-700); color:#fff; border:0; border-radius:11px; cursor:pointer; transition:filter .15s, transform .1s;
}
button:hover { filter:brightness(1.08); }
button:active { transform:translateY(1px); }
button:disabled { opacity:.5; cursor:default; }
button.link { background:none; color:var(--ink-500); min-height:auto; padding:6px 8px; font-weight:600; }
button.link:hover { color:var(--ink-900); filter:none; }
a.link { color:var(--ink-700); font-weight:600; font-size:14px; }

/* Topbar / layout */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; row-gap:8px; column-gap:10px;
  padding:12px 16px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar-actions { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.topbar form { margin:0; }
.wrap { max-width:760px; margin:0 auto; padding:22px 18px 60px; }
.empty { margin-top:44px; text-align:center; }
.submit-cta { margin-top:28px; text-align:center; color:var(--ink-500); font-size:14px; }
.submit-cta a { color:var(--ink-700); font-weight:600; }

/* Feed */
.feed { max-width:640px; margin:0 auto; padding:18px 16px 72px; }
.daynav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.daynav-arrow { height:56px; width:56px; flex:none; display:grid; place-items:center; border-radius:14px; background:#fff;
  border:1px solid var(--line); color:var(--ink-700); font-size:28px; text-decoration:none; box-shadow:var(--shadow-sm); }
.daynav-arrow.disabled { opacity:.35; pointer-events:none; }
.daynav-mid { text-align:center; position:relative; }
.daynav-label { display:block; font-family:var(--font-display); font-weight:700; font-size:16px; }
.daynav-picker { margin-top:4px; border:0; background:none; color:var(--ink-500); font-size:13px; font-family:inherit; padding:0; }
/* Lista postów dnia z boku (wariant A) — tylko na szerokim ekranie (patrz
   blok @media (min-width:768px) niżej). Na telefonie ukryta, a posty
   stackują się w jednej kolumnie jak dotąd. */
.day-list { display:none; }

.post { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.post.is-published { opacity:.7; }
/* padding-right robi miejsce strzałce oznaczania, przypiętej do rogu karty */
.post-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-bottom:12px; padding-right:30px; }
/* Skandynawski sznyt: kanał = cichy szary pill, status i prowieniencja =
   zwykły tekst; kolor tylko tam, gdzie coś znaczy (publikacja, recenzja). */
.badge { font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink-700); padding:4px 10px; border-radius:999px; background:var(--ink-100); }
.post-time { font-size:13px; color:var(--ink-500); font-weight:500; }
.status-pill { margin-left:auto; font-size:13px; font-weight:600; padding:0; border-radius:0; background:none; color:var(--ink-500); }
.status-pill.pub { color:var(--success); }
.status-pill.appr { color:var(--ink-700); }
.ok-flash { color:var(--success); font-weight:600; font-size:15px; margin:10px 0; }
/* Potwierdzenie w karcie (a nie na górze listy) — po zapisie klient zostaje
   przy swoim poście, więc komunikat musi być tam, gdzie on patrzy.
   scroll-margin-top: karta przewinięta z kotwicy nie chowa się pod topbarem. */
.card-flash { margin:0 0 12px; font-size:14px; }
.post, .sig { scroll-margin-top:74px; }
.err-flash { color:#b4243f; font-weight:600; font-size:15px; margin:10px 0; }
/* Komentarz: ten sam cichy pill co kanał, ale obrysowany — z jednego rzutu
   oka widać, że to inny byt niż post (nie idzie na kanał, nie publikujemy). */
.badge-comment { background:#fff; border:1px solid var(--ink-300); }
.post-comment { border-left:3px solid var(--ink-300); }
.comment-hint { font-size:13px; margin:8px 0 0; }
.btn-target { text-decoration:none; display:inline-flex; align-items:center; }
.btn-status.ghost { border-style:solid; }

.post-form { margin:0; display:block; }
/* Pole treści: krótkie posty zostają na ~8 wierszach (min-height), długie
   rosną do treści aż do 1,5x (max-height), potem przewijają w środku.
   Wysokość dopina feed.js; min/max to podłoga i sufit. */
.post-text { width:100%; min-height:220px; max-height:330px; overflow-y:auto;
  border:1px solid var(--line); border-radius:12px; padding:14px; font-size:15px;
  line-height:1.6; background:var(--ink-50); color:var(--ink-900); font-family:var(--font-body); }
.post-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
/* Jedyny kolorowy przycisk w karcie — główna akcja. */
.btn-copy { background:var(--orange-500); color:#fff; min-height:44px; padding:11px 20px; }
.btn-copy:hover { background:var(--orange-600); filter:none; }
.btn-copy.copied { background:var(--success); }
.note-input { flex:1; min-width:160px; min-height:44px; }
.btn-ghost { background:#fff; color:var(--ink-700); border:1px solid var(--ink-300); min-height:44px; padding:11px 16px; font-size:15px; }
.btn-ghost:hover { filter:none; background:var(--ink-50); }

.thumbs { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.thumb { position:relative; display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); width:clamp(220px, 82vw, 300px); }
.thumb img, .thumb video { width:100%; height:auto; display:block; }
/* Grafika/wideo w apce klienta: podgląd + przycisk × usuń + link pobierania */
.thumb-media { margin:0; }
.thumb-media video { background:#000; }
.thumb-dl-link { display:block; text-align:center; font-size:12px; font-weight:600; color:#fff;
  background:rgba(28,26,51,.6); padding:5px 0; text-decoration:none; }
.thumb-dl-link:hover { background:rgba(28,26,51,.78); }
.thumb-rm { position:absolute; top:6px; right:6px; margin:0; z-index:2; }
.thumb-rm button { width:30px; height:30px; min-height:0; padding:0; border-radius:50%; border:none; cursor:pointer;
  background:rgba(24,24,27,.72); color:#fff; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.thumb-rm button:hover { background:rgba(24,24,27,.92); }

/* Grafiki przy poście (widok operatora) — responsywne, pełny obraz widoczny */
.post-imgs { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.post-img { position:relative; margin:0; flex:0 0 auto; width:clamp(300px, 84vw, 600px); }
.post-img img, .post-img video { width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line); }
.post-img-rm { position:absolute; top:6px; right:6px; margin:0; }
.post-img-rm button { width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(24,24,27,.72); color:#fff; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.post-img-rm button:hover { background:rgba(24,24,27,.92); }

/* Usuwanie postu przez klienta (miękkie — do Kosza) */
.post-remove { margin-top:10px; text-align:right; }
.post-remove .confirm-del form { margin-top:8px; }
.remove-hint { margin:0 0 8px; }

/* Info o zajętym miejscu (formularz nowego posta klienta) */
.store-line { font-size:12px; color:var(--ink-500); }
/* Panel miejsca na serwerze (pulpit admina) */
.server-box { border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:22px; background:#fff; box-shadow:var(--shadow-sm); }
.server-box .store-bar { margin-top:8px; }
.server-box .err { margin:8px 0 0; }

/* Pasek zajętości miejsca (admin Pliki) */
.store-bar-wrap { margin:12px 0 18px; }
.store-bar { height:10px; border-radius:6px; background:var(--ink-100); overflow:hidden; }
.store-bar-fill { display:block; height:100%; background:var(--indigo-700); border-radius:6px; }
.store-bar-fill.full { background:#b4243f; }
.limit-form { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.limit-form .fld { flex:0 0 auto; }
.limit-form button { min-height:auto; padding:11px 16px; }
.file-meta { font-size:12px; color:var(--ink-500); margin:6px 0 4px; }
.file-del { margin-top:2px; }
.store-block { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--ink-50); }
.store-block .err { margin:6px 0 0; }

/* Pasek postępu wysyłki pliku (formularz nowego posta) */
.upload-progress { margin:14px 0; }
.upload-progress-label { font-size:13px; font-weight:600; color:var(--ink-700); }
.upload-progress-track { height:10px; border-radius:6px; background:var(--ink-100); overflow:hidden; margin-top:6px; }
.upload-progress-fill { display:block; height:100%; width:0; background:var(--indigo-700); border-radius:6px; transition:width .15s; }

/* Sekcja "Uwaga do Neurona" na dole postu (portal klienta) */
.note-section { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.note-label { display:block; font-size:13px; font-weight:600; color:var(--ink-500); }
.note-section .note-input { width:100%; box-sizing:border-box; }
.note-section button { margin-top:8px; }
/* Zwijane sekcje karty (uwaga, szczegóły): w spoczynku sama etykieta ze
   strzałką, zawartość po kliknięciu. Krótsza karta na telefonie. */
.note-fold > summary, .details-fold > summary { list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; padding:2px 0; }
.note-fold > summary::-webkit-details-marker,
.details-fold > summary::-webkit-details-marker { display:none; }
.note-fold > summary::marker, .details-fold > summary::marker { content:""; }
.note-fold > summary::after, .details-fold > summary::after { content:"▾";
  font-size:11px; line-height:1; transition:transform .15s; }
.note-fold[open] > summary::after, .details-fold[open] > summary::after { transform:rotate(180deg); }
.note-fold > summary:hover, .details-fold > summary:hover { color:var(--ink-900); }
.note-fold .note-form { margin-top:10px; }

/* Szczegóły publikacji na gotowym poście: kanał, dzień i godzina obok siebie,
   gdy jest miejsce; na telefonie jeden pod drugim. */
.details-fold { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.details-form { margin-top:10px; }
.details-hint { margin:0; font-size:13px; }
.details-grid { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:520px) { .details-grid { grid-template-columns:1.2fr 1fr .8fr; } }
.details-form button { justify-self:start; }
.details-form input[type="file"] { padding:4px 0; }
.thumb-dl { position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:11px; font-weight:600; color:#fff;
  background:rgba(28,26,51,.6); padding:3px 0; }

.status-form { margin:14px 0 0; display:grid; gap:8px; }
.btn-status { background:#fff; color:var(--ink-700); border:1px solid var(--ink-300); min-height:44px; padding:10px 14px; font-size:15px; font-weight:600; }
.btn-status:hover { color:var(--ink-900); border-color:var(--ink-700); filter:none; background:var(--ink-50); }

/* Admin */
h2 { font-size:17px; font-weight:700; margin:28px 0 10px; }
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.tbl th, .tbl td { text-align:left; padding:11px 13px; border-bottom:1px solid var(--line); }
.tbl th { color:var(--ink-500); font-weight:600; background:var(--ink-50); }
.tbl a { color:var(--indigo-700); font-weight:600; }
.stack { display:grid; gap:10px; max-width:440px; margin-top:8px; }
.channels { border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:grid; gap:8px; background:#fff; }
.channels legend { padding:0 6px; }
.chk { display:flex; align-items:center; gap:8px; font-size:15px; }
.keybox { border-color:var(--orange-500); margin:16px 0; }
.key { display:block; word-break:break-all; background:var(--ink-50); padding:12px; border-radius:8px; font-size:13px; font-family:ui-monospace, monospace; }
.pre { white-space:pre-wrap; }
.tagbox { margin-top:10px; padding:10px 12px; background:var(--ink-50); border:1px solid var(--line); border-radius:10px; }
.tagbox-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); margin-bottom:4px; }
.tagbox .pre { font-size:14px; color:var(--ink-700); line-height:1.5; }
.sub { margin:12px 0; }
.card.sub, .card.keybox { max-width:none; }

/* Bramka wstrzyknięć na zgłoszeniach (core/security/prompt_guard.py).
   Wariant bazowy = tekst oznaczony, ale przepuszczony (waga `srednie`).
   `.sub-flagi-stop` = zaparkowane, silnik go nie tknie do zwolnienia. */
.sub-flagi { margin:10px 0 14px; padding:12px 14px; border-radius:10px;
             background:var(--ink-50); border:1px solid var(--line); font-size:14px; }
.sub-flagi p { margin:0 0 6px; }
.sub-flagi ul { margin:0; padding-left:18px; color:var(--ink-700); }
.sub-flagi li { margin-bottom:3px; line-height:1.45; }
.sub-flagi code { font-family:ui-monospace, monospace; font-size:12px; }
.sub-flagi form { margin-top:10px; }
.sub-flagi-stop { background:#fef2f2; border-color:#fecaca; }
.pre-inline { font-family:ui-monospace, monospace; font-size:12px; background:#fff;
              padding:1px 5px; border-radius:4px; border:1px solid var(--line); }

/* Widok tygodnia (kalendarz) */
.weekwrap { max-width:1200px; margin:0 auto; padding:18px 16px 64px; }
.weeknav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.weeknav-mid { text-align:center; }
.weeknav-label { display:block; font-family:var(--font-display); font-weight:700; font-size:16px; }
.weeknav-today { font-size:13px; color:var(--ink-700); font-weight:600; }
.week { display:grid; grid-template-columns:repeat(7, minmax(150px,1fr)); gap:10px; overflow-x:auto; padding-bottom:8px; }
.wcol { background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px; min-height:130px; }
.wcol.is-today { border-color:var(--ink-700); }
.wcol-head { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 6px 9px; text-decoration:none; color:var(--ink-900); border-bottom:1px solid var(--line); }
.wcol-wd { font-size:11px; color:var(--ink-500); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.wcol-dnum { font-family:var(--font-display); font-weight:700; font-size:18px; }
.wcol.is-today .wcol-dnum { color:var(--ink-900); }
.wcol-posts { display:grid; gap:8px; padding-top:8px; }
.wpost { display:block; text-decoration:none; background:var(--ink-50); border:1px solid var(--line); border-radius:10px; padding:8px; transition:border-color .15s; }
.wpost:hover { border-color:var(--ink-700); }
.wpost.pub { opacity:.55; }
.wpost-top { display:flex; align-items:center; gap:6px; }
.wpost .badge { font-size:11px; padding:3px 8px; }
.wpost-time { font-size:11px; color:var(--ink-500); }
.wpost-snip { display:block; margin-top:6px; font-size:12px; color:var(--ink-700); line-height:1.35; }
.wcol-empty { text-align:center; color:var(--ink-300); font-size:14px; padding:14px 0; }
/* Akcje w okienku dnia. Widzę pustą środę i mam tam obie drogi: wpisać
   własny post albo zamówić go u zespołu — bez wybierania dnia drugi raz
   w formularzu. Przygaszone, żeby nie konkurowały z treścią postów. */
.wcol-actions { display:grid; gap:6px; margin-top:8px; }
.wcol-act { display:block; text-align:center; text-decoration:none; font-size:12px;
  line-height:1.3; font-weight:600; color:var(--ink-500); padding:8px 6px;
  border-radius:10px; border:1px dashed var(--ink-300); background:#fff;
  text-wrap:balance; }
.wcol-act:hover { color:var(--indigo-700); border-color:var(--indigo-700);
  border-style:solid; background:var(--indigo-50); }
.wcol-add { margin-left:auto; width:23px; height:23px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; color:var(--indigo-700); background:var(--ink-50); text-decoration:none; flex:0 0 auto; }
.wcol-add:hover { background:var(--indigo-700); color:#fff; }
.wcol-addbig { display:block; text-align:center; color:var(--ink-300); font-size:13px; padding:12px 0; border:1px dashed var(--line); border-radius:10px; text-decoration:none; }
.wcol-addbig:hover { color:var(--indigo-700); border-color:var(--indigo-700); background:var(--ink-50); }

/* ── Dolne tabsy (portal) ─────────────────────────────────────────── */
.has-tabs { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex;
  background:#fff; border-top:1px solid var(--line);
  padding:6px 0 calc(8px + env(safe-area-inset-bottom)); }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:var(--ink-500); font-size:11px; font-weight:600; }
.tab svg { width:22px; height:22px; }
.tab.is-active { color:var(--ink-900); }

/* ── Hamburger (topbar) ───────────────────────────────────────────── */
.menu { position:relative; }
.menu summary { list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; width:38px; height:38px; border-radius:10px; }
.menu summary::-webkit-details-marker { display:none; }
.menu summary:hover { background:var(--ink-50); }
.menu-ico { font-size:19px; color:var(--ink-700); line-height:1; }
.menu-drop { position:absolute; right:0; top:44px; min-width:170px; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 8px 24px rgba(28,26,51,.10); z-index:50; }
.menu-item { display:block; width:100%; text-align:left; padding:10px 12px;
  border-radius:8px; font-size:14px; color:var(--ink-900); text-decoration:none;
  background:none; border:none; cursor:pointer; font-family:inherit; }
.menu-item:hover { background:var(--ink-50); }
.menu-user { display:block; padding:8px 12px 10px; margin-bottom:4px;
  border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-500);
  line-height:1.35; word-break:break-all; cursor:default; }
.menu-user strong { display:block; margin-top:2px; color:var(--ink-900);
  font-weight:600; font-size:13px; }

/* ── Radar ────────────────────────────────────────────────────────── */
/* Licznik długości briefu przy zamówieniu treści. */
.order-count { margin:-4px 0 0; font-size:13px; }
.order-count.is-ok { color:var(--success); font-weight:600; }

.searchbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.searchbar input[type="search"] { flex:1; border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; font-size:14px; font-family:inherit; background:#fff; }
.searchbar input[type="search"]:focus { outline:none; border-color:var(--ink-700); }
.search-clear { font-size:13px; color:var(--ink-500); text-decoration:none; }
.search-count { margin:0 0 12px; }
.crumb { margin:0 0 10px; display:flex; justify-content:space-between; align-items:center; }
.kind-head { margin:16px 4px 8px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-500); }
.sig { position:relative; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; margin-bottom:10px; }
.sig-alert { border-color:var(--orange-500); background:#fff8ef; }
.sig-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; padding-right:30px; }
.sig-flag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--orange-600); }
.sig-time { margin-left:auto; font-size:12px; color:var(--ink-500); }
/* Sekcje radaru bez kolorów — czytelność robi typografia, nie tło. */
.sig-badge-competitor, .sig-badge-reference, .sig-badge-industry {
  background:var(--ink-100); color:var(--ink-700); }
.sig-title { margin:0 0 4px; font-size:15px; font-weight:600; line-height:1.4;
  color:var(--ink-900); }
.sig-why { margin:0 0 6px; font-size:13px; line-height:1.5; color:var(--ink-700); }
.sig-src { margin:0 0 8px; font-size:13px; color:var(--ink-500); }
.sig-src a { color:var(--ink-700); }
.btn-want { font-size:13px; padding:7px 12px; border:1px solid var(--ink-300);
  border-radius:9px; background:none; color:var(--ink-700); cursor:pointer;
  font-family:inherit; font-weight:600; }
.btn-want:hover { background:var(--ink-50); }
/* Prowieniencja: zwykły tekst; zieleń tylko przy "sprawdzone" (to sygnał
   zaufania), auto zostaje szare. */
.prov-badge { font-size:13px; font-weight:600; white-space:nowrap; }
.prov-badge.rev { color:var(--success); }
.prov-badge.auto { color:var(--ink-500); }
.prov-dot { font-size:10px; margin-left:auto; }
.prov-dot.rev { color:var(--success); }
.prov-dot.auto { color:var(--ink-500); }
.want summary { display:inline-block; list-style:none; }
.want summary::-webkit-details-marker { display:none; }
.want[open] summary { background:var(--ink-50); }
.want form { display:grid; gap:8px; margin-top:8px; }
.want .want-comment { font-size:15px; padding:10px 12px; }
.want form .btn-want { justify-self:start; }
/* Dwa warianty zgłoszenia (post / komentarz) jeden pod drugim — na wąskim
   ekranie zawijają się same, bo każdy <details> jest osobnym blokiem. */
.want-row { display:flex; flex-wrap:wrap; gap:8px; }
.want-row .want { flex:1 1 100%; }

/* ── Oznaczanie kolorem (post, sygnał radaru, kafelek w tygodniu) ──
   Kolor przemalowuje CAŁY panel wpisu, bo o to chodzi w oznaczaniu: klient
   ma go znaleźć wzrokiem, nie czytać etykiety. Wybór chowa się pod samą
   strzałką w prawym górnym rogu karty. */
.post[data-tag="amber"], .sig[data-tag="amber"], .wpost[data-tag="amber"] {
  background:var(--tag-amber-bg); border-color:var(--tag-amber-line); }
.post[data-tag="sage"], .sig[data-tag="sage"], .wpost[data-tag="sage"] {
  background:var(--tag-sage-bg); border-color:var(--tag-sage-line); }
.post[data-tag="azure"], .sig[data-tag="azure"], .wpost[data-tag="azure"] {
  background:var(--tag-azure-bg); border-color:var(--tag-azure-line); }
.post[data-tag="plum"], .sig[data-tag="plum"], .wpost[data-tag="plum"] {
  background:var(--tag-plum-bg); border-color:var(--tag-plum-line); }
/* Pole treści na kolorowej karcie: jaśniejsze niż tło, żeby tekst dalej
   czytał się jak kartka położona na kolorze. */
.post[data-tag] .post-text { background:rgba(255,255,255,.72); }

/* Strzałka siedzi w rogu karty na stałe (pozycja bezwzględna), a nie w toku
   nagłówka: przy długiej etykiecie prowieniencji nagłówek zawija się na
   telefonie i strzałka zjeżdżała z rogu na drugi wiersz. */
.tagpick { position:absolute; top:10px; right:10px; z-index:2; }
.tagpick > summary { list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; width:30px; height:30px;
  border-radius:9px; color:var(--ink-500); font-size:14px; line-height:1; }
.tagpick > summary::-webkit-details-marker { display:none; }
.tagpick > summary::marker { content:""; }
.tagpick > summary:hover { background:var(--ink-100); color:var(--ink-900); }
.tagpick[open] > summary { background:var(--ink-100); color:var(--ink-900); }
.tagpick-drop { position:absolute; right:0; top:34px; z-index:30; margin:0;
  display:flex; align-items:center; gap:8px; padding:8px 9px; background:#fff;
  border:1px solid var(--line); border-radius:13px; box-shadow:0 8px 24px rgba(28,26,51,.14); }
.tagpick-swatch, .tagpick-clear { width:30px; height:30px; min-height:0; padding:0;
  border-radius:50%; cursor:pointer; flex:none; }
.tagpick-swatch { border:1px solid rgba(28,26,51,.14); }
.tagpick-swatch:hover, .tagpick-clear:hover { filter:none; transform:scale(1.08); }
.sw-amber { background:var(--tag-amber-dot); }
.sw-sage  { background:var(--tag-sage-dot); }
.sw-azure { background:var(--tag-azure-dot); }
.sw-plum  { background:var(--tag-plum-dot); }
.tagpick-swatch.is-on { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink-700); }
.tagpick-clear { background:#fff; border:1px solid var(--ink-300); color:var(--ink-500);
  font-size:16px; font-weight:400; line-height:1; display:flex; align-items:center;
  justify-content:center; }
.tagpick-clear:hover { color:var(--ink-900); border-color:var(--ink-700); }
/* Podgląd oznaczenia w panelu zespołu: sama kropka z podpisem, bez wyboru. */
.tag-chip { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.tag-chip i { width:11px; height:11px; border-radius:50%; display:inline-block;
  border:1px solid rgba(28,26,51,.14); }

/* Stopka karty logowania (link do regulaminu). */
.card-foot { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.card-foot a { font-size:13px; }

/* Ekran akceptacji Regulaminu (bramka przed wejściem do panelu). */
.card-zgoda { max-width:460px; }
.zgoda-box { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:14px 16px; border:1px solid var(--ink-300); border-radius:12px;
  background:var(--ink-50); font-size:14.5px; line-height:1.55; cursor:pointer; }
.zgoda-box:hover { border-color:var(--ink-700); }
.zgoda-box input[type="checkbox"] { width:20px; height:20px; margin:2px 0 0; accent-color:var(--indigo-700); }
.zgoda-czytaj { margin:0; }
.zgoda-czytaj a { color:var(--indigo-700); font-weight:600; font-size:14px; }
.zgoda-rodo { margin:18px 0 0; color:var(--ink-500); font-size:12.5px; line-height:1.55; }
.zgoda-rodo a { color:var(--ink-700); }
.zgoda-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.zgoda-foot .muted { font-size:13px; }
.zgoda-foot form { margin:0; }

/* Stan akceptacji Regulaminu przy użytkowniku w panelu admina. */
.zgoda-tag { font-size:12px; font-weight:600; color:var(--success); white-space:nowrap; }
.zgoda-tag.brak { color:var(--ink-500); }

/* ── Regulamin: podstrona z pełną treścią (public/regulamin.html) ──
   Dokument prawny czyta się długo, więc typografia jest tu szersza i
   luźniejsza niż w panelu: 16,5 px, interlinia 1,7, numeracja wisząca
   w marginesie (tekst ustępu układa się w równą kolumnę, a numer da się
   zeskanować wzrokiem). Ten sam arkusz obsługuje druk i PDF — sekcja
   @media print na końcu. */
.legal-body { background:var(--bg); }
.legal-top { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; background:#fff; border-bottom:1px solid var(--line); }
.legal-top .brand { text-decoration:none; }
.legal-top-akcje { display:inline-flex; align-items:center; gap:16px; }
.legal { max-width:800px; margin:0 auto; padding:26px 18px 64px; }

.legal-note { margin:0 0 18px; padding:12px 16px; border-radius:12px;
  background:var(--orange-100); border:1px solid #f3ddb6; color:var(--ink-700);
  font-size:14px; line-height:1.55; }
.legal-note a { color:var(--indigo-700); }

.legal-doc { background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:44px 48px; box-shadow:var(--shadow-sm); color:var(--ink-900);
  font-size:16.5px; line-height:1.7; }
.legal-doc h1 { margin:0; font-size:27px; font-weight:700; line-height:1.25; }
.legal-lead { margin:8px 0 0; color:var(--ink-500); font-size:14px; }
/* Adnotacja tlumacza w wariancie EN — ma byc widoczna, ale nie udawac tresci
   dokumentu, bo wiaze tekst polski. */
.legal-tlum { margin:14px 0 0; padding:10px 14px; border-left:3px solid var(--ink-300);
  background:var(--ink-50); color:var(--ink-700); font-size:13.5px; line-height:1.55; }
.legal-doc a { color:var(--indigo-700); }

.legal-toc { margin:26px 0 8px; padding:18px 20px; background:var(--indigo-50);
  border-radius:14px; }
.legal-toc ol { counter-reset:toc; list-style:none; margin:0; padding:0;
  columns:2; column-gap:30px; }
.legal-toc li { counter-increment:toc; break-inside:avoid; margin:0 0 7px; font-size:14px;
  line-height:1.45; }
.legal-toc li::before { content:"§ " counter(toc) ". "; color:var(--ink-500);
  font-variant-numeric:tabular-nums; }
.legal-toc a { color:var(--ink-700); text-decoration:none; }
.legal-toc a:hover { text-decoration:underline; }

.par { margin-top:38px; }
.par h2 { margin:0 0 14px; font-size:18px; font-weight:700; scroll-margin-top:80px; }

/* Numeracja wisząca: ustępy 1. 2. 3., litery a) b) c). */
.legal-doc ol.ust, .legal-doc ol.lit { list-style:none; margin:0; padding:0; }
.legal-doc ol.ust { counter-reset:ust; }
.legal-doc ol.ust > li { counter-increment:ust; position:relative; padding-left:34px;
  margin:0 0 13px; }
.legal-doc ol.ust > li::before { content:counter(ust) "."; position:absolute; left:0; top:0;
  width:24px; text-align:right; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.legal-doc ol.lit { counter-reset:lit; margin:11px 0 4px; }
.legal-doc ol.lit > li { counter-increment:lit; position:relative; padding-left:32px;
  margin:0 0 9px; }
.legal-doc ol.lit > li::before { content:counter(lit, lower-alpha) ")"; position:absolute;
  left:0; top:0; width:22px; text-align:right; color:var(--ink-500); }

/* Definicje (§ 2): termin w lewej kolumnie, treść w prawej. */
.defs { margin:0; }
.defs > div { display:grid; grid-template-columns:186px 1fr; gap:0 18px;
  padding:9px 0; border-top:1px solid var(--line); }
.defs > div:first-child { border-top:0; padding-top:0; }
.defs dt { font-weight:600; color:var(--indigo-700); }
.defs dd { margin:0; }

.legal-download { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:26px 0 0; }
.btn-download { display:inline-block; padding:13px 22px; border-radius:11px;
  background:var(--indigo-700); color:#fff; text-decoration:none;
  font-family:var(--font-display); font-size:15px; font-weight:600; }
.btn-download:hover { filter:brightness(1.08); }
.legal-foot { margin:34px 0 0; padding-top:18px; border-top:1px solid var(--line);
  color:var(--ink-500); font-size:13px; line-height:1.6; }
.legal-foot p { margin:0 0 4px; }
.legal-foot a { color:var(--ink-700); }

@media (max-width:600px) {
  .legal { padding:16px 12px 48px; }
  .legal-doc { padding:26px 20px; border-radius:14px; font-size:16px; }
  .legal-doc h1 { font-size:23px; }
  .legal-toc ol { columns:1; }
  .defs > div { grid-template-columns:1fr; gap:2px; }
}

/* ── Komp: widok dnia jako planer (wariant A, uwagi Milki 30.07.2026) ──
   Telefon zostaje bez zmian — cały ten blok wchodzi dopiero od 768px.
   Lista postów z boku (master-detail: klik = post po prawej), zwarty
   nagłówek, wyraźnie wydzielone okno edycji (Szczegóły / Uwaga do Neurona
   zostają POD nim) i zbite na środku dolne tabsy. */
@media (min-width:768px) {
  /* Szerzej, bo teraz dwie kolumny: lista z boku + otwarty post. */
  .feed { max-width:1040px; padding-top:12px; }

  /* Nagłówek dnia zwarty i wyśrodkowany — strzałki przy dacie, nie w rogach
     (to raziło na żywo), mniejsze, data i kalendarzyk w jednej linii. */
  .daynav { margin-bottom:16px; justify-content:center; gap:14px; }
  .daynav-arrow { height:40px; width:40px; font-size:22px; border-radius:12px; }
  .daynav-mid { display:flex; align-items:center; justify-content:center; gap:10px; }
  .daynav-label { font-size:15px; }
  .daynav-picker { margin-top:0; }

  /* Dwie kolumny: lista postów (lewa, przyklejona) + otwarty post (prawa). */
  .day-split { display:flex; gap:20px; align-items:flex-start; }
  .day-list { display:flex; flex-direction:column; gap:8px; width:300px; flex:none;
    position:sticky; top:80px; max-height:calc(100vh - 96px); overflow-y:auto; }
  .day-posts { flex:1; min-width:0; }
  .day-posts .post { max-width:640px; }

  /* Wpis listy: kanał + status + dwa wiersze początku treści, żeby dwa posty
     tego samego kanału dało się rozróżnić. Zaznaczony na pomarańczowo. */
  .day-list-item { display:block; text-decoration:none; color:var(--ink-900);
    padding:10px 12px; border:1px solid var(--line); border-radius:12px;
    background:#fff; box-shadow:var(--shadow-sm); }
  .day-list-item:hover { border-color:var(--ink-300); }
  .day-list-item.is-active { border-color:var(--orange-500); background:var(--orange-100); }
  .dli-head { display:flex; align-items:center; gap:8px; }
  .dli-status { margin-left:auto; font-size:11px; font-weight:600; color:var(--ink-500); }
  .dli-snip { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--ink-700); }

  /* Okno edycji wyraźnie wydzielone: treść + akcje w obrysowanym, jaśniejszym
     bloku, samo pole tekstu na bieli — od razu widać, gdzie się pisze.
     Szczegóły / Uwaga do Neurona zostają pod tym blokiem (kolejność w DOM). */
  .post { padding:20px 22px; }
  .post-form { border:1px solid var(--line); border-radius:14px; background:var(--ink-50); padding:16px; }
  .post[data-tag] .post-form { background:rgba(255,255,255,.6); }
  .post-text { background:#fff; max-height:460px; }
  .details-fold, .note-section { margin-top:18px; }

  /* Dolne tabsy zbite na środku — na szerokim ekranie nie uciekają w rogi. */
  .tabs { justify-content:center; gap:10px; }
  .tab { flex:0 0 auto; min-width:132px; padding:2px 22px; }

  /* Drag-and-drop (komp). Tydzień: kafelek posta chwyta się myszą, kolumna
     docelowa podświetla się na przeciąganie. Dzień: karta posta podświetla
     się, gdy ciągniesz na nią plik, i przygasza w trakcie wgrywania. */
  .wpost[draggable="true"] { cursor:grab; }
  .wpost.is-dragging { opacity:.5; cursor:grabbing; }
  .wcol.drop-target { outline:2px dashed var(--orange-500); outline-offset:3px; border-radius:12px; }
  .day-posts .post.drop-files { outline:2px dashed var(--orange-500); outline-offset:3px; }
  .day-posts .post.is-uploading { opacity:.6; pointer-events:none; }
}

/* Druk i PDF: sam dokument, bez nawigacji panelu. Marginesy strony ustawia
   @page, więc karta nie powiela wcięcia. */
@media print {
  @page { size:A4; margin:18mm 17mm 20mm; }
  /* .legal-body (klasa) bije `body` specyficznością — bez tego szare tło
     panelu wychodzi w PDF jako prostokąt pod ostatnim akapitem. */
  body, .legal-body { background:#fff; }
  .legal-top, .legal-download, .legal-note { display:none; }
  .legal { max-width:none; margin:0; padding:0; }
  .legal-doc { border:0; border-radius:0; box-shadow:none; padding:0;
    font-size:10.5pt; line-height:1.55; }
  .legal-doc h1 { font-size:17pt; }
  .par h2 { font-size:11.5pt; break-after:avoid; }
  .par { margin-top:20px; break-inside:auto; }
  .legal-doc ol.ust > li, .legal-doc ol.lit > li, .defs > div { break-inside:avoid; }
  .legal-toc { background:none; border:1px solid #ddd; padding:12px 14px; }
  .legal-doc a { color:#000; text-decoration:none; }
  .legal-foot { color:#555; }
}

/* ── Wywiad (intel) ── layout „briefu redakcyjnego” ───────────────
   Wzorzec: materiał wewnętrzny (kicker → tytuł → pasek metryk →
   Kierunkowskaz → numerowane sekcje → oś czasu z kropkami → kafle liczb).
   Mobile-first; >=768px szersza kolumna i siatki. */
/* Wywiad tak szeroki jak radar (decyzja Pawła 19.08): przy 860 px dwie
   kolumny wychodzily WEZSZE niz jedna kolumna radaru i wszystko bylo
   scisniete — szeroki ekran stal niewykorzystany. */
@media (min-width: 768px) { .p-portal .feed.wyw { max-width: 1040px; } }

/* nagłówek — kompaktowy: kicker z nazwą klienta drobnym drukiem i jedna
   linia metryk. Bez wielkiego tytułu; klient wie, czyj to panel, a brief
   ma być widoczny od razu, bez przewijania. */
.wyw-head { margin: 2px 0 12px; }
.wyw-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500); line-height: 1.5; }
.wyw-klient { font-weight: 600; letter-spacing: .04em; color: var(--ink-700);
  text-transform: none; }
.wyw-meta { margin-top: 5px; padding: 6px 0; font-size: 12px; line-height: 1.6;
  color: var(--ink-500); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wyw-meta strong { color: var(--ink-900); font-weight: 700; }
/* Duży tytuł zostaje TYLKO dla ekranu przykładu (klient bez modułu). */
.wyw-title { font-family: var(--font-display); font-size: 22px; line-height: 1.2;
  letter-spacing: -.015em; margin: 4px 0 8px; }
@media (min-width: 768px) { .wyw-title { font-size: 26px; } }

/* numerowane sekcje */
.wyw-sec { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; }
.wyw-secnum { font-size: 12px; font-weight: 700; color: var(--ink-300);
  font-variant-numeric: tabular-nums; }
.wyw-sec h2 { font-size: 18px; margin: 0; }

/* Kierunkowskaz — ramka „gdyby zabrakło czasu” */
.wyw-note { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 16px 8px; box-shadow: var(--shadow-sm); margin-bottom: 6px; }
.wyw-note-kicker { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 10px; }
.wyw-dir { font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; margin: 14px 0 6px; color: var(--ink-500); }
.wyw-dir-idz { color: #2e6e4e; }
.wyw-dir-unikaj { color: #a04545; }
.wyw-wniosek { border-left: 3px solid var(--ink-300); border-radius: 0 10px 10px 0;
  background: var(--ink-50); padding: 10px 12px; margin-bottom: 8px; }
.wyw-wniosek-idz { border-left-color: #2e6e4e; background: #f1f6f2; }
.wyw-wniosek-unikaj { border-left-color: #a04545; background: #faf1f1; }
.wyw-wniosek-claim { font-weight: 600; line-height: 1.45; }
.wyw-wniosek-nr { color: var(--ink-300); font-weight: 700; margin-right: 2px; }

/* pigułki widoków; #dowody = kotwica zmiany widoku (nie chowa się pod
   topbarem — jak .post w kalendarzu) */
#dowody { scroll-margin-top: 74px; }
.subtabs { display: flex; gap: 8px; margin: 2px 0 14px; flex-wrap: wrap; }
.subtab { padding: 7px 14px; border-radius: 999px; background: var(--ink-100);
  color: var(--ink-700); text-decoration: none; font-size: 13px; font-weight: 600; }
.subtab.is-active { background: var(--ink-900); color: #fff; }

/* karty aktorów + oś czasu z kropkami */
.wyw-actor > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; }
.wyw-actor > summary::-webkit-details-marker { display: none; }
.wyw-actor-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.wyw-actor-name { font-family: var(--font-display); font-size: 16px; }
.wyw-actor-fn { font-size: 13px; }
.wyw-actor-stats { margin-left: auto; font-size: 12px; color: var(--ink-500);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.wyw-actor-last { font-size: 14px; color: var(--ink-500); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; }
.wyw-actor[open] .wyw-actor-last { display: none; }
.wyw-tl { margin: 12px 0 0 3px; padding-left: 18px;
  border-left: 2px solid var(--ink-100); display: grid; gap: 14px; }
.wyw-tl-item { position: relative; }
.wyw-tl-item::before { content: ""; position: absolute; left: -23px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-700);
  box-shadow: 0 0 0 3px #fff; }
.wyw-date { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 3px;
  font-variant-numeric: tabular-nums; }
.wyw-claim { font-size: 15px; line-height: 1.5; }

/* outlook strategiczny konkurenta (z tygodniowej syntezy) */
.wyw-outlook { margin: 12px 0 2px; padding: 10px 12px; background: var(--ink-50);
  border-left: 3px solid var(--ink-700); border-radius: 0 10px 10px 0; }
.wyw-outlook-kicker { font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 5px; }
.wyw-outlook-claim { font-weight: 600; line-height: 1.45; }
.wyw-outlook-detail { font-size: 14px; line-height: 1.55; color: var(--ink-700);
  margin-top: 5px; }

/* otoczenie rynkowe — zwijane, żeby regulatorzy i media nie mieszały się
   z konkurentami na głównej liście */
.wyw-otocz > summary { margin: 16px 0 10px; cursor: pointer; }

/* badge BETA: w dolnej nawigacji i w nagłówku zakładki */
.tab-beta { display: inline-block; margin-left: 4px; font-size: 8px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: super; opacity: .75; }
.wyw-beta { display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: var(--ink-900); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; }

/* przykład dla klienta bez włączonego modułu — musi być widać, że to nie
   są jego dane: baner u góry i wyraźnie stonowane karty */
.wyw-demo-note { background: #fdf6e7; border: 1px solid #e8d9b5;
  border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.55;
  color: var(--ink-700); margin-bottom: 6px; }
.wyw-demo { position: relative; opacity: .92; }
.wyw-demo .sig, .wyw-demo .wyw-note { background: repeating-linear-gradient(
    135deg, #fff, #fff 14px, var(--ink-50) 14px, var(--ink-50) 28px); }
.wyw-actor-demo .wyw-actor-row { display: flex; gap: 8px; align-items: baseline;
  flex-wrap: wrap; margin-bottom: 4px; }

/* „Napisz o tym" — jedyna akcja w zakładce (temat w trendzie) */
.wyw-akcja { margin-top: 10px; }
.wyw-akcja .btn-want { display: inline-block; text-decoration: none; }

/* „Więcej (N)" — nadwyżka ponad 5 pozycji w każdej liście */
.wyw-wiecej > summary { margin: 4px 0 12px; cursor: pointer; padding: 8px 0;
  font-size: 14px; }
.wyw-wiecef, .wyw-wiecej[open] > summary { margin-bottom: 8px; }

/* liczby jako kafle */
@media (min-width: 768px) {
  .wyw-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wyw-nums .sig { margin-bottom: 0; }
}
.wyw-num-value { font-family: var(--font-display); font-size: 30px;
  font-weight: 700; letter-spacing: -.015em; line-height: 1.1;
  margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* terminy: chip daty + treść */
.wyw-term { display: flex; gap: 12px; align-items: flex-start; }
.wyw-term-chip { flex: 0 0 auto; font-size: 12px; font-weight: 700;
  color: var(--ink-700); background: var(--ink-100); padding: 4px 10px;
  border-radius: 8px; font-variant-numeric: tabular-nums; }
.wyw-term-body { min-width: 0; flex: 1; }
.wyw-term.is-past { opacity: .6; }
.intel-past > summary { margin: 14px 0 10px; cursor: pointer; }

/* cytat źródłowy / „dlaczego” (details) */
.intel-quote > summary { font-size: 13px; font-weight: 600; color: var(--ink-500);
  cursor: pointer; margin: 4px 0; }
.intel-quote blockquote { margin: 6px 0; padding: 8px 12px; background: var(--ink-50);
  border-left: 3px solid var(--ink-300); font-size: 14px; line-height: 1.5;
  color: var(--ink-700); border-radius: 0 8px 8px 0; }
.intel-quote .sig-why { margin: 6px 0; }

/* stan rozruchu */
.intel-warmup { padding: 44px 20px; text-align: center; }
.intel-warmup-ico { font-size: 34px; margin-bottom: 8px; }
.intel-warmup h2 { margin-bottom: 8px; }
.intel-warmup-count { margin-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--ink-700); background: var(--ink-100); display: inline-block;
  padding: 5px 12px; border-radius: 999px; }

/* ══ EKRANY WEJŚCIA (logowanie, kod, zgoda) ══════════════════════════
   System wizualny Neuron, wdrożenie 2026-08-19. Okładka w indygo
   z kropkowaną fakturą; na telefonie karta treści wchodzi na nią ujemnym
   marginesem, na komputerze okładka i treść siedzą w jednej pływającej
   karcie wyśrodkowanej na ekranie. */
.auth-shell { min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; padding:16px 0 24px; }
.auth-panel { margin:0 16px; }

.auth-hero { background:var(--indigo-900); background-image:var(--dot-texture);
  background-size:var(--dot-size); color:#fff; padding:20px 16px 26px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
/* Dolny odstęp WIĘKSZY niż w okładce bez tytułu, bo karta wchodzi na okładkę
   ujemnym marginesem 14 px — przy 22 px ogon „ę" w „Sprawdź skrzynkę" wchodził
   pod krawędź karty. 34 − 14 = 20 px prześwitu, tyle co we wzorcu. */
.auth-hero--titled { padding:20px 16px 34px; }
.auth-hero--titled .auth-hero__brand-row { margin-bottom:16px; }
.auth-hero__brand { display:inline-flex; align-items:center; gap:9px; }
.auth-hero__logo { height:20px; width:auto; display:block; }
.auth-hero__product { font-family:var(--font-display); font-size:15px;
  font-weight:700; color:#fff; }
.auth-hero h2 { margin:0; font-family:var(--font-display); font-size:22px;
  font-weight:700; letter-spacing:-.02em; line-height:1.2; color:#fff; }

.auth-card { margin:-14px 0 0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:18px 16px; box-shadow:var(--shadow-md);
  display:grid; gap:16px; }
.auth-card form { display:grid; gap:12px; margin:0; }
.auth-lead { margin:0; font-size:15px; line-height:1.6; color:var(--ink-700); }
.auth-lead a { color:var(--indigo-700); font-weight:600; }

.auth-foot, .auth-links { display:flex; align-items:center; justify-content:center;
  gap:10px; margin:18px 0 0; padding:0 16px; font-size:13px; font-weight:600; }
.auth-links { margin:4px 0 0; padding:0; justify-content:flex-start; }
.auth-foot .sep, .auth-links .sep { color:var(--ink-300); }
/* Bez podkreślenia — we wzorcu linki wejścia niesie kolor i grubość, nie
   kreska. Podkreślenie wraca przy najechaniu i przy ogniskowaniu klawiaturą,
   żeby link dało się rozpoznać bez samego koloru. */
.link-quiet { color:var(--indigo-700); font-weight:600; text-decoration:none; }
.link-quiet:hover, .link-quiet:focus-visible { text-decoration:underline; }

/* Pola */
.field-email { display:flex; align-items:center; gap:9px; height:46px;
  padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-md);
  background:#fff; }
.field-email:focus-within { border-color:var(--blue-500); box-shadow:var(--focus-ring); }
.field-email svg { width:16px; height:16px; flex:none; color:var(--ink-500); }
.field-email input { flex:1; min-width:0; border:0; padding:0; height:auto;
  background:none; font-size:15px; color:var(--ink-900); box-shadow:none; }
.field-email input:focus { outline:none; box-shadow:none; }
.code-label { font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--ink-500); margin:0; }
/* Kod jako CZTERY pola po 58 px (wzorzec 8c), nie jedno z rozstrzelonymi
   znakami. Powód jest użytkowy, nie estetyczny: kod przepisuje się z maila
   na telefonie, a osobne pola pokazują wprost, ile znaków zostało, i nie
   pozwalają zgubić się w środku. */
.code-boxes { display:flex; gap:10px; }
.code-box { flex:1; min-width:0; height:58px; padding:0; text-align:center;
  font-family:var(--font-display); font-size:26px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink-900);
  border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; }
.code-box:focus { outline:none; border-color:var(--blue-500);
  box-shadow:var(--focus-ring); }

/* Przyciski */
.btn-primary { display:flex; align-items:center; justify-content:center;
  width:100%; height:48px; background:var(--indigo-700); color:#fff; border:0;
  border-radius:var(--radius-pill); font-family:var(--font-body); font-size:15px;
  font-weight:600; cursor:pointer; }
.btn-primary:hover { background:var(--indigo-600); }
.btn-primary--inline { width:fit-content; height:auto; padding:14px 24px; }
.btn-secondary { display:flex; align-items:center; justify-content:center;
  width:100%; height:48px; border-radius:var(--radius-pill);
  background:var(--ink-50); border:1px solid var(--line); color:var(--ink-400);
  font-size:15px; font-weight:600; }
.btn-secondary:not(:disabled) { color:var(--indigo-700); cursor:pointer; }

/* Komunikat błędu */
.alert-error { display:flex; align-items:flex-start; gap:10px; margin:0;
  padding:12px 14px; background:var(--danger-bg); border:1px solid var(--maroon-200);
  border-radius:var(--radius-md); font-size:14px; line-height:1.5;
  color:var(--maroon-500); }
.alert-error svg { width:17px; height:17px; flex:none; margin-top:1px; }

/* Zgoda na Regulamin */
.consent-box { display:grid; grid-template-columns:auto 1fr; gap:12px;
  align-items:start; padding:14px; border:1px solid var(--ink-300);
  border-radius:var(--radius-md); background:var(--ink-50); font-size:14px;
  line-height:1.55; color:var(--ink-900); cursor:pointer; }
.consent-box input[type="checkbox"] { width:22px; height:22px; margin:0;
  accent-color:var(--indigo-700); }
.consent-terms-link { margin:0; font-size:13px; font-weight:600; }
.consent-terms-link a { color:var(--indigo-700); }
.consent-rodo { margin:0; font-size:12px; line-height:1.6; color:var(--ink-500); }
.consent-rodo a { color:var(--indigo-700); font-weight:500; }
.consent-footer { display:flex; align-items:center; gap:10px; padding-top:14px;
  border-top:1px solid var(--ink-100); }
.consent-footer .who { flex:1; font-size:12px; color:var(--ink-500); }
.consent-footer form { margin:0; }
.consent-footer .reject { background:none; border:0; padding:0; min-height:auto;
  font-size:13px; font-weight:600; color:var(--maroon-500); cursor:pointer; }

@media (min-width:768px) {
  .auth-shell { align-items:center; padding:24px; }
  .auth-panel { width:460px; margin:0; background:#fff;
    border:1px solid var(--line); border-radius:20px; overflow:hidden;
    box-shadow:var(--shadow-lg); }
  .auth-panel--terms { width:620px; }
  .auth-panel--rejected { width:520px; }
  .auth-hero { border-radius:0; padding:22px 26px 24px; }
  .auth-hero--titled { padding:22px 26px 22px; }
  .auth-hero__logo { height:22px; }
  .auth-hero__brand { gap:10px; }
  .auth-hero__product { font-size:16px; }
  .auth-hero h2 { font-size:24px; }
  .auth-card { margin:0; border:0; border-radius:0; box-shadow:none;
    padding:24px 26px 26px; gap:18px; }
  .auth-lead { font-size:15px; }
  .field-email { height:50px; padding:0 14px; gap:10px; }
  .field-email svg { width:17px; height:17px; }
  .code-box { height:66px; font-size:30px; }
  .code-boxes { gap:12px; }
  .btn-primary, .btn-secondary { height:50px; }
  .alert-error { padding:14px 16px; gap:11px; font-size:15px; }
  .alert-error svg { width:18px; height:18px; }
  .consent-box { gap:14px; padding:16px 18px; font-size:15px; line-height:1.6; }
  .consent-box input[type="checkbox"] { width:24px; height:24px; }
  .consent-terms-link, .consent-footer .reject, .link-quiet { font-size:14px; }
  .consent-rodo { font-size:13px; line-height:1.7; }
  .consent-footer { gap:12px; padding-top:16px; }
  .consent-footer .who { font-size:13px; }
  .auth-foot { margin-top:18px; }
}

/* ══ RADAR — nowy układ zakładki (wzorzec 3a / d3) ═══════════════════
   Wszystko pod `.p-portal`, bo `.sig`, `.badge`, `.btn-want`, `.kind-head`
   i `.searchbar` dzieli z panelem zespołu. Bez tego prefiksu ta warstwa
   przemalowuje radar admina — dokładnie ten błąd cofnięto 18.08.
   Zakres celowo wąski: reguły dotyczą TYLKO ekranów portalu klienta. */

/* ── Okładka zakładki: data i szukajka W pasie marki, nie pod nim ── */
/* DWA TRYBY, i to jest istotne dla odporności.
   Domyślnie (bez JS-a) pas jest `sticky` i sam zajmuje miejsce w układzie —
   nic się nie zwija, nic nie może zasłonić treści, wysokość dobiera się sama
   pod zawartość zakładki. Dopiero skrypt, gdy wystartuje, mierzy pas, wpisuje
   tę wysokość gnieździe i przełącza na `fixed` (klasa na <html>). Wtedy
   zwijanie nie rusza wysokości dokumentu, czyli nie ma pętli, która wcześniej
   dawała drżenie.

   Poprzednia wersja szła od razu w `fixed` z wysokością gniazda zaszytą
   w arkuszu — i zakładka wyższa od tej liczby (Wywiad: kafelki liczb) chowała
   swój pierwszy nagłówek pod pasem, gdy skrypt nie zadziałał. */
.p-portal .topcover { position:sticky; top:0; z-index:20;
  background:var(--indigo-900); background-image:var(--dot-texture);
  background-size:var(--dot-size); color:#fff; padding:14px 16px 16px; }
.js-okladka .p-portal .topcover { position:fixed; left:0; right:0; }
.p-portal .topcover-brand { display:flex; align-items:center;
  justify-content:space-between; gap:12px; }
.p-portal .topcover .brand { display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:17px; font-weight:700; color:#fff; }
.p-portal .topcover .brand-mark { height:20px; width:auto; }
.p-portal .topcover .menu > summary { color:#fff; }
/* Sam znak hamburgera ma wlasny kolor (.menu-ico), wiec dziedziczenie
   po summary go nie dotyka — na ciemnym pasie byl nieczytelny. */
.p-portal .topcover .menu-ico { color:#fff; }
.p-portal .topcover .menu summary:hover { background:rgba(255,255,255,.12); }
.p-portal .topcover-kicker { margin:10px 0 0; font-family:var(--font-display);
  font-size:11px; font-weight:700; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--indigo-300); }

/* ── Wybór dnia: jedna pigułka ze strzałkami po bokach ── */
.p-portal .topcover .daynav { display:flex; align-items:center; gap:4px;
  margin:12px 0 0; padding:4px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.08); }
.p-portal .topcover .daynav-arrow { height:40px; width:34px; flex:none;
  display:grid; place-items:center; border-radius:var(--radius-sm);
  background:none; border:0; color:#fff; font-size:20px; text-decoration:none; }
.p-portal .topcover .daynav-arrow.disabled { color:var(--indigo-400); }
/* Środek jest kotwicą dla przezroczystego pola daty — stąd position:relative. */
.p-portal .topcover .daynav-mid { position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:1px; padding:3px 0; }
.p-portal .topcover .daynav-label { font-family:var(--font-display);
  font-size:15px; font-weight:700; color:#fff; text-align:center; }
.p-portal .topcover .daynav-hint { font-size:11px; color:var(--indigo-300); }
/* Pole leży NA całym środku i jest niewidoczne: dotknięcie otwiera systemowy
   kalendarz, a bez JS-a nadal działa jak zwykły input. */
.p-portal .topcover .daynav-picker { position:absolute; inset:0; width:100%;
  height:100%; opacity:0; border:0; padding:0; margin:0; background:none;
  color:transparent; cursor:pointer; }

/* ── Szukajka: ciemna pigułka z lupą ── */
.p-portal .topcover .searchbar { margin:10px 0 0; padding:0 14px; gap:9px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.10); }
.p-portal .topcover .searchbar-ico { width:16px; height:16px; flex:none;
  color:var(--indigo-300); }
.p-portal .topcover .searchbar input[type="search"] { flex:1; min-width:0;
  height:42px; border:0; background:none; color:#fff; font-size:15px; }
.p-portal .topcover .searchbar input::placeholder { color:var(--indigo-300); }
.p-portal .topcover .searchbar input:focus { outline:none; }
.p-portal .topcover .search-clear { color:var(--indigo-200); font-size:13px; }

/* ── Nagłówek grupy: numer w kwadracie, nazwa, linia ── */
.p-portal .kind-head { display:flex; align-items:center; gap:10px;
  margin:22px 0 10px; font-size:inherit; text-transform:none; letter-spacing:0; }
.p-portal .kind-nr { flex:none; min-width:24px; height:20px; padding:0 6px;
  display:grid; place-items:center; border-radius:var(--radius-xs);
  background:var(--indigo-100); color:var(--indigo-700);
  font-family:var(--font-display); font-size:11px; font-weight:700;
  font-variant-numeric:tabular-nums; }
.p-portal .kind-head h2 { margin:0; font-family:var(--font-display);
  font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink-900); }
/* Linia dociąga nagłówek do prawej krawędzi — bez niej numer i nazwa wiszą. */
.p-portal .kind-head::after { content:""; flex:1; height:1px;
  background:var(--line); }

/* ── Sygnały grupy w JEDNEJ karcie, rozdzielone liniami ── */
.p-portal .sig-grupa { background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); overflow:hidden; }
.p-portal .sig-grupa .sig { border:0; border-radius:0; box-shadow:none;
  margin:0; padding:14px 16px; }
.p-portal .sig-grupa .sig + .sig { border-top:1px solid var(--line); }

/* ── Alert: biała karta z paskiem pomarańczu, nie pomarańczowe tło ── */
.p-portal .sig-alert { background:#fff; border-color:var(--line);
  border-radius:var(--radius-lg); overflow:hidden; }
.p-portal .sig-alert::before { content:""; position:absolute; inset:0 0 auto 0;
  height:4px; background:var(--orange-500); }
.p-portal .sig-alert .sig-head { margin-top:6px; }
.p-portal .sig-flag { display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:var(--radius-pill);
  background:var(--orange-100); color:var(--orange-600); }

/* ── Plakietka źródła: wersaliki w obrysie indygo ── */
.p-portal .sig .badge { font-family:var(--font-display); font-size:10px;
  font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--indigo-700); background:var(--indigo-50);
  border:1px solid var(--indigo-100); }

/* ── Akcja, która coś WYSYŁA, jest zielona (zasada systemu) ── */
.p-portal .btn-want { color:var(--success-700); border-color:var(--success-700);
  border-radius:var(--radius-pill); background:#fff; font-weight:600; }
.p-portal .btn-want:hover { background:var(--success-bg); }

@media (min-width:768px) {
  .p-portal .topcover { padding:16px 24px 18px; min-height:181px; }
  .p-portal .topcover.zwiniety { min-height:70px; }
  /* Ta sama kolumna co `.feed` na komputerze (1040 px) — pas jest pełnej
     szerokości, ale data i szukajka stoją nad treścią, nie obok niej.

     `width:100%` jest tu KONIECZNE, nie ozdobne: `.topcover` to kontener
     flex-kolumnowy, a w takim automatyczne marginesy poziome wyłączają
     rozciąganie — element zwężał się do swojej treści i centrował. Efekt:
     szerokość paska szła za zawartością zakładki, więc logo przeskakiwało
     w poziomie przy przełączaniu Radar ↔ Wywiad (zgłoszone przez Pawła). */
  .p-portal .topcover-inner { width:100%; max-width:1040px; margin:0 auto; }
  .p-portal .kind-head h2 { font-size:19px; }
}

/* ── Okładka zwija się przy przewijaniu (WSZYSTKIE SZEROKOŚCI) ─────
   Prośba Pawła 19.08: pas ma się zwijać także na komputerze, we wszystkich
   widokach — inaczej na dużym ekranie zabiera pas równie niepotrzebnie.

   Po zwinięciu zostaje TO, czym się w danej zakładce steruje: w radarze
   data i szukajka, w Wywiadzie okno obserwacji i szukajka. Znika pasek
   marki, kicker i kafelki liczb — liczby są ciekawostką, nie narzędziem.

   Zwinięcie jest skokowe, bez przejścia (decyzja Pawła: „nie musi być
   bardzo płynna"). Konstrukcja z gniazdem opisana przy `.topcover`. */
.p-portal .topcover-zwijane { max-height:200px; opacity:1; overflow:hidden; }
.p-portal .topcover.zwiniety { padding-top:8px; padding-bottom:10px; }
.p-portal .topcover.zwiniety .topcover-zwijane { max-height:0; opacity:0; }

/* `overflow:hidden` wycinał rozwinięte menu hamburgera: lista wychodzi
   44 px poniżej przycisku, czyli poza wysokość wrappera, więc nie dało się
   wylogować ani zmienić języka. Przy otwartym menu zdejmujemy przycinanie.
   Warunek `:not(.zwiniety)` jest istotny — w stanie zwiniętym wrapper ma
   max-height:0 i widoczne przepełnienie pokazałoby ukryty pasek marki. */
.p-portal .topcover:not(.zwiniety) .topcover-zwijane.menu-otwarte { overflow:visible; }

/* Data (radar): niższa pigułka, bez podpowiedzi „wybierz datę" — po zwinięciu
   liczy się sam dzień, a pole daty nadal zajmuje cały środek, więc
   dotknięcie otwiera kalendarz tak samo. */
.p-portal .topcover.zwiniety .daynav { margin-top:0; padding:2px; }
.p-portal .topcover.zwiniety .daynav-arrow { height:32px; width:30px; font-size:18px; }
.p-portal .topcover.zwiniety .daynav-mid { padding:0; }
.p-portal .topcover.zwiniety .daynav-label { font-size:13px; }
.p-portal .topcover.zwiniety .daynav-hint { display:none; }

/* Wywiad: po zwinięciu zostają KAFELKI LICZB i szukajka (prośba Pawła
   19.08 — wcześniej chowałem kafelki razem z paskiem marki i zostawał sam
   pasek szukania, co wyglądało na uciętą stronę). Kafelki są tu
   odpowiednikiem daty w radarze: jedna linia kontekstu nad szukajką. */
.p-portal .topcover.zwiniety .statka { padding:4px 9px; }
.p-portal .topcover.zwiniety .statka-l { font-size:13px; }
.p-portal .topcover.zwiniety .statka-p { font-size:8px; }

/* Szukajka: niższa o 8 px. */
.p-portal .topcover.zwiniety .searchbar { margin-top:6px; }
.p-portal .topcover.zwiniety .searchbar input[type="search"] { height:34px; font-size:14px; }

/* ══ WYWIAD — okładka zakładki (wzorzec 2a / d4) ═════════════════════
   Ta sama okładka co w radarze, ale zamiast wyboru dnia niesie okno
   obserwacji i trzy kafelki liczb. Wszystko pod `.p-portal`. */

/* Podpis, nie treść: ten sam krój co kicker, o stopień większy, bez
   wersalików. Wcześniej szedł krojem tekstowym w 12 px i odstawał od
   reszty okładki. */
.p-portal .topcover-okno { margin:8px 0 0; font-family:var(--font-display);
  font-size:12px; font-weight:600; color:var(--indigo-200); }

/* Trzy kafelki w równym rzędzie. Wcześniej te same liczby szły jedną
   zawijaną linią drobnym tekstem — mieściły się, ale nikt ich nie czytał. */
/* `flex:1 1 0` zamiast `flex:1` — bez wyzerowanej bazy szerokość kafelka
   idzie za długością liczby i trzy kafelki wychodzą różne. */
.p-portal .statki { display:flex; gap:8px; margin:8px 0 0; }
.p-portal .statka { flex:1 1 0; min-width:0; display:flex; align-items:baseline;
  gap:6px; padding:6px 10px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.07); }
/* Mniejsze niż w pierwszej wersji: to ciekawostka o skali zbioru, a nie
   liczba, na której ktokolwiek podejmuje decyzję (uwaga Pawła 19.08). */
.p-portal .statka-l { font-family:var(--font-display); font-size:15px;
  font-weight:700; line-height:1.2; color:#fff;
  font-variant-numeric:tabular-nums; }
.p-portal .statka-p { font-family:var(--font-display); font-size:9px;
  font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--indigo-300); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
/* Zieleń tylko na trzecim: to jedyna z trzech liczb, która mówi „jest się
   czym zająć", a nie „ile tego zebraliśmy". */
.p-portal .statka-mocne .statka-l { color:#7fd6a4; }

/* Plakietka beta i nazwa klienta w kickerze okładki — na ciemnym tle
   dotychczasowe kolory (indygo na jasnym) byłyby nieczytelne. */
.p-portal .topcover .wyw-klient { color:#fff; }
/* BETA znika z okładki (uwaga Pawła 19.08): jest już przy zakładce w dolnej
   nawigacji, a w kickerze wymuszała brzydkie łamanie nazwy klienta. */
.p-portal .topcover .wyw-beta { display:none; }

@media (min-width:768px) {
  .p-portal .statki { gap:10px; max-width:460px; }
  .p-portal .statka { padding:7px 12px; }
  .p-portal .statka-l { font-size:16px; }
}

/* ══ WYWIAD — brief tygodniowy (wzorzec 2a) ══════════════════════════
   Wzorzec zdejmuje z pozycji kolorowe tło i listwę, a kierunek niesie
   KROPKA przy nazwie grupy plus numer w kwadracie. Powód jest czytelniczy:
   przy pięciu pozycjach dwa bloki kolorowego tła zabijały hierarchię —
   oko widziało pasy, nie treść. Wszystko pod `.p-portal`. */

/* Nazwa grupy z kropką: „● IDŹ W TO", „● CZEGO UNIKAĆ" */
.p-portal .wyw-dir { display:flex; align-items:center; gap:7px;
  margin:16px 0 6px; font-family:var(--font-display); font-size:10px;
  font-weight:700; letter-spacing:var(--tracking-caps); }
.p-portal .wyw-dir::before { content:""; width:7px; height:7px; flex:none;
  border-radius:50%; background:currentColor; }
.p-portal .wyw-dir-idz { color:var(--success-700); }
.p-portal .wyw-dir-unikaj { color:var(--maroon-500); }

/* Pozycja: bez tła i bez listwy, rozdzielona linią jak sygnały radaru. */
.p-portal .wyw-wniosek { border:0; border-radius:0; background:none;
  padding:12px 0; margin:0; }
.p-portal .wyw-wniosek + .wyw-wniosek { border-top:1px solid var(--line); }
.p-portal .wyw-wniosek-idz,
.p-portal .wyw-wniosek-unikaj { border-left:0; background:none; }

/* Numer w kwadracie — ta sama forma co numer sekcji, o stopień mniejsza. */
.p-portal .wyw-wniosek-claim { display:flex; gap:10px; align-items:flex-start;
  font-family:var(--font-display); font-size:16px; font-weight:600;
  line-height:1.4; color:var(--ink-900); }
.p-portal .wyw-wniosek-nr { flex:none; min-width:22px; height:22px; margin:2px 0 0;
  display:grid; place-items:center; border-radius:var(--radius-xs);
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.p-portal .wyw-wniosek-idz .wyw-wniosek-nr { background:var(--success-bg);
  color:var(--success-700); }
.p-portal .wyw-wniosek-unikaj .wyw-wniosek-nr { background:var(--maroon-100);
  color:var(--maroon-500); }

/* Akcja i „Dlaczego" w jednym wierszu (wzorzec): decyzja i uzasadnienie
   stoją obok siebie, zamiast rozpychać kartę na dwa piętra. */
.p-portal .wyw-akcja { display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; margin-top:10px; }
.p-portal .wyw-akcja .btn-want { display:inline-flex; align-items:center; }
/* Pierwsza pozycja „idź w to" niesie akcję WYPEŁNIONĄ — w briefie jest
   jedna rzecz najważniejsza i ma być widać którą. */
.p-portal .wyw-wniosek-idz:first-of-type .wyw-akcja .btn-want {
  background:var(--success-700); border-color:var(--success-700); color:#fff; }
.p-portal .wyw-wniosek-idz:first-of-type .wyw-akcja .btn-want:hover {
  background:var(--success-bg); color:var(--success-700); }

/* Selektor okresu: wiersz „OKRES" + wartość po prawej, zamiast etykiety
   nad natywnym rozwijaniem na całą szerokość. */
.p-portal .wyw-okresy { display:flex; align-items:center; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.p-portal .wyw-okres-label { font-family:var(--font-display); font-size:10px;
  font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--ink-500); }
.p-portal .wyw-okresy select { flex:1; min-width:0; margin-left:auto;
  border:0; background:none; padding:0; text-align:right;
  font-family:var(--font-body); font-size:14px; font-weight:600;
  color:var(--ink-900); }

/* Rozwinięte „Dlaczego" bierze cały wiersz — w wąskiej kolumnie obok
   przycisku uzasadnienie łamałoby się po dwa słowa. */
.p-portal .wyw-akcja .wyw-why { margin:0; }
.p-portal .wyw-akcja .wyw-why[open] { flex-basis:100%; }
.p-portal .wyw-akcja .wyw-why > summary { font-size:13px; font-weight:600;
  color:var(--ink-600); }

/* ══ WYWIAD — poprawki po przekliknięciu (Paweł 19.08) ═══════════════ */

/* Kotwica pigułek (#dowody) i karty: zatrzymać się POD paskiem. Wysokość
   zwiniętego pasa wpisuje skrypt; 110 px to zapas na wypadek jego braku
   (wcześniej stało tu 74 px pod stary, niski topbar — treść wjeżdżała pod
   okładkę przy Liczbach, Terminach i Mechanizmach). */
.p-portal #dowody,
.p-portal .sig,
.p-portal .post,
.p-portal .wyw-sec { scroll-margin-top:calc(var(--okladka-zwinieta, 110px) + 14px); }

/* „Na horyzoncie": chip daty i tekst na jednej linii bazowej. Chip miał
   własny rytm i wisiał kilka pikseli nad pierwszym wierszem. */
.p-portal .wyw-term { display:flex; align-items:flex-start; gap:12px; }
.p-portal .wyw-term-chip { flex:none; margin-top:1px; }
.p-portal .wyw-term-body { flex:1; min-width:0; }

/* Plakietka aktora NAD treścią, nie wewnątrz zdania. Wpleciona w tekst
   rozbijała zdanie w losowym miejscu — przy dwóch plakietkach robił się
   bałagan (uwaga Pawła). */
.p-portal .wyw-term-body .wyw-claim { display:flex; flex-direction:column;
  align-items:flex-start; gap:6px; }
.p-portal .wyw-term-body .wyw-claim .badge { order:-1; }

/* Selektor okresu: własny obrys i strzałka zamiast natywnego pola
   rozciągniętego na całą szerokość — rozwinięta lista wyglądała jak
   element z innego systemu. */
.p-portal .wyw-okresy select { flex:0 1 auto; margin-left:auto;
  padding:6px 28px 6px 10px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2354526a' stroke-width='2'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  text-align:left; cursor:pointer; }
.p-portal .wyw-okresy select:focus { outline:none; border-color:var(--blue-500);
  box-shadow:var(--focus-ring); }

/* Komputer: brief obok horyzontu, profile pod nimi (wzorzec d4). Na
   telefonie grid ma jedną kolumnę, więc kolejność zostaje ta sama i nie ma
   drugiego układu do utrzymania. `align-items:start` — inaczej krótsza
   kolumna rozciąga swoją kartę na wysokość dłuższej. */
.p-portal .wyw-kolumny { display:grid; gap:0; }
@media (min-width:768px) {
  .p-portal .wyw-kolumny { grid-template-columns:1fr 1fr; gap:24px;
    align-items:start; }
}

/* Jedna wysokość pasa we WSZYSTKICH zakładkach — inaczej przy przełączaniu
   Radar ↔ Wywiad treść skacze o kilkanaście pikseli (uwaga Pawła 19.08).
   Wartości biorą się z zakładki najwyższej (radar: wybór dnia jest wyższy
   niż okno obserwacji). `min-height`, nie `height` — zakładka o bogatszej
   okładce ma prawo urosnąć, nie ma prawa być niższa. */
/* Wyrównanie idzie NA PASIE, nie na jego wnętrzu: `min-height:inherit`
   na wewnętrznym kontenerze doliczało padding drugi raz i pas rósł
   z 216 do 246 px.

   Zawartość trzyma się GÓRY, a luz z wyrównania zostaje pod spodem.
   Wcześniej było odwrotnie (dosuwanie do dołu) i logo skakało o kilka
   pikseli między zakładkami: Wywiad ma o wiersz więcej („Okno obserwacji"),
   więc jego wyższa zawartość zaczynała się wyżej niż niższa zawartość
   radaru. Przy dosuwaniu do góry punkt startu jest ten sam zawsze. */
.p-portal .topcover { min-height:226px; display:flex; flex-direction:column;
  justify-content:flex-start; }
.p-portal .topcover.zwiniety { min-height:104px; }
/* Wyrównanie to REALNE maksimum z obu zakładek, nie zapas na oko:
   telefon 226/104, komputer 181/70 (zmierzone). Wcześniej stała tu
   jedna wartość 232 dla obu szerokości i na komputerze zostawało
   ~50 px zbędnej czerni pod paskiem. */

/* ── Komputer: stały stos, wybory w jednym wierszu ─────────────────
   Struktura wg Pawła (19.08): logo + AIContentWorks, pod spodem nazwa
   klienta · usługa, poniżej elementy wyboru (data, szukajka).

   Wcześniej stał tu grid dwukolumnowy i to był błąd: kolumny układały się
   inaczej przy różnej zawartości zakładek, więc logo SKAKAŁO w poziomie
   przy przełączaniu Radar ↔ Wywiad. Zwykły stos jest stabilny z definicji —
   ten sam układ niezależnie od tego, co zakładka wkłada w wiersz wyboru. */
.p-portal .topcover-sterowanie { display:flex; flex-direction:column; gap:10px; }
@media (min-width:768px) {
  /* Wybory obok siebie: data (radar) albo kafelki (Wywiad) po lewej,
     szukajka wypełnia resztę wiersza. */
  .p-portal .topcover-sterowanie { flex-direction:row; align-items:center;
    gap:16px; margin-top:12px; }
  /* `flex:0 0 auto` + min-width: bez tego szukajka (rosnąca) ściskała
     kafelki i podpisy urywały się na „OBSER…". Kafelki zostają równe
     między sobą, ale grupa nie oddaje już swojej szerokości. */
  .p-portal .topcover-sterowanie > .daynav { flex:0 0 auto; margin:0; }
  .p-portal .topcover-sterowanie > .statki { flex:0 0 auto; margin:0;
    min-width:470px; }
  .p-portal .topcover-sterowanie > .searchbar { flex:1 1 auto; min-width:260px;
    margin:0; }
  .p-portal .statki { max-width:none; }
  .p-portal .daynav { min-width:280px; }
}

/* Nazwa klienta w kickerze: normalna wielkość liter, sekcja wersalikami.
   Kicker jako całość jest UPPERCASE, więc nazwa musi ten zapis cofnąć —
   inaczej „Rohde & Schwarz Polska" krzyczy tak samo jak etykieta sekcji. */
.p-portal .topcover-klient { text-transform:none; letter-spacing:0;
  color:#fff; }

/* Sekcja „Profile i dane" ma STAŁE zaczepienie przy przełączaniu pigułek.
   Problem (Paweł 19.08): każdy widok ma inną długość, a skok do kotwicy
   #dowody udaje się tylko wtedy, gdy POD nią zostało dość miejsca do
   przewinięcia. Przy krótkim widoku (Liczby, Terminy) przeglądarka nie ma
   dokąd przewinąć, więc sekcja ląduje raz u góry, raz w połowie ekranu —
   i to jest to „ściąganie w dół" i skakanie.

   Minimalna wysokość na jeden ekran gwarantuje, że kotwica ZAWSZE dojdzie
   do góry, niezależnie od tego, ile pozycji ma dany widok. Odejmujemy
   zwinięty pasek i dolną nawigację, żeby nie robić zbędnego przewijania. */
/* Zapas NA KOŃCU STRONY, nie w sekcji. Wcześniej stało tu
   `min-height:100vh` na #dowody i owszem, kotwica dochodziła do góry — ale
   przy krótkim widoku (Konkurenci, Liczby) robiła się ogromna pusta dziura
   między pigułkami a kartami. Ten sam efekt daje przewijalny zapas pod
   treścią: kotwica ma dokąd doskoczyć, a pustka ląduje pod ostatnią kartą,
   gdzie czyta się jak zwykły margines. */
.p-portal .feed.wyw { padding-bottom:70vh; }

/* Podpisy kafelków nie mają się urywać na szerokim ekranie — tam jest
   miejsce, a „OBSER…" wygląda jak usterka. */
/* Podpis kafelka zostaje przycinany. Zdjęcie przycinania (próba naprawy
   „OBSER…") wypuszczało tekst POZA kafelek — miejsce robi się szerszą
   kolumną, nie wyłączonym przycinaniem. */
@media (min-width:768px) {
  .p-portal .statka { padding:7px 14px; }
}

/* ══ KALENDARZ — tydzień jako jedna karta (wzorzec 4a) ═══════════════
   Zamiast siedmiu ramek jedna pod drugą: jedna karta, dni rozdzielone
   liniami. Dzień bez postów to JEDNA linijka „Wolne" z akcjami — cztery
   puste dni zajmują tyle, co wcześniej jeden. Wszystko pod `.p-portal`. */
.p-portal .week { display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); overflow:hidden; }
.p-portal .wdzien { display:block; padding:12px 14px; }
.p-portal .wdzien + .wdzien { border-top:1px solid var(--line); }
/* Dzień pusty ma niższy rytm — to jest cała jego treść. */
.p-portal .wdzien.is-pusty { padding:8px 14px; }

.p-portal .wdzien-head { display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; }
/* Data w kwadracie: skrót dnia nad numerem, jak w kalendarzu papierowym. */
.p-portal .wdzien-data { flex:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; width:34px; padding:3px 0;
  border-radius:var(--radius-sm); background:var(--ink-50);
  color:var(--ink-600); text-decoration:none; line-height:1.1; }
.p-portal .wdzien-wd { font-family:var(--font-display); font-size:8px;
  font-weight:700; letter-spacing:var(--tracking-caps); }
.p-portal .wdzien-dnum { font-family:var(--font-display); font-size:15px;
  font-weight:700; font-variant-numeric:tabular-nums; }
/* Dziś: ta sama forma, kolor marki — bez dodatkowego napisu w kwadracie. */
.p-portal .wdzien.is-today .wdzien-data { background:var(--indigo-700); color:#fff; }

.p-portal .wdzien-nazwa { font-family:var(--font-display); font-size:15px;
  font-weight:700; color:var(--ink-900); text-decoration:none; }
.p-portal .wdzien.is-pusty .wdzien-nazwa { font-weight:600;
  color:var(--ink-600); }
.p-portal .wdzien-wolne { color:var(--ink-400); font-size:14px; }
/* Licznik i akcje trzymają się prawej krawędzi. */
.p-portal .wdzien-licznik { margin-left:auto; font-size:12px;
  color:var(--ink-500); }
.p-portal .wdzien-akcje { margin-left:auto; display:flex; gap:8px;
  flex-wrap:wrap; }
.p-portal .wdzien-akcje-dol { margin:10px 0 0; }
.p-portal .wdzien-act { padding:5px 11px; border:1px solid var(--success-700);
  border-radius:var(--radius-pill); background:#fff; color:var(--success-700);
  font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap; }
.p-portal .wdzien-act:hover { background:var(--success-bg); }

/* Posty dnia: zwięzłe karty, kanał + skrót treści. */
.p-portal .wdzien .wcol-posts { display:grid; gap:8px; margin:10px 0 0; }
.p-portal .wdzien .wpost { display:block; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--ink-50); text-decoration:none; }
.p-portal .wdzien .wpost-top { display:flex; align-items:center; gap:6px;
  margin-bottom:5px; }
.p-portal .wdzien .wpost-snip { display:block; font-size:14px; line-height:1.45;
  color:var(--ink-900); }
.p-portal .wdzien .wpost-time { font-size:11px; color:var(--ink-500); }
.p-portal .wdzien .prov-dot { margin-left:auto; }

/* Dzień pusty NIE pokazuje pełnej nazwy — niesie ją kwadrat z datą (PON 17).
   Wzorzec też jej tam nie ma i to nie jest przypadek: „Poniedziałek" plus
   „Wolne" plus dwie akcje nie mieszczą się w jednej linii na 375 px
   i akcje spadały do drugiego wiersza, czyli pusty dzień znowu rósł. */
.p-portal .wdzien.is-pusty .wdzien-nazwa { display:none; }

/* „Dziś" w pigułce tygodnia: chip, nie goły link. */
.p-portal .daynav-dzis { display:inline-block; margin-top:2px; padding:1px 10px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.16);
  color:#fff; font-size:11px; font-weight:600; text-decoration:none; }
.p-portal .daynav-dzis:hover { background:rgba(255,255,255,.26); }
.p-portal .topcover.zwiniety .daynav-dzis { display:none; }

/* Zakładka bez szukajki (kalendarz) ma w wierszu wyboru jeden element.
   Bez tego pigułka tygodnia stała wąsko przy lewej krawędzi, a reszta pasa
   zostawała pusta — pas wyglądał na rozsypany. Samotny element wypełnia
   wiersz do sensownej szerokości, tak jak szukajka w pozostałych zakładkach. */
@media (min-width:768px) {
  .p-portal .topcover-sterowanie > :only-child { flex:1 1 auto; max-width:560px; }
}

/* Kalendarz trzyma TĘ SAMĄ kolumnę co radar i Wywiad (1040 px). Wcześniej
   `.weekwrap` miał 1200, a pas okładki 1040 — treść i pasek zaczynały się
   w innych miejscach i przy przełączaniu zakładek wszystko przeskakiwało
   w bok (zgłosił Paweł). Kolumna 1200 miała sens przy siedmiu kolumnach
   tygodnia; do listy dni jest za szeroka, a kolumny i tak dostaną własną
   szerokość w porcji o układzie poziomym. */
.p-portal .weekwrap { max-width:1040px; }

/* Miejsce na pionowy pasek przewijania rezerwowane ZAWSZE, także gdy strona
   jest krótka. Bez tego strona długa (radar, Wywiad) ma pasek i jest o ~15 px
   węższa niż krótka (kalendarz z pustym tygodniem), a że treść jest
   wyśrodkowana, przy przełączaniu zakładek przesuwała się o połowę tej
   różnicy w bok. Zgłoszone przez Pawła i przez niego trafnie zdiagnozowane.

   Reguła jest globalna, nie pod `.p-portal`: to samo dotyczy panelu zespołu,
   a rezerwacja miejsca niczego nie przemalowuje — nie ma tu ryzyka, przed
   którym chroni zakresowanie. */
html { scrollbar-gutter: stable; }

/* Metryka obok wyboru (kalendarz): wypełnia puste tło po prawej i nie spycha
   pigułki o wiersz niżej niż w radarze — dzięki temu wybór daty i wybór
   tygodnia stoją na tej samej wysokości w obu zakładkach. */
.p-portal .topcover-okno-obok { margin:0; }
@media (min-width:768px) {
  /* Metryka WYPEŁNIA resztę wiersza i centruje się w niej. Wcześniej szła
     `margin-left:auto` do prawej krawędzi i między pigułką a tekstem
     zostawała dziura — tekst wisiał sam przy brzegu. */
  .p-portal .topcover-sterowanie > .topcover-okno-obok { flex:1 1 auto;
    text-align:center; }
}

/* ══ KALENDARZ — dwa układy z JEDNEGO HTML-a ═════════════════════════
   „kolumny" = dni obok siebie, „lista" = dni jeden pod drugim. Przełączane
   wyłącznie arkuszem, bez drugiego zestawu kart w drzewie. Powód nie jest
   estetyczny: przy dwóch kopiach każdy post miałby dwa razy ten sam
   `data-id` i `data-move-url`, a drag-and-drop (produkcja od 30.07)
   trafiałby w niewłaściwą kopię. Jeden HTML = te same zaczepienia. */
.p-portal .weekwrap.uklad-kolumny .week { display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(170px, 1fr); overflow-x:auto; align-items:start;
  -webkit-overflow-scrolling:touch; }
.p-portal .weekwrap.uklad-kolumny .wdzien { padding:10px 10px 12px; }
.p-portal .weekwrap.uklad-kolumny .wdzien + .wdzien { border-top:0;
  border-left:1px solid var(--line); }
/* W kolumnie nagłówek dnia układa się pionowo, a akcje schodzą pod posty. */
.p-portal .weekwrap.uklad-kolumny .wdzien-head { flex-direction:column;
  align-items:flex-start; gap:6px; }
.p-portal .weekwrap.uklad-kolumny .wdzien-licznik,
.p-portal .weekwrap.uklad-kolumny .wdzien-akcje { margin-left:0; }
.p-portal .weekwrap.uklad-kolumny .wdzien.is-pusty .wdzien-nazwa { display:block; }
.p-portal .weekwrap.uklad-kolumny .wdzien-act { font-size:11px; padding:4px 9px; }

/* Przełącznik układu — tylko komputer. Na telefonie decyduje orientacja,
   więc przycisk byłby tam martwy. */
.p-portal .uklad-przel { display:none; }
.p-portal .uklad-opt { padding:5px 12px; border-radius:var(--radius-pill);
  color:var(--indigo-200); font-size:12px; font-weight:600;
  text-decoration:none; }
.p-portal .uklad-opt.is-on { background:rgba(255,255,255,.16); color:#fff; }

/* Podpowiedź o obrocie — tylko telefon w pionie. */
.p-portal .obroc-hint { display:none; align-items:center; gap:7px;
  margin:0 0 12px; font-size:12px; color:var(--ink-500); }
.p-portal .obroc-hint svg { width:15px; height:15px; flex:none; }

@media (max-width:767px) {
  /* Telefon: orientacja decyduje, wybór z sesji nie ma tu znaczenia. */
  .p-portal .weekwrap.uklad-kolumny .week,
  .p-portal .weekwrap.uklad-lista .week { display:block; }
  .p-portal .weekwrap .wdzien + .wdzien { border-top:1px solid var(--line);
    border-left:0; }
  .p-portal .weekwrap .wdzien-head { flex-direction:row; align-items:center;
    gap:10px; }
  .p-portal .weekwrap .wdzien-licznik,
  .p-portal .weekwrap .wdzien-akcje { margin-left:auto; }
  .p-portal .obroc-hint { display:flex; }
}

/* Telefon POZIOMO: kalendarz, czyli dni obok siebie. Warunek spłaszczony
   (`and`), a nie zagnieżdżony — zagnieżdżone media query jest poprawne, ale
   potyka się o nie prosty parser arkusza w narzędziu do zrzutów, więc cała
   reszta pliku przestawała działać. */
@media (max-width:767px) and (orientation:landscape) {
  .p-portal .weekwrap .week { display:grid; grid-auto-flow:column;
    grid-auto-columns:minmax(150px, 1fr); overflow-x:auto; align-items:start; }
  .p-portal .weekwrap .wdzien + .wdzien { border-top:0;
    border-left:1px solid var(--line); }
  .p-portal .weekwrap .wdzien-head { flex-direction:column;
    align-items:flex-start; gap:6px; }
  .p-portal .weekwrap .wdzien-licznik,
  .p-portal .weekwrap .wdzien-akcje { margin-left:0; }
  .p-portal .obroc-hint { display:none; }
}

@media (min-width:768px) {
  .p-portal .uklad-przel { display:flex; gap:2px; flex:0 0 auto;
    padding:2px; border-radius:var(--radius-pill);
    background:rgba(255,255,255,.08); }
}

/* Kolumny biorą CAŁĄ szerokość ekranu, lista zostaje w kolumnie 1040 px.
   Zwężenie `.weekwrap` do 1040 zrobiłem, żeby zgrać treść z paskiem — i dla
   listy jest dobre, ale siedem kolumn się w tym nie mieści i dostawało
   poziomy pasek przesuwania (zgłosił Paweł). Tydzień jest artefaktem
   szerokim z natury: siedem dni ma się zmieścić bez przewijania, tak jak
   w starym widoku. Pasek marki zostaje na swoim 1040 — jest zamknięty. */
@media (min-width:768px) {
  .p-portal .weekwrap.uklad-kolumny { max-width:none; padding-left:24px;
    padding-right:24px; }
  /* `repeat(7, minmax(0,1fr))` zamiast auto-flow: siedem równych kolumn
     dzielących dostępną szerokość, bez minimum, czyli bez przewijania. */
  .p-portal .weekwrap.uklad-kolumny .week { grid-auto-flow:row;
    grid-template-columns:repeat(7, minmax(0, 1fr)); overflow-x:visible; }
  /* Kolumna dostaje wysokość, żeby pusty dzień nie był paskiem — w starym
     widoku to właśnie dawało kalendarzowi czytelną siatkę. */
  .p-portal .weekwrap.uklad-kolumny .wdzien { min-height:190px; }
}

/* ══ WYWIAD — oznaczenia kolorem na kartach (v12) ═════════════════════
   Po co: zakładkę czyta kilka osób po stronie klienta, a szef potrzebuje
   powiedzieć „tym się zajmij" bez wychodzenia do maila. Ten sam gest, co
   w radarze i kalendarzu — strzałka w rogu, cztery barwy, znaczenia nie
   narzucamy. Wszystko pod `.p-portal`: `.sig` dzielimy z panelem zespołu.

   Karty `.sig` (terminy, liczby, wyniki) maluje reguła wspólna z radarem
   (`.sig[data-tag]`), więc tutaj domalowujemy TYLKO te bez chromu: pozycję
   briefu, wpis osi czasu i outlook. Kolory idą przez zmienne, żeby jedna
   reguła malowania obsłużyła trzy różne kształty kart. */

.p-portal .oznaczalna { position:relative; }

/* Miejsce na strzałkę: pierwszy wiersz karty nie ma pod nią wjeżdżać. */
.p-portal .wyw-wniosek-claim,
.p-portal .wyw-num .wyw-num-value,
.p-portal .sig > .wyw-date { padding-right:30px; }
.p-portal .wyw-term-body { padding-right:26px; }
.p-portal .wyw-tl-item { padding-right:30px; }
.p-portal .wyw-outlook { padding-right:34px; }

/* Karty bez własnego marginesu wewnętrznego trzymają strzałkę przy krawędzi
   treści, nie 10 px w środku — inaczej wisi nad tekstem. */
.p-portal .wyw-wniosek > .tagpick { top:8px; right:0; }
.p-portal .wyw-tl-item > .tagpick { top:-3px; right:0; }
.p-portal .wyw-outlook > .tagpick { top:4px; right:4px; }

.p-portal .oznaczalna[data-tag="amber"] { --tag-bg:var(--tag-amber-bg); --tag-line:var(--tag-amber-line); }
.p-portal .oznaczalna[data-tag="sage"]  { --tag-bg:var(--tag-sage-bg);  --tag-line:var(--tag-sage-line); }
.p-portal .oznaczalna[data-tag="azure"] { --tag-bg:var(--tag-azure-bg); --tag-line:var(--tag-azure-line); }
.p-portal .oznaczalna[data-tag="plum"]  { --tag-bg:var(--tag-plum-bg);  --tag-line:var(--tag-plum-line); }

/* Tint + listwa 3 px (język systemu). Ujemny margines z równym paddingiem:
   tło rozlewa się poza kolumnę treści, ale TEKST zostaje dokładnie tam,
   gdzie stał — oznaczenie nie przesuwa listy w poziomie. */
.p-portal .wyw-wniosek[data-tag],
.p-portal .wyw-tl-item[data-tag] { background:var(--tag-bg);
  box-shadow:inset 3px 0 0 var(--tag-line); border-radius:var(--radius-sm); }
.p-portal .wyw-wniosek[data-tag] { margin-inline:-12px; padding-inline:12px; }
.p-portal .wyw-tl-item[data-tag] { margin-left:-10px; padding-left:10px; }
/* Kropka osi czasu wisi na lewej krawędzi WPISU, więc po poszerzeniu bloku
   o 10 px musi zjechać o tyle samo, żeby nadal siedziała na linii. */
.p-portal .wyw-tl-item[data-tag]::before { left:-13px; }
/* Outlook ma własną listwę (indygo) — podmieniamy jej kolor zamiast dokładać
   drugą, inaczej blok dostałby dwie kreski jedna na drugiej. */
.p-portal .wyw-outlook[data-tag] { background:var(--tag-bg);
  border-left-color:var(--tag-line); }

/* Kropki w nagłówku profilu: co jest oznaczone w środku zwiniętej karty.
   Pusty kontener (nic nieoznaczonego) znika — stoi w HTML-u zawsze, bo
   dopisuje do niego skrypt po zapisie w tle. */
.p-portal .wyw-actor-dots { display:inline-flex; align-items:center; gap:3px;
  flex:none; }
.p-portal .wyw-actor-dots:empty { display:none; }
.p-portal .wyw-actor-dots i { width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(28,26,51,.14); }
.p-portal .wyw-actor-dots .dot-amber { background:var(--tag-amber-dot); }
.p-portal .wyw-actor-dots .dot-sage  { background:var(--tag-sage-dot); }
.p-portal .wyw-actor-dots .dot-azure { background:var(--tag-azure-dot); }
.p-portal .wyw-actor-dots .dot-plum  { background:var(--tag-plum-dot); }

/* ══ EKRANY DODAWANIA — „Nowy post" i „Zamów post" (wzorce 5a–5d) ═════
   Zasada z obu wzorców: na wejściu widać TYLKO to, co trzeba wypełnić.
   Reszta (godzina, plik, kolor / dzień, załącznik) siedzi pod jednym
   wierszem „Więcej opcji" i rozwija się przez `details`, czyli działa bez
   JS-a. Wszystko pod `.p-portal` — `button`, `select`, `input` i pola
   dzielimy z panelem zespołu, którego ta warstwa nie ma prawa przemalować. */

/* ── Okładka ekranu formularza: chip powrotu, tytuł, jedno zdanie ── */
/* Zwija się TYLKO pas marki (60 px), bo chip i tytuł mówią, gdzie jesteś. */
.p-portal .topcover-form .topcover-zwijane { max-height:64px; }
.p-portal .okladka-form { display:flex; flex-direction:column;
  align-items:flex-start; gap:8px; }
.p-portal .okladka-chip { display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px 7px 11px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12); color:#fff; text-decoration:none;
  font-family:var(--font-display); font-size:13px; font-weight:600; }
.p-portal .okladka-chip:hover { background:rgba(255,255,255,.2); }
.p-portal .okladka-tytul { margin:0; color:#fff; font-size:26px;
  line-height:1.15; letter-spacing:-.02em; }
.p-portal .okladka-zdanie { margin:0; color:var(--indigo-200);
  font-size:14px; line-height:1.45; max-width:46ch; }

/* ── Karta formularza ── */
.p-portal .karta-form { background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:18px 16px; display:grid; gap:14px; }
.p-portal .pole { display:grid; gap:7px; }
.p-portal .pole-etykieta { font-family:var(--font-display); font-size:10px;
  font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--ink-500); }
.p-portal .karta-form select,
.p-portal .karta-form input[type="date"],
.p-portal .karta-form input[type="time"] { height:48px;
  border-radius:var(--radius-md); border:1px solid var(--line); font-size:15px; }
.p-portal .karta-form textarea { border-radius:var(--radius-md);
  border:1px solid var(--line); font-size:15px; line-height:1.55;
  padding:12px 14px; }

/* Licznik znaków pod polem — prawa krawędź, drobno, bez krzyku. */
.p-portal .licznik { margin:-6px 0 0; text-align:right; font-size:12px;
  color:var(--ink-500); font-variant-numeric:tabular-nums; }
.p-portal .licznik.is-ok { color:var(--success-700); font-weight:600; }

/* ── „Więcej opcji" ── */
.p-portal .wiecej { border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--ink-50); }
.p-portal .wiecej > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:12px; padding:11px 14px; }
.p-portal .wiecej > summary::-webkit-details-marker { display:none; }
.p-portal .wiecej > summary::marker { content:""; }
.p-portal .wiecej-tekst { display:grid; gap:2px; flex:1; min-width:0; }
.p-portal .wiecej-tytul { font-family:var(--font-display); font-size:14px;
  font-weight:600; color:var(--indigo-900); }
.p-portal .wiecej-hint { font-size:12px; color:var(--ink-500); }
.p-portal .wiecej-strzalka { flex:none; color:var(--ink-500); font-size:14px;
  transition:transform .15s ease; }
.p-portal .wiecej[open] .wiecej-strzalka { transform:rotate(180deg); }
.p-portal .wiecej-tresc { display:grid; gap:14px; padding:2px 14px 14px; }

/* ── Wybór pliku ── */
/* `position:relative` nie jest ozdobą: ukryte pole pliku leży bezwzględnie,
   więc bez tego zaczepiłoby się o pierwszy pozycjonowany element wyżej. */
.p-portal .plik { position:relative; display:flex; align-items:center; gap:12px;
  cursor:pointer; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--radius-md); background:#fff; }
.p-portal .plik:hover { border-color:var(--ink-300); }
/* Natywne pole zostaje w układzie (klawiatura, czytniki ekranu), tylko go
   nie widać — klikalna jest cała ramka, bo to `label`. */
.p-portal .plik input[type="file"] { position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none; }
.p-portal .plik-ikona { flex:none; width:34px; height:34px; display:grid;
  place-items:center; border-radius:var(--radius-sm); background:var(--ink-100);
  color:var(--ink-700); font-size:15px; }
.p-portal .plik-tekst { display:grid; gap:1px; font-size:14px; }
.p-portal .plik-tekst strong { font-weight:600; color:var(--text-link); }
.p-portal .plik-tekst .muted { font-size:12px; }
.p-portal .plik-lista { margin:0; display:grid; gap:6px; }
.p-portal .plik-chip { display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff; font-size:13px; }
.p-portal .plik-chip-nazwa { flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.p-portal .plik-chip-rozmiar { flex:none; color:var(--ink-500); font-size:12px; }
.p-portal .plik-chip-usun { flex:none; min-height:0; padding:2px 7px; border:0;
  background:none; color:var(--ink-500); font-size:16px; line-height:1; }
.p-portal .plik-chip-usun:hover { color:var(--maroon-500); background:none;
  filter:none; }
.p-portal .store-line { margin:0; font-size:12px; }

/* ── Kolor oznaczenia w formularzu (radio, więc działa bez JS-a) ── */
.p-portal .kolorki { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.p-portal .kolorek { position:relative; display:inline-flex; cursor:pointer; }
.p-portal .kolorek input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.p-portal .kolorek-kropka { width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(28,26,51,.14); display:block; }
.p-portal .kolorek input:checked + .kolorek-kropka {
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink-700); }
.p-portal .kolorek input:focus-visible + .kolorek-kropka {
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--indigo-700); }
.p-portal .kolorek-brak { position:relative; display:inline-flex;
  align-items:center; cursor:pointer; padding:7px 13px;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:#fff; font-size:13px; color:var(--ink-700); }
.p-portal .kolorek-brak input { position:absolute; inset:0; opacity:0;
  cursor:pointer; }
.p-portal .kolorek-brak:has(input:checked) { border-color:var(--ink-700);
  color:var(--ink-900); font-weight:600; }

/* ── Przycisk główny: pełna szerokość, zielony gdy jest co wysłać ── */
.p-portal .btn-glowny { width:100%; min-height:52px; border:0;
  border-radius:var(--radius-pill); background:var(--success-700); color:#fff;
  font-family:var(--font-display); font-size:16px; font-weight:600; }
.p-portal .btn-glowny:hover { filter:brightness(1.07); }
.p-portal .btn-glowny:disabled { background:var(--ink-100); color:var(--ink-400);
  opacity:1; filter:none; }

/* ── Pasek drogi do progu w zamówieniu (wzorce 5c/5d) ── */
.p-portal .order-pasek { height:4px; border-radius:var(--radius-pill);
  background:var(--ink-100); overflow:hidden; margin-top:-6px; }
.p-portal .order-pasek-fill { display:block; height:100%; width:0;
  border-radius:var(--radius-pill); background:var(--ink-300);
  transition:width .15s ease; }
.p-portal .order-pasek-fill.is-ok { background:var(--success-700); }
.p-portal .order-count { margin:0; font-size:13px; line-height:1.5; }
.p-portal .order-licznik { margin:0; }

/* ── Kwit po wysłaniu zamówienia ── */
.p-portal .karta-kwit { justify-items:center; text-align:center;
  padding:28px 20px; }
.p-portal .kwit-ptaszek { margin:0; width:46px; height:46px; display:grid;
  place-items:center; border-radius:50%; background:var(--success-bg);
  color:var(--success-700); font-size:22px; font-weight:700; }
.p-portal .karta-kwit h2 { margin:0; font-size:20px; }
.p-portal .karta-kwit p { margin:0; }

@media (min-width:768px) {
  /* Formularz nie rozlewa się na całą szerokość — czyta się go jak kartkę. */
  .p-portal .feed .karta-form { max-width:640px; padding:22px 20px; }
  .p-portal .okladka-tytul { font-size:30px; }
}

/* ══ WIDOK DNIA JAKO PLANER (wzorce 6a/6b, d2) ═══════════════════════
   Karta posta to jedyne miejsce w panelu, gdzie klient coś ROZSTRZYGA.
   Stąd cała robota tej porcji: jedna decyzja ma być widoczna, reszta
   (zapis roboczy, szczegóły, uwaga, usunięcie) schodzi o poziom niżej.
   Wszystko pod `.p-portal` — `.post`, `.badge` i `button` dzielimy
   z panelem zespołu. */

/* ── Karta ── */
.p-portal .day-posts .post,
.p-portal .feed > .day-split .post { border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:16px 14px; }
.p-portal .post-head { display:flex; align-items:center; gap:7px;
  flex-wrap:wrap; padding-right:34px; margin-bottom:12px; }
.p-portal .post-time { font-family:var(--font-display); font-size:12px;
  font-weight:700; color:var(--ink-500); font-variant-numeric:tabular-nums; }

/* Plakietki w jednym stroju: wersaliki, obrys, bez kolorowych plam.
   Kolor niesie TYLKO oznaczenie klienta i stan „zatwierdzone". */
.p-portal .post-head .badge,
.p-portal .post-head .status-pill,
.p-portal .post-head .prov-badge { display:inline-flex; align-items:center;
  height:22px; padding:0 9px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-family:var(--font-display); font-size:9px; font-weight:700;
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--ink-700); }
.p-portal .post-head .status-pill.appr { border-color:var(--success-700);
  color:var(--success-700); background:var(--success-bg); }
.p-portal .post-head .status-pill.pub { border-color:var(--ink-300);
  color:var(--ink-500); }
.p-portal .post-head .prov-badge.rev { border-color:var(--success-700);
  color:var(--success-700); background:var(--success-bg); }

/* ── Treść: pole edycji jako kartka w karcie ── */
.p-portal .post-text { border:1px solid var(--line);
  border-radius:var(--radius-md); padding:14px; font-size:15px;
  line-height:1.6; background:#fff; }

/* ── Wiersz decyzji ── */
.p-portal .post-actions { display:flex; flex-wrap:wrap; align-items:center;
  gap:8px; margin-top:12px; }
.p-portal .post-actions .btn-ghost,
.p-portal .post-actions .btn-copy { min-height:40px; padding:0 16px;
  border-radius:var(--radius-pill); border:1px solid var(--line);
  background:#fff; color:var(--ink-900); font-family:var(--font-display);
  font-size:14px; font-weight:600; }
.p-portal .post-actions .btn-ghost:hover,
.p-portal .post-actions .btn-copy:hover { border-color:var(--ink-700);
  filter:none; }
.p-portal .post-actions .btn-copy.copied { border-color:var(--success-700);
  background:var(--success-bg); color:var(--success-700); }
/* Decyzja bierze CAŁY wiersz: przy trzech przyciskach w rzędzie oko nie
   wiedziało, który jest tym jednym ważnym (wzorzec 6a stawia go osobno). */
.p-portal .post-actions .btn-decyzja { flex:1 0 100%; min-height:46px;
  border:0; border-radius:var(--radius-pill); background:var(--success-700);
  color:#fff; font-family:var(--font-display); font-size:15px;
  font-weight:600; }
.p-portal .post-actions .btn-decyzja:hover { filter:brightness(1.07); }
.p-portal .post-why { margin:9px 0 0; font-size:12px; line-height:1.5;
  color:var(--ink-500); }
.p-portal .status-form { margin-top:10px; }
.p-portal .status-form .btn-ghost { min-height:40px; padding:0 16px;
  border-radius:var(--radius-pill); border:1px solid var(--line);
  background:#fff; color:var(--ink-900); font-family:var(--font-display);
  font-size:14px; font-weight:600; }

/* ── Zwijane sekcje karty: ten sam strój, co „Więcej opcji" w formularzach ── */
.p-portal .post .wiecej { margin-top:10px; }
.p-portal .post .wiecej > summary { padding:11px 13px; }
.p-portal .post .details-form,
.p-portal .post .note-form { padding:0 13px 13px; display:grid; gap:10px; }
.p-portal .post .note-form { grid-template-columns:1fr auto; align-items:center; }
.p-portal .post .note-input { height:44px; border-radius:var(--radius-md);
  border:1px solid var(--line); }
.p-portal .post .note-form .btn-ghost { min-height:44px; padding:0 18px;
  border-radius:var(--radius-pill); border:1px solid var(--line);
  background:#fff; color:var(--ink-900); font-weight:600; }
.p-portal .post .details-hint { margin:0; font-size:12px; }
.p-portal .post .details-form .btn-ghost { justify-self:start; min-height:44px;
  padding:0 18px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:#fff; color:var(--ink-900); font-weight:600; }

/* Usunięcie posta zostaje najniżej i najciszej — to jedyna akcja
   nieodwracalna z punktu widzenia klienta. */
.p-portal .post-remove { margin-top:12px; }
.p-portal .post-remove .link.danger { font-size:13px; color:var(--maroon-500); }

/* ── Lista dnia z boku (komputer, wzorzec d2) ── */
.p-portal .day-list-label { margin:0 0 2px; font-family:var(--font-display);
  font-size:10px; font-weight:700; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--ink-500); }
.p-portal .day-list-akcja { display:block; padding:11px 12px; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius-md); background:#fff;
  color:var(--ink-900); text-decoration:none; font-family:var(--font-display);
  font-size:13px; font-weight:600; }
.p-portal .day-list-akcja:hover { border-color:var(--ink-700); }

@media (min-width:768px) {
  /* Kolumna z listą i kolumna z postem trzymają tę samą siatkę co reszta
     panelu; bez tego dzień rozjeżdżał się z radarem i Wywiadem. */
  .p-portal .day-split { gap:24px; }
  .p-portal .day-list { width:288px; gap:10px; }
  .p-portal .day-list-item { border-radius:var(--radius-md); padding:11px 12px;
    box-shadow:var(--shadow-xs); }
  /* Zaznaczenie przez OBRYS i tło indygo, nie pomarańcz: pomarańcz w tym
     systemie znaczy „alert", a nie „tu jesteś". */
  .p-portal .day-list-item.is-active { border-color:var(--indigo-700);
    background:var(--indigo-50, #f1f0f8); }
  .p-portal .day-list-item[data-tag].is-active { border-color:var(--tag-line, var(--indigo-700)); }
  .p-portal .dli-status { font-family:var(--font-display); font-size:10px;
    letter-spacing:.03em; text-transform:uppercase; }
  .p-portal .day-posts .post { max-width:none; }
  .p-portal .feed.has-tabs .day-split { max-width:1040px; margin:0 auto; }
}

/* Zwijane sekcje karty niosa juz wlasna strzalke (.wiecej-strzalka), wiec
   stary znaczek `::after` dawal dwa daszki obok siebie. Ramka `.wiecej` ma
   tez wlasne obramowanie, wiec kreska i odstep sprzed niej sa zbedne. */
.p-portal .post .note-fold > summary::after,
.p-portal .post .details-fold > summary::after { content:""; }
.p-portal .post .details-fold { border-top:0; padding-top:0; margin-top:10px; }

/* Kreska nad uwaga zostala z ukladu, w ktorym pole bylo rozwiniete na stale.
   Teraz obie sekcje sa jednakowymi wierszami i separator robil z nich dwa
   rozne byty. */
.p-portal .post .note-section { margin-top:0; padding-top:0; border-top:0; }

/* Gniazdo okładki dostaje TO SAMO tło co pas. Powód jest mechaniczny: pas
   zwija się teraz od pierwszego piksela przewijania (dwa razy szybciej niż
   sunie treść), więc przez chwilę jest niższy niż miejsce, które rezerwuje
   gniazdo. Bez tego widać by było w tej szparze jasne tło strony — i to
   właśnie dlatego zwijanie czekało wcześniej na przewinięcie całej wysokości.
   Teraz nie ma czego zobaczyć: ciemne pod ciemnym. */
.p-portal .topcover-slot { background:var(--indigo-900);
  background-image:var(--dot-texture); }
/* BEZ przejścia CSS na tej wysokości. Skrypt przelicza ją przy każdym
   zdarzeniu przewijania, czyli w rytmie klatek — animacja jest już w samym
   ruchu. Dołożone przejście sprawiłoby tylko, że pas goni palec z opóźnieniem. */

/* ══ WYWIAD NA KOMPUTERZE — wyniki (d8) i pigułki w nagłówku (d7) ════ */

/* Tytuł „Wyniki wyszukiwania" w pasie: ten sam stopień co tytuł ekranu
   formularza, żeby pas nie miał trzeciej wielkości liter. */
.p-portal .wyw-tytul-szukania { margin:0; font-size:22px; }

/* Karta okna obserwacji obok wyników. Na telefonie idzie POD nimi — to
   kontekst, a nie coś, co trzeba przeczytać przed wynikami. */
.p-portal .wyw-szukanie { display:grid; gap:16px; }
.p-portal .wyw-okno-karta { background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:16px;
  align-self:start; }
.p-portal .wyw-okno-kicker { margin:0 0 6px; font-family:var(--font-display);
  font-size:10px; font-weight:700; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--ink-500); }
.p-portal .wyw-okno-zakres { margin:0 0 10px; font-size:14px;
  color:var(--ink-700); }
.p-portal .wyw-okno-liczba { margin:0; padding:9px 0; font-size:13px;
  color:var(--ink-500); border-top:1px solid var(--line); }
.p-portal .wyw-okno-liczba b { font-family:var(--font-display); font-size:24px;
  font-weight:700; color:var(--ink-900); margin-right:7px;
  font-variant-numeric:tabular-nums; }

@media (min-width:768px) {
  /* d8: wyniki z lewej, okno obserwacji z prawej. */
  .p-portal .wyw-szukanie { grid-template-columns:minmax(0,1fr) 300px; gap:24px; }
  /* d7: pigułki wchodzą w wiersz nagłówka sekcji, zamiast zajmować własny.
     Na telefonie zostają pod spodem — pięć pigułek nie zmieści się obok. */
  .p-portal #dowody { display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap; }
  .p-portal #dowody .wyw-sec { margin:0; flex:1 1 auto; }
  .p-portal #dowody .subtabs { margin:0; flex:0 0 auto; }
}

@media (min-width:768px) {
  /* Pas w trybie wyszukiwania nie trzyma wspolnej wysokosci 181 px: nie ma
     juz czym jej wypelnic (kafelki liczb zeszly do karty obok wynikow), wiec
     zostawalby pas pustej czerni. Brak wsparcia dla :has = pas zostaje
     wysoki, czyli dokladnie dzisiejszy stan — degradacja nieszkodliwa. */
  .p-portal .topcover:has(.wyw-tytul-szukania) { min-height:0; }
}