/* Bartix CRM — what is left of UI v4's stylesheet (drafts/ui-v4/app.css, round 3b): the base, the
   controls and windows the v5 screens still borrow (the phone note, „Nowy szablon", the reply field's
   bar), a mail's body. Every screen is v5's (v5.css); values live in tokens.css. */

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font: var(--t-base)/1.5 var(--font); color: var(--ink); background: var(--sheet); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.dots { stroke-width: 3; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* MAIL_DRYRUN (smoke harness): a strip above everything, never covering anything */
body.has-banner { --banner: 24px; }
.dryrun-banner { position: sticky; top: 0; z-index: 50; height: var(--banner); background: #b91c1c; color: #fff; font-size: 13px; font-weight: 600; line-height: 24px; text-align: center; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ controls */
/* one height, one radius; three kinds */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: none; height: var(--ctl); padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); font-weight: 500; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--hover); border-color: var(--ink-3); }
.btn.primary { background: var(--action); border-color: var(--action); color: #fff; padding: 0 1.25rem; }
.btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn.plain { border-color: transparent; background: none; padding: 0 .65rem; }
.btn.plain:hover { background: var(--hover); border-color: transparent; }
.btn.on, .btn.on:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.btn b { font-weight: 700; }

/* a link is text inside content, always blue */
.link { border: 0; background: none; padding: 0; color: var(--action); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }

/* a tag describes, it is not pressed: filled, no border, one size */
.tag { display: inline-flex; align-items: center; flex: none; height: var(--tag); padding: 0 .5rem; border-radius: var(--r-tag); background: var(--fill); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
.tag.urgent { background: var(--danger); color: #fff; }
.tag.wait { background: var(--mark); color: var(--ink); }
/* …except the two that change a conversation, in the conversation itself (2026-10-06): „Pilne"
   and the kind of matter are pressed on their tag. Same shape and height; the hit area is the
   control height (40px), so a finger finds it; hover darkens. „Pilne" not set = grey text. */
.tag-btn { position: relative; border: 0; cursor: pointer; }
.tag-btn::after { content: ""; position: absolute; left: -2px; right: -2px; top: calc((var(--tag) - var(--ctl)) / 2); bottom: calc((var(--tag) - var(--ctl)) / 2); }
.tag-btn:hover, .tag-btn[aria-expanded="true"] { background: var(--selected); color: var(--ink); }
.tag-btn.off { color: var(--ink-3); }
.tag-btn.urgent:hover { background: #961E15; color: #fff; }
.tag-btn .ic { width: 1rem; height: 1rem; margin: 0 -.15rem 0 .2rem; }
.v4 .count { display: inline-flex; align-items: center; justify-content: center; flex: none; height: var(--tag); min-width: var(--tag); padding: 0 .45rem; border-radius: 999px; background: var(--mark); color: var(--ink); font-size: var(--t-sm); font-weight: 700; }

.field, .search { height: var(--ctl); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.field { width: 100%; padding: 0 .75rem; }
.field:focus { outline: 2px solid var(--action); outline-offset: -1px; border-color: var(--action); }
.field:disabled { background: var(--fill); color: var(--ink-2); }
textarea.field { display: block; height: auto; min-height: 6rem; padding: .55rem .75rem; resize: vertical; }
.search { display: flex; align-items: center; gap: .5rem; width: min(21rem, 100%); padding: 0 .75rem; color: var(--ink-3); }
.search:focus-within { outline: 2px solid var(--action); outline-offset: -1px; border-color: var(--action); }
.search input { border: 0; outline: 0; background: none; width: 100%; min-width: 0; color: var(--ink); }
.search input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

/* forms: label over field, one error line, actions in a row */
.fld { display: flex; flex-direction: column; gap: .2rem; font-weight: 500; }
.fld small { font-weight: 400; color: var(--ink-2); font-size: var(--t-sm); }
.fld .field { font-weight: 400; }
.check { display: inline-flex; align-items: center; gap: .5rem; height: var(--ctl); padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); }
.check:has(input:disabled) { cursor: default; color: var(--ink-2); }
.form-err { color: var(--danger); font-weight: 500; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.brand { padding: .15rem .65rem .8rem; font-weight: 800; font-size: 1.3rem; line-height: 1.1; }

.main { min-width: 0; }
.page { padding: 1rem var(--pad) 2.5rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
.page-head h1 { font-size: var(--t-page); font-weight: 700; line-height: 1.25; }
.h-sub { color: var(--ink-2); }
.grow { flex: 1; }
/* the toolbar's buttons are the plain kind (round 4, R1): the back arrow's icon sits on the page's
   left edge and the last button's word ends on the right one — the frames went, the x stayed */
.toolbar { display: flex; align-items: center; gap: .5rem; min-height: var(--ctl); margin-bottom: .75rem; }
.toolbar > .btn.plain:first-child { margin-left: -.65rem; }
.toolbar .end { display: flex; gap: .5rem; margin-left: auto; margin-right: -.65rem; flex: none; }
.toolbar .icon-btn { width: var(--ctl); padding: 0; }
.anchor { position: relative; }   /* a button with a menu hanging from it */
.loading { padding: 3rem var(--pad); color: var(--ink-2); text-align: center; }

/* ============================================================ list */
/* rows run edge to edge; their text lines up with the page title */
.v4 .list { margin: 0 calc(-1 * var(--pad)); border-top: 1px solid var(--line); }
.v4 .item { position: relative; border-bottom: 1px solid var(--line); }
.v4 .row { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; width: 100%; min-height: 4.125rem; padding: .55rem var(--pad); border: 0; background: none; text-align: left; position: relative; }
.v4 .row:hover, .v4 :where(.item:hover) > .row { background: var(--hover); }
/* unread = bold, nothing else: the row already carries tags, the waiting edge and the date */
.v4 .row.wait { box-shadow: inset 4px 0 0 var(--mark); }
.r-who, .r-what { display: flex; flex-direction: column; min-width: 0; }
.r-name { font-size: var(--t-read); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-firm { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-firm.new { color: var(--action); font-weight: 500; }
.r-subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-subj .ic { width: 1rem; height: 1rem; vertical-align: -.15em; margin-left: .4rem; color: var(--ink-3); }
.r-sum { color: var(--ink-2); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread .r-name, .unread .r-subj { font-weight: 700; }
.r-meta { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.r-when { min-width: 5.25rem; text-align: right; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-when.late { color: var(--danger); font-weight: 500; }
.v4 .row.card { grid-template-columns: min(26rem, 38%) minmax(0, 1fr) auto; }   /* a share of the row, so summaries start at one x */
.v4 .row.crow { grid-template-columns: 16rem 9rem minmax(0, 1fr) auto; }
.c-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }

.v4 .row.sel { background: var(--selected); box-shadow: inset 4px 0 0 var(--ink); }

/* a kind the office added (ticket 17) has no drawing: its initials in a frame, an icon's size */
.ic.kl { display: inline-grid; place-items: center; border: 1.7px solid currentColor; border-radius: 5px; font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }

.empty { padding: 3rem var(--pad); text-align: center; color: var(--ink-2); }
.empty .ic { width: 2.75rem; height: 2.75rem; color: var(--ok); stroke-width: 1.5; }
.empty h2 { font-size: var(--t-title); color: var(--ink); margin: .5rem 0 .2rem; }
.empty .btn { margin-top: 1rem; }


/* ============================================================ thread */
.page-thread { display: flex; flex-direction: column; min-height: calc(100dvh - var(--banner)); padding-bottom: 0; }
.th { display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; }
.th-title { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; min-width: 0; }
.th-tags { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.th-tags .anchor { display: inline-flex; }
.th-tags .menu { left: 0; right: auto; }          /* the kind menu hangs from its tag… */
.th-tags .menu.flip { left: auto; right: 0; }     /* …or, near the right edge, the other way */
/* the subject: the page title's size, one weight down (round 4, R2) — big and not bold reads
   calmer than medium and bold, and it outranks the red tag next to it */
.th-subj { font-size: var(--t-page); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
/* the customer row: no line under it — the subject, the customer and the first message are three
   steps down one page, not three compartments (R1); the number is a text link with its icon (.contact) */
.th-who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .2rem; padding-bottom: .5rem; margin-bottom: .5rem; }
.who-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; min-width: 0; }
.toolbar + .th-who { margin-top: -.3rem; }
.who-name { border: 0; background: none; padding: 0; color: var(--action); font-weight: 400; text-align: left; overflow-wrap: anywhere; }   /* blue already says „press" (R4) */
.who-name:hover { text-decoration: underline; text-underline-offset: .2em; }
.who-plain { font-weight: 400; overflow-wrap: anywhere; }
.who-detail { color: var(--ink-3); }
.contact { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.contact:hover { text-decoration: underline; text-underline-offset: .2em; }
.contact .ic { width: 1.1rem; height: 1.1rem; color: var(--ink-3); }

.menu { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30; min-width: 17rem; padding: .3rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 12px 32px rgba(21, 24, 28, .2); }
.menu button { display: flex; align-items: center; gap: .6rem; width: 100%; height: var(--ctl); padding: 0 .7rem; border: 0; border-radius: 6px; background: none; text-align: left; }
.menu button:hover { background: var(--hover); }
.menu button.cur { font-weight: 500; }
.menu button.danger { color: var(--danger); }
.menu-label { padding: .5rem .7rem .1rem; font-size: var(--t-sm); color: var(--ink-2); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: .3rem 0; }
/* the right mouse button on a row (ticket 17): at the pointer, on <body>, scrolling inside when long */
.menu.ctx-menu { position: fixed; top: 0; right: auto; z-index: 70; max-height: calc(100dvh - 16px); overflow: auto; }
.menu .tick { margin-left: auto; }

/* „Nowy nadawca": a quiet notice under the who-block; „Dodaj do klientów" opens the form in its place */
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem .5rem .5rem .9rem; margin-bottom: .75rem; border-radius: var(--r); background: var(--fill); }
.notice p { flex: 1 1 14rem; }
.notice-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
form.notice { display: block; padding: .9rem; }
form.notice h2 { font-size: var(--t-title); margin-bottom: .7rem; }
form.notice .form-err { margin-bottom: .7rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem .9rem; margin-bottom: .9rem; }
.choice { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.choice legend { font-weight: 500; padding: 0; margin-bottom: .3rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice .check:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 500; }

/* messages: in order, older ones collapsed to one line */
.msgs { flex: 1 0 auto; }
.msgs:last-child { padding-bottom: 1.5rem; }   /* nothing to answer under it (spam) */
.msg { margin-bottom: .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); scroll-margin-top: calc(.75rem + var(--banner)); }
.msg.out { background: var(--fill); }
.msg.note { border-style: dashed; border-color: var(--line-strong); }
.msg-head { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 2.75rem; padding: 0 .9rem; border: 0; border-radius: var(--r); background: none; text-align: left; }
button.msg-head:hover { background: var(--hover); }
/* the sender's line (round 4, R4b): initials in a disc 4px under the control height (36px at Zwykły),
   white on our own grey messages; then the name, text size and bold — the anchor of a message */
.ini { display: grid; place-items: center; flex: none; width: calc(var(--ctl) - 4px); height: calc(var(--ctl) - 4px); border-radius: 50%; background: var(--selected); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; letter-spacing: .02em; }
.msg.out .ini { background: var(--sheet); }
.msg-who { margin-left: .1rem; font-size: var(--t-read); font-weight: 700; white-space: nowrap; }
/* an outside sender's address by the name (ochrona ticket 1): second layer, and it may break, so a long one wraps on a phone */
.msg-addr { color: var(--ink-3); font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
.msg-snip { flex: 1; min-width: 0; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-when { margin-left: auto; color: var(--ink-3); font-size: var(--t-sm); white-space: nowrap; }
.msg-body { max-width: 46rem; padding: .1rem .9rem .9rem; font-size: var(--t-read); line-height: 1.55; overflow-wrap: anywhere; }
.msg-body p { margin: 0 0 .75em; }
.msg-body .msg-rcpt { margin-bottom: .6em; color: var(--ink-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
.msg-body p:last-child { margin-bottom: 0; }
/* the second layer of text — signatures, quotes, meta — on --ink-3 (6:1), not on the near-black --ink-2 (R3) */
.sig { color: var(--ink-3); }
.quote { border-left: 3px solid var(--line-strong); padding-left: .8rem; color: var(--ink-3); font-size: var(--t-base); }
/* real mail HTML inside a message: tamed to the page, never smaller than the floor */
.msg-body .mail { overflow-x: auto; }
.msg-body .mail img { max-width: 100%; height: auto; }
.msg-body .mail img[data-src] { visibility: hidden; }   /* a held image keeps its place, not a broken-image icon; the bar says why */
.msg-body .mail table { max-width: 100%; border-collapse: collapse; }
.msg-body .mail h1, .msg-body .mail h2 { font-size: var(--t-title); margin: 0 0 .5em; }
.msg-body .mail a { color: var(--action); }
.msg-body .mail blockquote { margin: 0; border-left: 3px solid var(--line-strong); padding-left: .8rem; color: var(--ink-3); }
.msg-body .mail .msg-body { max-width: none; padding: 0; }   /* the wrapper composeOutgoingHtml puts around our replies */
.msg-body .mail .msg-signature { color: var(--ink-3); }
.msg-body .mail [style*="font-size"] { font-size: inherit !important; }   /* nothing below the floor */
.msg-body .mail .msg-footer { color: var(--ink-3) !important; font-size: var(--t-sm) !important; }
.msg-body .quote-toggle { margin: .75em 0 0; }
/* „Przekaż dalej" (poczta ticket 7): a plain button closing every open mail, its icon on the text's edge;
   a mail that went further says where in one grey line under „Do:" */
.msg-acts { display: flex; gap: .5rem; margin: .75rem 0 0 -.65rem; }
.msg-body .msg-fwded { margin: -.3em 0 .6em; color: var(--ink-3); font-size: var(--t-sm); }   /* one run of text: it wraps as words, the icon stays with them */
.msg-fwded .ic { width: 1rem; height: 1rem; margin-right: .35rem; vertical-align: -.2em; }
.msg-fwded .link { margin-left: .5rem; }
.files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
/* an attachment is a grey chip, not a framed control (R1): a frame only where you type.
   On our own grey message the chip is white, one step off its surface */
.file { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; height: var(--ctl); padding: 0 .75rem; border: 1px solid transparent; border-radius: var(--r); background: var(--fill); color: var(--ink); font-size: var(--t-base); font-weight: 400; text-decoration: none; }
.file:hover { background: var(--hover); }
.msg.out .file { background: var(--sheet); }
.msg.out .file:hover { background: var(--selected); }
.file .fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file small { flex: none; font-weight: 400; color: var(--ink-3); font-size: var(--t-sm); }
.file .ic { color: var(--ink-3); }
/* a dangerous type: the chip's shape, nothing to press — the lock and the words say why */
.file.blocked, .msg.out .file.blocked { background: var(--fill); color: var(--ink-2); cursor: default; }
.file.blocked .ic { color: var(--ink-2); }
/* remote images held back: the notice's grey bar inside the mail, at the page's text size */
.msg-body .imgs-held { margin: 0 0 .75rem; font-size: var(--t-base); line-height: 1.5; color: var(--ink-2); }
.msg-body .imgs-held p { margin: 0; }
.file .x { display: grid; border: 0; background: none; padding: .2rem; margin-right: -.4rem; border-radius: 4px; }
.file .x:hover { background: var(--hover); }
.closed-note { display: flex; align-items: center; gap: .5rem; margin: .6rem 0; color: var(--ok); font-weight: 500; }

/* the field with a formatting bar (poczta ticket 4) in a form (Szablony, Podpisy, „Nowy szablon"): a row
   of 40px plain buttons over the text; Enter is a line, a paragraph's margin is one blank line, so typed
   and pasted text look alike. The mail editor (v5.css .editor) draws the same field its own way. */
.ed-bar { display: none; align-items: center; gap: .1rem; padding: 0 .4rem; border-bottom: 1px solid var(--line); }
.ed.boxed .ed-bar { display: flex; }
.ed-btn { width: var(--ctl); padding: 0; font-size: var(--t-read); font-weight: 400; }
.ed-btn b { font-weight: 700; }
.ed-btn[aria-pressed="true"], .ed-btn[aria-pressed="true"]:hover { background: var(--selected); }
.ed-area { position: relative; display: block; width: 100%; min-height: 2.75rem; max-height: 40vh; overflow-y: auto; padding: .6rem .9rem; outline: 0; font-size: var(--t-read); font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; cursor: text; }
.ed-area[data-empty]::before { content: attr(data-ph); position: absolute; color: var(--ink-3); pointer-events: none; }
.ed-area p, .ed-area ul, .ed-area ol { margin: 0 0 1.5em; }
.ed-area ul, .ed-area ol { padding-left: 1.6em; }
.ed-area > :last-child { margin-bottom: 0; }
.ed-area a { color: var(--action); }
/* a link: one row under the bar — the address, Wstaw, Anuluj */
.ed-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .9rem; border-bottom: 1px solid var(--line); background: var(--fill); }
.ed-link-lbl { color: var(--ink-3); }
.ed-link .field { flex: 1 1 14rem; min-width: 0; }
.ed-link .field:focus { outline: 0; }   /* the box around it is already blue: no second ring inside */
.ed-link .ed-link-err { flex-basis: 100%; padding: 0; }
/* in a form (a template, the „Nowy szablon" window) the editor is a field: its frame, the bar always there */
.ed.boxed { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.ed.boxed:focus-within { outline: 2px solid var(--action); outline-offset: -1px; border-color: var(--action); }
.ed.boxed .ed-area { min-height: 12rem; max-height: 50vh; }
.comp-err { padding: .5rem .9rem 0; color: var(--danger); font-weight: 500; }
.contact.addr:hover { text-decoration: none; }   /* the address is text to copy; „Napisz" beside it writes */

/* a phone note: its own window over a dimmed, inert page (D14) — grey like a note in the
   conversation, its own title and two buttons, so it never reads as the mail field */
.note-dlg { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--fill); color: var(--ink); box-shadow: 0 16px 40px rgba(21, 24, 28, .3); }
.note-dlg::backdrop { background: rgba(21, 24, 28, .5); }
.note-dlg h2 { font-size: var(--t-title); font-weight: 700; line-height: 1.3; }
.note-lead { margin: .15rem 0 .9rem; color: var(--ink-2); }
.note-dlg .form-err { margin-bottom: .6rem; }
.note-dlg textarea.field { min-height: 9rem; font-size: var(--t-read); line-height: 1.5; }
.note-actions { margin-top: .9rem; }
/* „Nowy szablon" (przeprowadzka ticket 15): the phone note's window, with three fields */
.tpl-dlg .fld + .fld { margin-top: .75rem; }
.tpl-dlg .ed-area { max-height: 40vh; }

/* ============================================================ client card, settings */
.c-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; margin-bottom: .9rem; }
.c-head h1 { font-size: var(--t-page); font-weight: 700; line-height: 1.25; }
.c-sub { color: var(--ink-2); }
.c-contact { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.sect-title { font-size: var(--t-base); font-weight: 700; padding: .5rem 0; }
/* the card's tabs: underlined when selected, never a scroll container (LEDGER 4.6) */
.ctabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line-strong); }
.ctab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: var(--ctl); padding: 0 .9rem; border: 0; background: none; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.ctab:hover { color: var(--ink); }
.ctab.on { color: var(--ink); }
.ctab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ink); }
.ctab small { font-size: var(--t-sm); font-weight: 400; color: var(--ink-2); }
.page-client .cpanel > .list { border-top: 0; }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
.opts.col { flex-direction: column; align-items: flex-start; }
/* Historia zmian: what changed, then when and who */
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hist li { display: flex; flex-direction: column; min-width: 0; }
.hist-what { overflow-wrap: anywhere; }
.hist-meta { color: var(--ink-2); font-size: var(--t-sm); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 3rem; }
.sect { padding: 1.1rem 0; min-width: 0; scroll-margin-top: var(--banner); }   /* #/settings/<section> lands below the test strip */
.sect.wide { grid-column: 1 / -1; }
.sect h2 { font-size: var(--t-base); font-weight: 700; margin-bottom: .4rem; }
.sect > .btn, .sect > .form-actions { margin-top: .75rem; }
.sect .fld + .fld, .sect .fld + .check, .sect .check + .fld, .sect .hint + .fld, .sect .hint + .choice { margin-top: .75rem; }
.kv { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .35rem .8rem; }
.kv dt { color: var(--ink-2); } .kv dd { overflow-wrap: anywhere; }
.hint { color: var(--ink-2); }
.opts { display: flex; flex-wrap: wrap; gap: .5rem; }
select.field { padding: 0 .5rem; }
/* a designed piece shown as a mail shows it: its own colours and table, an image never wider than the
   box, a table wider than the screen scrolls inside the box instead of the page sideways */
.mailish { overflow-x: auto; }
.mailish p { margin: 0 0 .75em; }
.mailish > :last-child, .mailish p:last-child { margin-bottom: 0; }
.mailish img { max-width: 100%; height: auto; }

/* ============================================================ a conversation on the move (drafts/wyslane)
   Confirm where the eye is, then show where it went. Motion only answers a click. */
/* Each animation here may be re-rendered mid-way (the cached list, then the fresh one): list.js puts
   how far it had got into --t, a negative delay, and it carries on from there. */
/* read: back on the list, the row you opened loses its bold slowly (Roboto loads as a weight range) */
.row.was-here { animation: was-here 1.8s ease-out var(--t, 0ms); }
.row.was-here .r-name, .row.was-here .r-subj { animation: read-fade .8s ease var(--t, 0ms) both; }
@keyframes was-here { from { background: var(--selected); } to { background: transparent; } }
@keyframes read-fade { from { font-weight: 700; } to { font-weight: 400; } }
/* Wyślij: the reply lands on a green tint with „Wysłano" */
.btn.primary .spin { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.msg.landed { animation: landed 1.8s ease-out; }
@keyframes landed {
  0% { opacity: 0; transform: translateY(.6rem); background: var(--ok-tint); border-color: var(--ok); }
  18% { opacity: 1; transform: none; background: var(--ok-tint); border-color: var(--ok); }
  100% { background: var(--fill); border-color: var(--line); }
}
.msg-sent { display: inline-flex; align-items: center; gap: .35rem; margin-left: .25rem; color: var(--ok); font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.msg-sent .ic, .bye-note .ic { width: 1.15rem; height: 1.15rem; }
/* back on the list: the row holds its new state where it was, then folds out */
.row.bye, .row.bye:hover { background: var(--ok-tint); }
.row.bye .r-name, .row.bye .r-subj { font-weight: 400; }
.row.bye .r-meta > * { display: none; }
.row.bye .r-meta > .bye-note { display: inline-flex; }
.bye-note { display: none; align-items: center; gap: .4rem; color: var(--ok); font-weight: 700; white-space: nowrap; }
.row.bye.quiet, .row.bye.quiet:hover { background: var(--fill); }
.row.bye.quiet .bye-note { color: var(--ink-2); font-weight: 500; }
.item.fold { overflow: hidden; transition: height .42s ease-in-out, opacity .42s ease-in-out, border-color .42s; }
.item.fold.shut { opacity: 0; border-color: transparent; }
/* where it went: the counts step down, „Wysłane" lights up with +1 */
.count.tick, .tp b.tick { animation: tick .45s ease-out; }
@keyframes tick { from { transform: translateY(-.4rem); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes got { 0%, 40% { background: var(--ok-tint); } 100% { background: transparent; } }
@keyframes got-quiet { 0%, 40% { background: var(--selected); } 100% { background: transparent; } }
.count.got-n { background: var(--ok); color: #fff; animation: got-n 2s ease-out var(--t, 0ms) forwards; }
.count.got-n.quiet { background: var(--ink-3); }
@keyframes got-n { 0% { opacity: 0; transform: scale(.7); } 15%, 65% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* in „Wysłane": the conversation that just arrived; one closed without a mail says so */
.row.fresh { animation: fresh 2.6s ease-out var(--t, 0ms); }
.row.fresh.quiet { animation-name: fresh-quiet; }
@keyframes fresh { 0%, 45% { background: var(--ok-tint); } 100% { background: transparent; } }
@keyframes fresh-quiet { 0%, 45% { background: var(--selected); } 100% { background: transparent; } }
.tag.quiet { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .item.fold { transition: none; }
  .row.was-here, .row.was-here .r-name, .row.was-here .r-subj, .msg.landed, .count.tick, .tp b.tick, .nav-item.got, .tab.got, .row.fresh, .btn.primary .spin { animation: none; }
  .count.got-n { animation: none; }
}

/* ============================================================ phone */
@media (max-width: 819px) {
  :root { --pad: 1rem; }
  .page { padding-bottom: 5rem; }
  .page-head h1 { flex: 1; min-width: 0; font-size: 1.3rem; }
  .page-head .search { order: 3; width: 100%; }
  .page-head .grow, .page-head .h-sub { display: none; }
  .v4 .row, .v4 .row.card, .v4 .row.crow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who meta" "what what"; gap: .1rem .75rem; align-items: start; padding-top: .7rem; padding-bottom: .75rem; }
  .v4 .row .r-who { grid-area: who; } .v4 .row .r-what { grid-area: what; } .v4 .row .r-meta { grid-area: meta; }
  .v4 .row .tag.topic, .v4 .row .r-firm:not(.new) { display: none; }
  .v4 .row .r-when { min-width: 0; }
  .v4 .row.crow .c-cell { display: none; }
  /* thread header on a phone: tags under the title as one group; the client is one block, the number is a call button */
  .page-thread .toolbar { margin-bottom: .6rem; }
  .toolbar .note-btn { width: var(--ctl); padding: 0; }
  .toolbar .note-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* the phone note fills the screen; its buttons run full width right under the field (above the keyboard) */
  .note-dlg { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; }
  .note-dlg textarea.field { min-height: 12rem; }
  .note-actions { flex-direction: column; }
  .note-actions .btn { width: 100%; }
  .th-title { display: block; }
  .th-subj { font-size: 1.3rem; }   /* the page title's size on a phone, as .page-head h1 */
  .th-tags { display: flex; margin-top: .35rem; }
  .th-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-top: .6rem; padding-bottom: .6rem; margin-bottom: .6rem; }
  .who-id { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
  .who-name, .who-plain { font-size: var(--t-read); }
  .who-detail { font-size: var(--t-sm); }
  /* the number stays a 40px outlined call button here — a thumb target (LEDGER 4.7) */
  .who-call { height: var(--ctl); padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); }
  .who-call:hover { background: var(--hover); text-decoration: none; }
  .msg-head { flex-wrap: wrap; gap: 0 .65rem; padding-top: .45rem; padding-bottom: .45rem; }
  .msg-snip { order: 3; flex-basis: 100%; }
  .msg-who:has(.msg-addr) { flex: 1 1 0; min-width: 0; white-space: normal; }   /* name and address beside the disc, wrapping there */
  .page-thread { padding-bottom: 0; }
  .menu { min-width: min(17rem, calc(100vw - 2rem)); }
  .c-head { align-items: flex-start; flex-direction: column; }
  .ctabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ctab { padding: 0; }
  .cols .sect + .sect { border-top: 1px solid var(--line); }
}