/* The company panel (panel.html, panel.js, panel/*.js) on top of styles.css: the section shell, „Stopka firmy”, „Zespół”,
   „Instalacja”. The personal page's look (white cards on hairlines, pills); light theme only. Fades .2s, sizes .3s. */
:root { --ink: var(--fg); --ink-2: var(--muted); --ink-3: var(--faint); --bg-2: var(--soft); --surface: #fff; --hair: rgba(0,0,0,.08); --hair-2: rgba(0,0,0,.14);
  --focus: #0a66ff; --ease: cubic-bezier(.2,0,0,1); --green: #1a7f45; --amber: #b25e09; }
.nav .wrap { max-width: 1240px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- shell: a sidebar nav, one pane at a time; a segmented control on a phone ---------- */
.pn { max-width: 1240px; margin: 0 auto; padding: 32px 24px 112px; display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 40px; align-items: start; }
.pn-nav { position: sticky; top: 92px; display: grid; gap: 2px; isolation: isolate; }
.pn-nav button { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-2);
  font: 500 .9375rem var(--sans); text-align: left; cursor: pointer; transition: color .2s ease; }
.pn-nav button:hover, .pn-nav button[aria-current] { color: var(--ink); }
.pn-nav svg { width: 18px; height: 18px; flex: none; }
.pn-nav .s { display: none; }
.pn-count { margin-left: auto; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pn-thumb { position: absolute; z-index: -1; left: 0; top: 0; border-radius: 10px; background: var(--bg-2); opacity: 0; transition: transform .3s var(--ease), width .3s var(--ease), opacity .2s ease; }
.pn-thumb.on { opacity: 1; }
.pn-main { min-width: 0; }
.pn-main > .note.trial { margin: 0 0 24px; }
.pn-pane { padding: 0; border-top: 0; }
@media (max-width: 900px) {
  .pn { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 12px; }
  /* stuck under the header, the pill sits on a strip of the page's own colour, full width: the cards scroll under it,
     never beside or through it (QA p26) */
  .pn-nav { top: 68px; z-index: 15; display: flex; padding: 3px; border-radius: 999px; }
  .pn-nav::before { content: ""; position: absolute; z-index: -2; inset: -8px -16px -10px; background: var(--bg); }
  .pn-nav::after { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit; background: var(--bg-2); }
  /* each item as wide as its words, the rest shared: "Instalacja" no longer cut to "Instalac…" at 360 px */
  .pn-nav button { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; height: 36px; padding: 0 8px; border-radius: 999px; font-size: .8125rem; }
  .pn-nav svg, .pn-nav .l { display: none; }
  .pn-nav .s { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pn-count { margin-left: 0; }
  .pn-thumb { border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 .5px var(--hair-2); }
}

/* ---------- shared pieces ---------- */
.pn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.pn-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.035em; line-height: 1.15; }
.pn-head p { margin-top: 6px; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.pn-acts, .pn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pn-row.end { justify-content: flex-end; }
.pn-row.center { justify-content: center; }
.pn-card { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 .5px var(--hair-2); padding: clamp(16px, 2.4vw, 24px); }
.pn-card h3 { font-size: 1rem; line-height: 1.4; }
.pn-sub { color: var(--ink-2); font-size: .9375rem; margin-top: 4px; text-wrap: pretty; }
.pn-hint { font-size: .8125rem; color: var(--ink-3); margin-top: 16px; }
.pn-saved { min-height: 20px; font-size: .8125rem; line-height: 20px; color: var(--ink-3); }
.pn .btn { transition: opacity .15s ease, border-color .2s ease, background-color .2s ease, color .2s ease; }
.pn .btn svg { flex: none; }
.pn .btn.secondary { border-color: var(--hair-2); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn.danger-ghost:hover { border-color: color-mix(in srgb, var(--danger) 40%, transparent); opacity: 1; }
.pn .btn:has(> .spin) { padding-left: 40px; padding-right: 40px; }
.link.gone, [data-remove].gone { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.link, [data-remove] { transition: opacity .2s ease, text-decoration-color .2s ease; }
.ds-label { font-size: .8125rem; color: var(--ink-2); font-weight: 500; margin: 18px 0 10px; }
.ds-label:first-child { margin-top: 0; }
.ds-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ds-fields .wide, .ds-fields .ds-label { grid-column: 1 / -1; }
.ds-fields .ds-label { margin: 6px 0 -4px; }
.ds-field { display: grid; gap: 6px; margin: 0; font-size: .8125rem; color: var(--ink-2); min-width: 0; }
.ds-field small { font-size: .8125rem; color: var(--ink-3); line-height: 1.4; }
.pn input:not([type=file]) { height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: .9375rem; transition: box-shadow .2s ease; }
.pn input:not([type=file]):focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* the text under the signature (disclaimer.js): a long legal text in a field of its own height (it scrolls inside, so
   nothing under it jumps as it fills or empties); its count beside the hint */
.pn .ds-field textarea { height: 168px; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair-2); font: 400 .9375rem/1.45 var(--sans); color: var(--ink); resize: vertical; transition: box-shadow .2s ease; }
.pn .ds-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.ds-hint-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ds-count { flex: none; font-variant-numeric: tabular-nums; }
.ds-size-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: .8125rem; color: var(--ink-2); }
.ds-size-row .seg button { height: 36px; transition: background-color .2s ease, color .2s ease; } /* as the account's language switch */
.ds-disc { overflow: hidden; }
.ds-disc .disc-in { padding-top: 4px; }
@media (max-width: 520px) { .ds-fields { grid-template-columns: minmax(0, 1fr); } .pn input:not([type=file]), .pn .ds-field textarea { font-size: 1rem; } .ds-size-row .seg button { height: 40px; } }

/* people chips: pick whose data the preview shows; a mark while his GIF records, a tick when it is in */
/* the chips wrap; a big team scrolls inside three rows */
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow-y: auto; scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair-2); font: 500 .875rem var(--sans); cursor: pointer; transition: box-shadow .2s ease, color .2s ease, background-color .2s ease; }
.chip:hover { color: var(--ink); }
.chip[aria-checked="true"] { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-2); color: var(--ink-2); font-size: .75rem; font-weight: 600; }
.chip .mk { display: none; place-items: center; width: 14px; height: 14px; }
.chip[data-mark="rec"] .mk, .chip[data-mark="done"] .mk { display: grid; }
.chip .mk > * { grid-area: 1 / 1; transition: opacity .2s ease, transform .25s var(--ease); }
.chip .mk i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: pnPulse 1.4s ease-in-out infinite; }
.chip .mk svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--green); fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); }
.chip[data-mark="done"] .mk i { opacity: 0; }
.chip[data-mark="done"] .mk svg { opacity: 1; transform: none; }
@keyframes pnPulse { 50% { opacity: .35; } }

/* ---------- the signature stage (ui.js): the live design and the GIF in one cell, cross-fading (cards.js) ---------- */
.sg { position: relative; }
.sg-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; }
.sg-stage > .layer { grid-area: 1 / 1; transition: opacity .25s ease; }
.sg-stage > .live { width: 400px; padding: 10px; display: grid; justify-items: start; zoom: var(--k, 1); }
.sg-stage > .live:has(> .cu-fit) { padding: 0; }
.sg-stage > .g-gif { display: block; width: 400px; max-width: 100%; height: auto; opacity: 0; }
.sg[data-ready="true"] .g-gif { opacity: 1; }
.sg[data-ready="true"] .live { opacity: 0; }
.sg[data-ready="true"] .live * { animation-play-state: paused; }
.sg .live .rs, .sg .live .rs * { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease, stroke .3s ease; }
.sg .rec { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.9);
  color: var(--ink); font-size: .75rem; font-weight: 500; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 6px 16px -8px rgba(0,0,0,.3); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.sg .rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pnPulse 1.4s ease-in-out infinite; }
.sg[data-ready="true"] .rec { opacity: 0; transform: translateY(4px); }

/* ---------- „Stopka firmy”: the preview in a mail next to the editor ---------- */
.ds { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ds-preview { position: sticky; top: 92px; display: grid; gap: 14px; }
@media (max-width: 1120px) { .ds { grid-template-columns: minmax(0, 1fr); } .ds-preview { position: static; } }
.ds-mail { border-radius: 20px; background: #fff; box-shadow: 0 0 0 .5px var(--hair-2), 0 30px 60px -40px rgba(0,0,0,.35); overflow: hidden; }
.ds-mail-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: .5px solid var(--hair); }
.ds-from-av .av { width: 34px; height: 34px; font-size: .8125rem; }
.ds-from { flex: 1; display: grid; min-width: 0; line-height: 1.3; }
.ds-from b { font-size: .9375rem; font-weight: 600; }
.ds-from span { font-size: .8125rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-mail-top time { margin-left: auto; font-size: .8125rem; color: var(--ink-3); }
.ds-mail-body { padding: 18px 22px 22px; }
.ds-subj { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: 10px; }
.ds-text { font-size: .9375rem; color: #3a3a3c; line-height: 1.6; }
.ds-text + .ds-text { margin-top: 10px; }
.ds-sig { margin: 14px -10px 0; } /* the GIF's frame: its content in line with the mail's text */
.ds-sig .sg-stage { place-items: center start; min-height: 150px; }
.ds-banner img { display: block; width: 400px; max-width: 100%; height: auto; max-height: 150px; object-fit: cover; padding: 0 0 0 0; border-radius: 4px; }
.ds-banner > div { padding-top: 0; }
.ds-who { display: grid; gap: 8px; }
.ds-who-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; min-height: 26px; }
.ds-who .ds-label { margin: 0; }
.ds-sig .rec { display: none; } /* the preview says it under the mail, never over the signature */
.ds-state { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--bg-2); font-size: .75rem; font-weight: 500; color: var(--ink-2);
  transition: opacity .25s ease, transform .25s ease; }
.ds-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pnPulse 1.4s ease-in-out infinite; }
.ds-state.off { opacity: 0; transform: translateY(3px); }


.ds-edit { min-width: 0; }
.ds-edit-title { font-size: 1.125rem; letter-spacing: -.02em; margin-bottom: 12px; }
.ds-tabs { position: relative; display: flex; padding: 3px; border-radius: 999px; background: var(--bg-2); isolation: isolate; overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tabs button { flex: 1 0 auto; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 500 .875rem var(--sans); white-space: nowrap; cursor: pointer; transition: color .2s ease; }
.ds-tabs button[aria-selected="true"] { color: var(--ink); }
.ds-tabs-thumb { position: absolute; z-index: -1; left: 3px; top: 3px; height: 34px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 .5px var(--hair-2);
  transition: transform .3s var(--ease), width .3s var(--ease); }
.ds-panel { padding: 20px 2px 4px; }

/* design tiles: every design drawn small with the chosen person's data */
.ds-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ds-layouts { margin: 0 0 12px; } /* the switch of the gallery's layouts (fx-controls.js segmented, gallery.css .fx-seg) */
.ds-layouts .fx-seg { background: rgba(0, 0, 0, .05); }
.ds-tile { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 0; padding: 0; border: 0; border-radius: 16px; background: #fff; text-align: left; cursor: pointer; overflow: hidden;
  box-shadow: 0 0 0 .5px var(--hair-2); transition: box-shadow .2s ease, transform .15s ease; }
.ds-tile:hover { box-shadow: 0 0 0 .5px var(--hair-2), 0 14px 30px -20px rgba(0,0,0,.35); }
.ds-tile:active { transform: scale(.99); }
.ds-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.ds-tile-stage { min-height: 120px; display: grid; place-items: center; pointer-events: none; }
.ds-tile-name { display: block; padding: 10px 12px; border-top: .5px solid var(--hair); font-size: .8125rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.ds-now { position: absolute; top: 8px; right: 8px; font-size: .6875rem; line-height: 18px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); opacity: 0; transition: opacity .2s ease; }
.ds-tile.now .ds-now { opacity: 1; }
@media (max-width: 380px) { .ds-tile-stage { min-height: 100px; } }

/* colours: swatches, then any colour in a saturation/brightness area and a hue slider */
.ds-sw { display: flex; flex-wrap: wrap; gap: 4px; min-height: 40px; }
.ds-sw .sw { width: 40px; height: 40px; padding: 6px; border: 0; border-radius: 50%; background: var(--c) content-box; cursor: pointer; transition: box-shadow .2s ease, transform .15s ease; }
.ds-sw .sw:hover { transform: scale(1.06); }
.ds-sw .sw[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.cp { display: grid; gap: 12px; max-width: 360px; }
.cp-sv { position: relative; height: 150px; border-radius: 14px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(calc(var(--h, 0) * 1deg) 100% 50%)); box-shadow: inset 0 0 0 .5px var(--hair-2); }
.cp-hue { position: relative; height: 16px; border-radius: 999px; cursor: pointer; touch-action: none; margin: 4px 0;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 .5px var(--hair-2); }
.cp-dot, .cp-knob { position: absolute; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2.5px #fff, 0 1px 4px rgba(0,0,0,.45); pointer-events: none; }
.cp-knob { top: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.35); }
.cp-sv:not(.dragging) .cp-dot, .cp-hue:not(.dragging) .cp-knob { transition: left .2s var(--ease), top .2s var(--ease); }
.cp-row { display: flex; align-items: center; gap: 10px; }
.cp-chip { width: 42px; height: 42px; border-radius: 12px; box-shadow: inset 0 0 0 .5px var(--hair-2); flex: none; transition: background-color .2s ease; }
.cp-hex { position: relative; flex: 1; margin: 0; }
.cp-hex span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: .9375rem; }
.cp-hex input { width: 100%; padding-left: 28px !important; text-transform: lowercase; font-variant-numeric: tabular-nums; }

/* logo and banner */
.ds-asset { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: .5px solid var(--hair); }
.ds-asset:first-child { padding-top: 0; }
.ds-thumb { width: 76px; height: 52px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 .5px var(--hair-2); display: grid; place-items: center; overflow: hidden; transition: background-color .25s ease; }
.ds-thumb.empty { background: repeating-linear-gradient(135deg, var(--bg-2) 0 6px, #fff 6px 12px); }
.ds-thumb img { max-width: 64px; max-height: 40px; object-fit: contain; }
.ds-asset-text { display: grid; gap: 2px; min-width: 0; font-size: .875rem; }
.ds-asset-text span { color: var(--ink-3); font-size: .8125rem; line-height: 1.4; }
.ds-asset-acts { display: flex; align-items: center; gap: 12px; }
.ds-asset-acts label.btn { margin: 0; color: var(--ink); }
.ds-asset + .ds-fields { margin-top: 16px; }
@media (max-width: 520px) { .ds-asset { grid-template-columns: 64px minmax(0, 1fr); } .ds-asset-acts { grid-column: 1 / -1; } .ds-thumb { width: 64px; } }

/* the box under the editor: a note; unsaved changes with „Cofnij” / „Zastosuj u wszystkich”; the recording's progress */
.ds-apply { position: relative; z-index: 5; margin-top: 20px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 .5px var(--hair-2); padding: 16px 18px; }
.ds-apply[data-state="dirty"], .ds-apply[data-state="recording"] { position: sticky; bottom: 12px; box-shadow: 0 0 0 .5px var(--hair-2), 0 18px 40px -20px rgba(0,0,0,.35); }
.ds-idle { font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
.ds-dirty { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.ds-dirty b { font-size: .9375rem; }
.ds-dirty p { font-size: .8125rem; color: var(--ink-2); margin-top: 2px; max-width: 40ch; }
.ds-dirty-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 520px) { .ds-dirty-acts { width: 100%; } .ds-dirty-acts .btn { flex: 1; padding-left: 16px; padding-right: 16px; } .ds-dirty-acts [data-apply] { flex: 2; padding-left: 36px; } }
.ds-prog-head { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.ds-prog-head .spin { flex: none; color: var(--ink-2); }
.ds-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .875rem; }
.ds-bar { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: 12px 0; }
.ds-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .5s ease-in-out; }
.ds-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 120px; overflow-y: auto; scrollbar-width: none; }
.ds-ticks li { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink-2); transition: color .2s ease; }
.ds-ticks li[data-state="done"] { color: var(--ink); }
.tk { display: grid; place-items: center; width: 16px; height: 16px; }
.tk > * { grid-area: 1 / 1; transition: opacity .2s ease, transform .25s var(--ease); }
.tk i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink-3); border-right-color: transparent; animation: spin .8s linear infinite; }
.tk svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--green); fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); }
li[data-state="done"] .tk i { opacity: 0; }
li[data-state="done"] .tk svg { opacity: 1; transform: none; }
.ds-note { font-size: .8125rem; color: var(--ink-3); margin-top: 12px; }
.ds-done { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.ds-done b { font-size: .9375rem; }
.ds-done p { font-size: .8125rem; color: var(--ink-2); margin-top: 2px; }
.ds-check { width: 40px; height: 40px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ds-done.slow .ds-check { stroke: var(--amber); }
.ds-check circle, .ds-check path { stroke-dasharray: 1 1; animation: dsDraw .6s var(--ease) .3s backwards; }
.ds-check path { animation-delay: .7s; animation-duration: .35s; }
@keyframes dsDraw { from { stroke-dashoffset: 1; } }

#onboarding .login-box { margin-top: 0; padding-top: 0; border-top: 0; } /* signed out the login is all there is: no line above it */
#design-chat:empty { display: none; }
#design-chat { margin-top: 24px; --btn: #1d1d1f; --btn-ink: #fff; --scrim: rgba(0, 0, 0, .42); } /* chat.css, editor.css */
/* „Zmień słowami”: one line and its button; the chat shows only docked in the editor (editor.js moves it there) */
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; background: var(--bg-2); }
.dc-row p { margin: 0; flex: 1 1 260px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.dc-chat:not(.docked) { display: none; }
.ed { --btn: #1d1d1f; --btn-ink: #fff; --scrim: rgba(0, 0, 0, .42); }
.ed .btn.ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); } /* secondary beside „Zapisz dla wszystkich” */
.ed .ch-icon { display: none; } /* no pictures for the company's design here: the logo has its own tab */

/* „Wizytówka”: switches for the card's sections */
.ds-cardset { margin-top: 28px; }
.cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cs-head .btn { margin: 0; }
.cs-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .cs-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--bg-2); color: var(--ink); font: 500 .875rem var(--sans); text-align: left; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.cs-switch[aria-checked="false"] { color: var(--ink-2); background: color-mix(in srgb, var(--bg-2) 55%, #fff); }
.cs-track { flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; background: #d2d2d7; transition: background-color .2s ease; }
.cs-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.cs-switch[aria-checked="true"] .cs-track { background: var(--green); }
.cs-switch[aria-checked="true"] .cs-knob { transform: translateX(14px); }
.cs-foot { position: relative; margin-top: 16px; }
.cs-foot .pn-saved { position: absolute; right: 0; top: 0; line-height: 18px; }
/* the card beside the switches (card.css .kc-frame), under them on a narrower screen */
.cs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; }
.cs-set { min-width: 0; }
.cs-preview { min-width: 0; padding: 20px; border-radius: 16px; background: var(--bg-2); }
.cs-preview .kc-frame { max-width: 300px; }
@media (min-width: 1180px) { .cs { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .cs .cs-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- „Zespół”: a card per person with his real signature ---------- */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: 14px; align-items: start; }
.tm-card { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 .5px var(--hair-2); overflow: clip; transition: box-shadow .25s ease; } /* clip, not hidden: the thumbnail can stick */
.tm-card:hover, .tm-card.editing { box-shadow: 0 0 0 .5px var(--hair-2), 0 22px 44px -30px rgba(0,0,0,.35); }
.tm-thumb { padding: 6px; border-bottom: .5px solid var(--hair); background: #fff; }
.tm-thumb .sg-stage { min-height: 132px; }
.tm-thumb .sg { padding-top: 34px; } .tm-thumb .sg-stage { position: static; } /* the "recording" pill sits in its own strip above, never over the signature */
.tm-thumb .sg .rec { top: 2px; bottom: auto; right: 4px; }
/* an open card keeps its signature in view on a wide screen while the fields below it are typed in (the live preview) */
@media (min-width: 901px) { .tm-card.editing .tm-thumb { position: sticky; top: 61px; z-index: 2; } } /* right under the 61 px nav */
.tm-skel { width: 340px; display: grid; gap: 10px; padding: 24px 0; }
.tm-skel span { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--bg-2) 25%, #ebebee 50%, var(--bg-2) 75%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.tm-skel span:first-child { width: 60%; height: 20px; }
.tm-skel span:last-child { width: 80%; }
.tm-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.tm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-who > div { display: grid; min-width: 0; line-height: 1.35; }
.tm-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-who span.swap { font-size: .875rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.35em; }
.tm-av .av { width: 36px; height: 36px; font-size: .8125rem; }
.tm-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8125rem; }
.tm-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.tm-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: background-color .2s ease; }
.tm-state[data-state="done"] { color: var(--green); }
.tm-state[data-state="done"] i { background: var(--green); }
.tm-state[data-state="waiting"] i { background: var(--amber); animation: pnPulse 1.6s ease-in-out infinite; }
.tm-state[data-state="opened"] i { background: var(--amber); }
.tm-state[data-state="filled"] i { background: var(--focus); }
.tm-clicks { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tm-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-acts .btn { flex: 1 1 auto; }
.tm-edit { padding: 0 16px 16px; display: grid; gap: 14px; }
.tm-edit .ds-fields { grid-template-columns: minmax(0, 1fr); }
.tm-photo-row { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: .5px solid var(--hair); }
.tm-photo-row label.btn { margin: 0; color: var(--ink); }
.tm-edit-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 12px; border-top: .5px solid var(--hair); }
.tm-edit-acts .link { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; }
.tm-edit-acts [data-remove] { margin-left: auto; }
/* his own link (team.js): the link with "Kopiuj" (or "Utwórz link") in one slot, "Wyślij mailem"; "zmienione przez …"
   under his name, the changes – his and the admin's – with "Cofnij" */
.tm-changed p { padding-top: 2px; font-size: .8125rem; color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-consent { margin: -6px 0 0; font-size: .75rem; line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }
.tm-add .tm-consent { margin: 0; text-align: center; }
.tm-self { display: grid; gap: 10px; padding-top: 12px; border-top: .5px solid var(--hair); }
.tm-self b { font-size: .9375rem; font-weight: 600; }
.tm-self p { margin-top: 2px; font-size: .8125rem; color: var(--ink-2); text-wrap: pretty; }
.tm-self-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.tm-self-row .link { padding: 10px 0; font-size: .8125rem; color: var(--ink-2); transition: opacity .2s ease, color .2s ease; }
.tm-self-row .link.gone { opacity: 0; pointer-events: none; }
.tm-self-row [data-self-revoke]:hover { color: var(--danger); text-decoration-color: var(--danger); }
.tm-self .btn > .spin { left: 14px; }
.tm-self .btn:has(> .spin) { padding-left: 16px; padding-right: 16px; } /* the spinner takes the icon's place */
.tm-self-links { display: flex; gap: 16px; }
.tm-self .btn > svg { transition: opacity .2s ease; }
.tm-self .btn[aria-busy="true"] > svg { opacity: 0; }
.tm-self-hint p { margin: 0; color: var(--amber); }
.tm-link { display: grid; }
.tm-link > * { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; min-width: 0; transition: opacity .2s ease, visibility 0s linear 0s; }
.tm-link > [inert] { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.pn .tm-link-url { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--bg-2); box-shadow: none; color: var(--ink-2); font-size: .8125rem; text-overflow: ellipsis; }
.pn .tm-link-url:focus { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.tm-link .btn { flex: none; margin: 0; }
.tm-changes ul { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-grid:has(.tm-changes.open) { overflow-anchor: none; } /* "Cofnij" collapses a row: what is below moves up, the page does not slide down by half pixels to chase it */
.tm-changes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; height: 37px; font-size: .8125rem; line-height: 20px; border-top: 1px solid var(--hair); } /* whole pixels: the list morphs without shimmer */
.tm-changes time { white-space: nowrap; }
.tm-changes li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tm-changes li b { font-weight: 500; color: var(--ink-2); margin-right: 4px; }
.tm-changes time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tm-changes .link { font-size: .8125rem; line-height: 20px; padding: 8px 0; }

/* the view: the cards or the sheet (one segmented control, as the editor's tabs) */
.tm-view { display: inline-flex; margin: 0 0 16px; }
.tm-view button { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.tm-view svg { width: 15px; height: 15px; }

/* „Tabela” (bulk.js): everyone's data in one sheet; in a narrow pane each row is a small form */
.tm-sheet { container-type: inline-size; }
.bk { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 .5px var(--hair-2); overflow: clip; }
.bk-row { display: grid; grid-template-columns: 56px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr); align-items: center; padding-right: 6px; border-top: .5px solid var(--hair); }
.bk-head { border-top: 0; min-height: 40px; font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.bk-head > span { padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ph { display: grid; place-items: center; padding: 0; }
.bk-av { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; cursor: pointer; }
.bk-av .av { width: 32px; height: 32px; font-size: .75rem; transition: box-shadow .2s ease; }
@media (hover: hover) { .bk-av:hover .av { box-shadow: 0 0 0 2px var(--hair-2); } }
.bk-av.dirty .av { box-shadow: 0 0 0 2px var(--focus); }
.bk-av:focus-within { outline: 2px solid var(--focus); outline-offset: 0; }
.bk-cell { display: block; margin: 0; min-width: 0; padding: 4px 2px; }
.bk-l { display: none; }
.pn .bk-cell input { width: 100%; height: 40px; padding: 0 10px; border-radius: 10px; background: transparent; box-shadow: none; font-size: .9375rem; text-overflow: ellipsis; transition: background-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .pn .bk-cell input:hover { background: var(--bg-2); } }
.pn .bk-cell input:focus { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pn .bk-cell.dirty input { background: color-mix(in srgb, var(--focus) 8%, var(--surface)); }
.pn .bk-cell input[type=email]:invalid { box-shadow: inset 0 0 0 1.5px var(--amber); } /* a phone pasted into the e-mail column shows */
.pn .bk-cell.bad input { box-shadow: inset 0 0 0 1.5px var(--danger); }
.bk-cell[data-col="name"] input { font-weight: 500; }
.bk-cell input::placeholder { color: var(--ink-3); font-weight: 400; }
.tm-sheet .ds-apply { margin-top: 14px; }
@container (max-width: 680px) {
  .bk-head { display: none; }
  .bk-row { grid-template-columns: 52px minmax(0, 1fr); align-items: start; padding: 8px 10px 10px 0; }
  .bk-ph { grid-row: 1 / span 5; padding-top: 2px; }
  .bk-cell { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; padding: 1px 0; }
  .bk-cell[data-col="name"] { grid-template-columns: minmax(0, 1fr); }
  .bk-cell[data-col="name"] .bk-l { display: none; }
  .bk-l { display: block; padding-left: 10px; font-size: .8125rem; line-height: 1.3; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pn .bk-cell input { height: 42px; font-size: 1rem; }
  .pn .bk-cell input:placeholder-shown:not(:focus) { background: var(--bg-2); } /* an empty field still reads as one */
  .bk-cell[data-col="name"] input { font-size: 1.0625rem; }
}

/* „Dodaj osobę” */
.tm-add { margin-bottom: 18px; display: grid; gap: 16px; }
.tm-add-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 560px) { .tm-add-grid { grid-template-columns: minmax(0, 1fr); } }
.tm-photo-pick { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 12px 8px; border-radius: 16px; background: var(--bg-2); color: var(--ink-2); font-size: .8125rem; text-align: center; cursor: pointer; transition: background-color .2s ease; }
.tm-photo-pick:hover { background: #ececf0; }
.tm-av.big .av { width: 64px; height: 64px; font-size: 1.5rem; font-weight: 400; background: #fff; box-shadow: inset 0 0 0 1px var(--hair-2); }
.tm-err .error { margin: 0; }
/* a refused photo's message under the photo row; closed it takes no room in the grid's gaps */
.tm-photo-err { margin-top: -14px; }
.tm-photo-err .error { margin: 0; padding: 6px 0 0; }
#tmAdd > div { overflow: hidden; }

/* no one yet */
.tm-empty { text-align: center; padding: 48px 20px 40px; border-radius: 20px; background: var(--bg-2); }
.tm-empty h3 { font-size: 1.125rem; margin-top: 20px; }
.tm-empty p { color: var(--ink-2); margin: 6px auto 20px; max-width: 40ch; }
.tm-empty-art { position: relative; width: 168px; margin: 0 auto; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px var(--hair-2), 0 20px 40px -24px rgba(0,0,0,.3); display: grid; gap: 8px; }
.tm-empty-art span { height: 10px; border-radius: 5px; background: var(--bg-2); }
.tm-empty-art span:first-child { width: 70%; height: 14px; background: #d9d9de; }
.tm-empty-art span:last-child { width: 50%; }
.tm-empty-art i { position: absolute; right: -10px; top: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg-2); animation: pnFloat 2.4s ease-in-out infinite; }
.tm-empty-art i::before, .tm-empty-art i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%); }
.tm-empty-art i::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes pnFloat { 50% { transform: translateY(-4px); } }

/* ---------- „Instalacja” ---------- */
.in-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .in-grid { grid-template-columns: minmax(0, 1fr); } }
.in-copy #installPeople { margin: 16px 0; }
.in-copy .note.warn { margin-top: 16px; }
.in-copy .install { margin-top: 0; }
/* per person (install.js) and "Zainstaluj dla całej firmy" (enterprise.js) side by side; alone, the first is the full width */
.in-grid:has(> #enterprise[hidden]) .in-copy { grid-column: 1 / -1; }
#enterprise .ent { border: 0; border-radius: 20px; box-shadow: 0 0 0 .5px var(--hair-2); padding: clamp(16px, 2.4vw, 24px); }
#enterprise .ent-title { font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
#enterprise .ent-lead { margin: 4px 0 16px; }

/* the confirm dialog (ui.js): fades and rises in over a blurred page */
.pn-dialog { border: 0; border-radius: 20px; padding: 24px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 40px 120px -20px rgba(0,0,0,.5); }
.pn-dialog[open] { animation: rise .25s var(--ease) both; }
.pn-dialog::backdrop { background: rgba(0,0,0,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade .2s ease both; }
.pn-dialog h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.pn-dialog p { color: var(--ink-2); font-size: .9375rem; }
.pn-dialog-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { .pn *, .pn *::before, .pn *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* styles.css sets .mono in Geist Mono; a design's initials (.ph.mono) keep the design's own font, as in its GIF */
.rs .mono { font-family: inherit; }
.ds-asset-err .error { margin: 0; padding: 8px 0 4px; }
.bk-err .error { margin: 0; padding: 10px 2px 0; }
/* the sheet: a contact that looks wrong (bulk.js flag) is amber, its note too; an error stays red */
.pn .bk-cell.warn input { box-shadow: inset 0 0 0 1.5px var(--amber); }
.bk-err.soft .error { color: var(--amber); }
/* the CSV import: what the file would add, in the confirm dialog (team.js preview) */
.tm-csv-err .error { margin: 0; padding: 0 0 14px; }
.pn-dialog-body:empty { display: none; }
.tm-csv { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; scrollbar-width: none; }
.tm-csv::-webkit-scrollbar { display: none; }
.tm-csv li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); font-size: .875rem; min-width: 0; }
.tm-csv b { font-weight: 600; overflow-wrap: anywhere; }
.tm-csv small { color: var(--ink-2); font-size: .8125rem; }
.tm-csv-c { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--ink-2); font-size: .8125rem; min-width: 0; }
.tm-csv-c span { overflow-wrap: anywhere; }
.tm-csv .warn { color: var(--amber); text-decoration: underline wavy color-mix(in srgb, var(--amber) 50%, transparent); text-underline-offset: 3px; }
.tm-csv-note { margin: 10px 0 0; font-size: .8125rem; color: var(--ink-2); }
.tm-csv-note.warn { color: var(--amber); }
/* the account is deleted (panel.js): no nav column, the end alone in the middle */
.pn.ended { grid-template-columns: minmax(0, 1fr); }

/* the company's profiles (panel/profiles.js): a row each in the signature's order, then a field for any link */
.ds-profs .ds-label { margin: 6px 0 10px; }
.ds-prof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-prof { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: end; gap: 10px; overflow: hidden; }
.ds-prof-ic { padding-bottom: 3px; }
.ds-prof-ic i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--pg, var(--pc)); color: var(--pi, #fff); overflow: hidden; }
.ds-prof-ic i svg { width: 18px; height: 18px; }
.ds-prof-ic i[data-k="site"] { box-shadow: inset 0 0 0 1px var(--hair); }
.ds-prof-ic i img { width: 100%; height: 100%; display: block; }
.ds-prof-main { display: grid; gap: 6px; min-width: 0; margin: 0; }
.ds-prof-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-size: .8125rem; color: var(--ink-2); }
.ds-prof-name b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.ds-prof-name small { font-size: .75rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-prof-site:empty { display: none; }
.ds-prof-card { opacity: 0; transition: opacity .2s ease; }
.ds-prof.off .ds-prof-card { opacity: 1; }
.ds-prof.off .ds-prof-ic i { opacity: .45; transition: opacity .2s ease; }
.ds-prof-ic i { transition: opacity .2s ease; }
.ds-prof-acts { display: flex; gap: 2px; padding-bottom: 1px; }
.ds-prof-hint { font-size: .8125rem; color: var(--ink-3); line-height: 1.4; margin: 10px 0 0; opacity: 0; transition: opacity .2s ease; }
.ds-prof-hint.on { opacity: 1; }
.ds-prof-add { margin-top: 14px; display: grid; gap: 6px; }
.ds-prof-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ds-prof-add .reveal .error { padding: 8px 0 0; }
@media (max-width: 520px) { .ds-prof-row { grid-template-columns: minmax(0, 1fr); } .ds-prof-acts .ed-icon { width: 36px; height: 36px; } }