/* Bartix CRM — UI v4. Ported from drafts/ui-v4/app.css (round 3b).
   Values and the rules of the system 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; }
.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; }

/* ============================================================ shell */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100dvh - var(--banner)); }
.side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--banner); height: calc(100dvh - var(--banner)); padding: .75rem .5rem .5rem; background: var(--side-bg); border-right: 1px solid var(--line); }
.brand { padding: .15rem .65rem .8rem; font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.nav-item { display: flex; align-items: center; gap: .65rem; width: 100%; height: var(--ctl); padding: 0 .65rem; border: 0; border-radius: var(--r); background: none; color: var(--ink); font-weight: 400; text-align: left; white-space: nowrap; }
.nav-item:hover { background: #E0E0E0; }
/* selected = one step off the surface and a black left edge, as the open row in two panes (round 4, R6):
   the black block was the darkest thing on the screen, and it is navigation, not content */
.nav-item.on, .nav-item.on:hover { background: var(--sheet); color: var(--ink); font-weight: 500; box-shadow: inset 4px 0 0 var(--ink); }
.nav-item .count { margin-left: auto; }
.side hr { border: 0; border-top: 1px solid var(--line); margin: .4rem .5rem; width: auto; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.me { display: flex; align-items: center; gap: .65rem; height: var(--ctl); padding: 0 .65rem; margin-top: .25rem; border-top: 1px solid var(--line); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.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; }
.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 */
.list { margin: 0 calc(-1 * var(--pad)); border-top: 1px solid var(--line); }
.item { border-bottom: 1px solid var(--line); }
.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; }
.row:hover { background: var(--hover); }
/* unread = bold, nothing else: the row already carries tags, the waiting edge and the date */
.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; }
.row.card { grid-template-columns: min(26rem, 38%) minmax(0, 1fr) auto; }   /* a share of the row, so summaries start at one x */
.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); }

/* stacked row: phone and the list pane of the two-pane layout */
.row.stack { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who meta" "what what"; gap: .1rem .75rem; align-items: start; padding-top: .65rem; padding-bottom: .7rem; }
.row.stack .r-who { grid-area: who; } .row.stack .r-what { grid-area: what; } .row.stack .r-meta { grid-area: meta; }
.row.stack .tag.topic, .row.stack .r-firm:not(.new) { display: none; }
.row.stack .r-when { min-width: 0; }
.row.sel { background: var(--selected); box-shadow: inset 4px 0 0 var(--ink); }

/* kinds of matter: an icon bar above the list, always visible. Only the selected one spells its name. */
.topics { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .6rem; }
.tp { gap: .4rem; }
.tp .lbl { display: none; }
.tp.on .lbl { display: inline; }
.tp b { font-weight: 500; font-variant-numeric: tabular-nums; }
.tp.zero { color: var(--ink-3); }
/* the selected kind, spelled out, with the way back */
.topic-state { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .6rem; color: var(--ink-2); }

.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; }

/* ============================================================ two panes (a setting, desktop only) */
.split { display: grid; grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr); height: calc(100dvh - var(--banner)); --pad: 1rem; }
.pane-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.pane-list .page-head { padding: 1rem var(--pad) 0; }
.pane-list .page-head .search { flex: 1 1 10rem; width: auto; }
/* narrow list: eight equal cells, icons only; the selection is spelled in a line under the bar */
.pane-list .topics { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: .6rem var(--pad) .5rem; }
.pane-list .tp { padding: 0; }
.pane-list .tp .lbl, .pane-list .tp b { display: none; }
.pane-list .topic-state { justify-content: space-between; margin: 0 var(--pad) .5rem; }
.pane-list .list { margin: 0; overflow: auto; flex: 1; min-height: 0; }
.pane-thread { --pad: 1.5rem; display: flex; flex-direction: column; min-width: 0; overflow: auto; padding: 1rem var(--pad) 0; }   /* its own gutter, so the dock's panel reaches both edges */

/* ============================================================ 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; }

/* „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; }   /* no dock 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; }
.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 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 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; }
.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); }
.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; }

/* reply dock: pinned to the bottom of the screen, a grey panel from edge to edge with a hairline on
   top (round 4, R5) — the gap above it says „the page ends here", not „something is missing"; the
   white reply box on grey is the one place to type. The field is one line until used. */
.dock { position: sticky; bottom: 0; z-index: 5; margin: .25rem calc(-1 * var(--pad)) 0; padding: .75rem var(--pad) 1rem; background: var(--fill); border-top: 1px solid var(--line); }
/* „W skrócie" (the classifier, ticket 16) and „Ustalenia": one line each over the field, at text size —
   they are what you read before you answer, not footnotes; a click shows the whole line */
.remember, .dock-sum { display: flex; gap: .4rem; width: 100%; border: 0; background: none; padding: 0 0 .5rem; text-align: left; font-size: var(--t-base); color: var(--ink-2); }
.remember b, .dock-sum b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.remember span, .dock-sum span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remember[aria-expanded="true"] span, .dock-sum[aria-expanded="true"] span { white-space: normal; }
/* the reply field has no frame of its own: the whole box turns blue (the focus rule) */
.comp { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.comp:focus-within { border-color: var(--action); outline: 1px solid var(--action); }
.comp textarea { display: block; width: 100%; min-height: 2.75rem; max-height: 40vh; border: 0; outline: 0; resize: none; background: none; padding: .6rem .9rem; font-size: var(--t-read); line-height: 1.5; }
.comp:focus-within textarea, .comp.has-text textarea { min-height: 5.75rem; }
.comp .files { margin: 0; padding: 0 .9rem .6rem; }
.comp-bar { display: flex; align-items: center; gap: .25rem; padding: .4rem; border-top: 1px solid var(--line); }
.comp-bar .end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.comp-err { padding: .5rem .9rem 0; color: var(--danger); font-weight: 500; }
/* the signature (D9): picked in the action row; while writing it shows read-only in grey under
   the field, as it will end the mail — the idle dock stays as small as before */
.sig-prev { display: none; padding: 0 .9rem .6rem; color: var(--ink-3); font-size: var(--t-read); line-height: 1.5; overflow-wrap: anywhere; }
.comp:focus-within .sig-prev, .comp.has-text .sig-prev, .comp.picking .sig-prev { display: block; }
.comp-bar .sig-pick { display: flex; flex: 0 1 auto; min-width: 0; }
.sig-btn { flex: 0 1 auto; min-width: 0; }
.sig-btn .sig-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sig-btn .chev { width: 1rem; height: 1rem; margin-left: -.2rem; color: var(--ink-3); }
.comp-bar .menu { top: auto; bottom: calc(100% + .25rem); left: 0; right: auto; }   /* the dock is at the bottom: it opens upward */
.menu-hint { margin-left: auto; padding-left: 1rem; color: var(--ink-2); font-size: var(--t-sm); font-weight: 400; }

/* 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; }

/* ============================================================ 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; }
.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 { 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; }
/* Twoje podpisy: a row per signature — name, „domyślny", the kind; the text in grey — and its actions */
.sig-list { margin-top: .6rem; border-top: 1px solid var(--line); }
.sig-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 2rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.sig-main { flex: 1 1 16rem; min-width: 0; }
.sig-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.sig-title { font-weight: 500; overflow-wrap: anywhere; }
.sig-text { margin-top: .2rem; color: var(--ink-2); }
.sig-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.sig-form { max-width: 40rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.sig-form .form-err { margin-bottom: .6rem; }
.sig-form .form-actions { margin-top: .9rem; }
select.field { padding: 0 .5rem; }
.navlist { display: grid; gap: .5rem; }
.navlist .btn { justify-content: flex-start; }
/* the company footer: edited as it will look in the mail */
.footer-ed { min-height: 6rem; padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); font-weight: 400; overflow-wrap: anywhere; }
.footer-ed:focus { outline: 2px solid var(--action); outline-offset: -1px; border-color: var(--action); }
.footer-ed[contenteditable="false"] { background: var(--fill); color: var(--ink-2); }
.footer-ed p { margin: 0; }
.footer-ed [style*="font-size"] { font-size: var(--t-sm) !important; }

/* ============================================================ Historia (spec 8; SPEC in drafts/historia/NOTES.md) */
/* one timeline per day: the time, the kind of event as an icon in a circle on a line, the event in
   plain words; the last seven days in a column on the right */
.page-history { --tl-time: 3.6rem; --tl-gap: 1.1rem; padding-top: 1.25rem; }
.tl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 2.5rem; align-items: start; }
.tl-main { min-width: 0; }
.tl-head { display: flex; align-items: baseline; gap: .75rem; min-width: 0; margin-bottom: 1.4rem; }
.tl-head h1 { font-size: var(--t-page); font-weight: 700; line-height: 1.25; white-space: nowrap; }
.tl-date { color: var(--ink-2); font-size: var(--t-read); white-space: nowrap; }
.tl-date .d-short { display: none; }
.tl-rule { flex: 1; min-width: 1rem; height: 1px; align-self: center; background: var(--line); }
.tl-count { color: var(--ink-3); white-space: nowrap; }

.tl { list-style: none; margin: 0; padding: 0; }
.ev { position: relative; padding-bottom: 1.6rem; }
.ev:last-child { padding-bottom: .5rem; }
/* the line runs from one circle down to the next */
.ev::before { content: ""; position: absolute; z-index: 1; left: calc(var(--tl-time) + var(--tl-gap) + var(--ctl) / 2 - .5px); top: var(--ctl); bottom: 0; width: 1px; background: var(--line); }
.ev:last-child::before { display: none; }
.ev-btn { display: grid; grid-template-columns: var(--tl-time) var(--ctl) minmax(0, 1fr); column-gap: var(--tl-gap); align-items: start; width: calc(100% + 1rem); margin: -.4rem -.5rem; padding: .4rem .5rem; border: 0; border-radius: var(--r); background: none; color: inherit; text-align: left; }
button.ev-btn:hover { background: var(--hover); }
.ev-time { line-height: var(--ctl); font-size: var(--t-title); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ev-dot { position: relative; z-index: 2; display: grid; place-items: center; width: var(--ctl); height: var(--ctl); border: 1px solid var(--line); border-radius: 50%; background: var(--sheet); color: var(--ink-3); }
.ev-dot .ic { width: 1.15rem; height: 1.15rem; }
/* ours (a reply, a phone note) is grey, like our messages in a conversation; what came in is white */
.ev.tone-out .ev-dot { background: var(--fill); color: var(--ink); }
.ev.tone-in .ev-dot { color: var(--ink); border-color: var(--line-strong); }
.ev-dot .ic.urgent { color: var(--danger); }
/* the icon says its name the moment the pointer is on it */
.ev-dot[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + .4rem); z-index: 5; transform: translateX(-50%); padding: .3rem .6rem; border-radius: 6px; background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; }
/* the event: what happened in plain words, then the facts as a mail header says them */
.ev-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ev-title { padding-top: calc((var(--ctl) - 1.5em) / 2); font-size: var(--t-read); font-weight: 700; line-height: 1.5; }
.ev.tone-status .ev-title { font-weight: 500; }
.ev-facts { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: .1rem; }
.ev-fact { min-width: 0; overflow-wrap: anywhere; }
.ev-fl { color: var(--ink-3); }
.ev-fv { font-weight: 500; }
.ev-line { color: var(--ink-2); overflow-wrap: anywhere; }
.ev-explain { color: var(--ink-2); font-size: var(--t-sm); }
/* mail and notes: their content in a frame, as a message in the conversation */
.ev-card { display: flex; flex-direction: column; gap: .2rem; margin-top: .35rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); overflow-wrap: anywhere; }
.ev-card > span { max-width: 46rem; }
.ev-card-subj, .ev-card-text { font-size: var(--t-read); }
.ev-card-text { line-height: 1.5; }
.ev.tone-out .ev-card { background: var(--fill); }
.ev-card.note { border-style: dashed; border-color: var(--line-strong); }
.ev-card.note .ev-card-subj { font-size: var(--t-base); color: var(--ink-2); }
button.ev-btn:hover .ev-card { border-color: var(--line-strong); }

/* the days, on the right; the selected one has the tab's underline, standing up */
.tl-rail { position: sticky; top: calc(1rem + var(--banner)); display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding-top: .1rem; }
.days { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.day-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: var(--ctl); padding: 0 .75rem 0 1rem; border: 0; border-radius: 0 var(--r) var(--r) 0; background: none; color: var(--ink-2); text-align: left; white-space: nowrap; }
.day-row:hover { background: var(--hover); color: var(--ink); }
.day-row.on { color: var(--ink); font-weight: 500; }
.day-row.on::before { content: ""; position: absolute; left: -2px; top: .45rem; bottom: .45rem; width: 3px; border-radius: 2px; background: var(--ink); }
.day-n { color: var(--ink-3); font-size: var(--t-sm); font-weight: 400; font-variant-numeric: tabular-nums; }
.day-pick-wrap { position: relative; display: inline-flex; min-width: 0; }
.rail-pick { align-self: flex-start; color: var(--ink-2); }
.rail-pick .ic { color: var(--ink-3); }
/* the browser's own date picker opens under its button; the input itself is never seen */
.day-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.tl-rail hr { width: 100%; margin: .4rem 0; border: 0; border-top: 1px solid var(--line); }
.h-all { align-self: flex-start; }
.rail-sum { color: var(--ink-2); font-size: var(--t-sm); }
.rail-hint { display: flex; gap: .55rem; margin-top: .4rem; color: var(--ink-3); font-size: var(--t-sm); }
.rail-hint .ic { width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.tl-phonebar { display: none; }

/* ============================================================ login */
.login { display: grid; place-items: center; min-height: calc(100dvh - var(--banner)); padding: 1.5rem 1rem; background: var(--side-bg); }
.login-card { display: flex; flex-direction: column; gap: .9rem; width: min(24rem, 100%); padding: 1.75rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); }
.login-card .brand { padding: 0 0 .25rem; }
.login-card h1 { font-size: var(--t-page); font-weight: 700; line-height: 1.25; }
.login-card .btn.primary { width: 100%; margin-top: .25rem; }

/* ============================================================ toast */
.toast { position: fixed; left: 50%; top: calc(1rem + var(--banner)); z-index: 60; transform: translate(-50%, -1rem); display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: var(--r); background: var(--ink); color: #fff; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .13s, transform .13s; box-shadow: 0 10px 28px rgba(21, 24, 28, .3); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { border: 0; background: none; padding: .2rem; color: var(--mark); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }

/* ============================================================ phone */
.tabbar { display: none; }
@media (max-width: 819px) {
  :root { --pad: 1rem; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .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; }
  .row, .row.card, .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; }
  .row .r-who { grid-area: who; } .row .r-what { grid-area: what; } .row .r-meta { grid-area: meta; }
  .row .tag.topic, .row .r-firm:not(.new) { display: none; }
  .row .r-when { min-width: 0; }
  .row.crow .c-cell { display: none; }
  .topics { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
  .tp { padding: 0; }
  .tp .lbl, .tp.on .lbl, .tp b { display: none; }
  .topic-state { justify-content: space-between; margin-bottom: .5rem; }
  /* 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%; }
  .page-thread { padding-bottom: 0; }
  .menu { min-width: min(17rem, calc(100vw - 2rem)); }
  .dock { padding-bottom: .75rem; }
  /* the reply bar: an icon for the side action, the word stays on the main one;
     „Nie wymaga odpowiedzi" lives under Więcej */
  .comp-bar .btn.plain { width: var(--ctl); padding: 0; }
  .comp-bar .btn.plain .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comp-bar .btn.plain.keep { width: auto; padding: 0 .65rem; }
  .comp-bar .noreply { display: none; }
  .sig-btn .sig-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* the icon and the name */
  .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); }
  .toast { top: auto; bottom: 4.5rem; }
  .in-thread .toast { bottom: auto; top: calc(1rem + var(--banner)); }

  /* bottom bar: icons only; it steps aside while a conversation is open */
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 3.5rem; background: var(--sheet); border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
  .tab { position: relative; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); }
  .tab .ic { width: 1.6rem; height: 1.6rem; }
  .tab.on { color: var(--ink); }
  .tab.on::after { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--ink); }
  .tab .count { position: absolute; top: .35rem; left: calc(50% + .45rem); }
  .in-thread .tabbar { display: none; }

  /* Historia: no column of days — ‹ Inny dzień › above the line; the time shrinks */
  .page-history { --tl-time: 2.75rem; --tl-gap: .7rem; padding-top: 1rem; }
  .tl-layout { grid-template-columns: minmax(0, 1fr); }
  .tl-rail { display: none; }
  .tl-head { margin-bottom: .75rem; }
  .tl-head h1 { font-size: 1.3rem; }
  .tl-date .d-long { display: none; }
  .tl-date .d-short { display: inline; }
  .tl-phonebar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
  .daynav { display: flex; gap: .5rem; flex: 1 1 100%; min-width: 0; }
  .day-step { width: var(--ctl); padding: 0; }
  .daynav .day-pick-wrap { flex: 1 1 auto; }
  .day-pick { flex: 1 1 auto; }
  .ev-time { font-size: var(--t-base); }
  .ev-card { padding: .6rem .8rem; }
}

/* ============================================================ „Odstępy: Zwarte" (D21) */
/* the controls shrink through --ctl / --tag / --pad (tokens.css); here the rows and gaps that are
   not tokens — on every screen size, so these rules sit after the phone's */
html[data-density="compact"] .page { padding-top: .6rem; padding-bottom: 1.5rem; }
html[data-density="compact"] .page-head { margin-bottom: .45rem; }
html[data-density="compact"] .btn { padding: 0 .7rem; }
html[data-density="compact"] .btn.primary { padding: 0 1rem; }
html[data-density="compact"] .btn.plain { padding: 0 .5rem; }
html[data-density="compact"] .toolbar > .btn.plain:first-child { margin-left: -.5rem; }
html[data-density="compact"] .toolbar .end { margin-right: -.5rem; }
html[data-density="compact"] .side { padding: .5rem .4rem .4rem; }
html[data-density="compact"] .brand { padding-bottom: .5rem; }
html[data-density="compact"] .topics, html[data-density="compact"] .topic-state { margin-bottom: .35rem; }
html[data-density="compact"] .row { min-height: 3rem; gap: .1rem 1rem; padding-top: .3rem; padding-bottom: .3rem; }
html[data-density="compact"] .toolbar { margin-bottom: .45rem; }
html[data-density="compact"] .msg { margin-bottom: .35rem; }
html[data-density="compact"] .msg-head { min-height: 2.25rem; padding-left: .75rem; padding-right: .75rem; }
html[data-density="compact"] .msg-body { padding: 0 .75rem .65rem; }
html[data-density="compact"] .dock { padding: .5rem var(--pad) .6rem; }
html[data-density="compact"] .comp textarea { min-height: 2.25rem; padding: .4rem .75rem; }
html[data-density="compact"] .comp:focus-within textarea, html[data-density="compact"] .comp.has-text textarea { min-height: 4.5rem; }
html[data-density="compact"] .comp-bar { padding: .25rem; }
html[data-density="compact"] .notice { padding: .35rem .4rem .35rem .75rem; margin-bottom: .5rem; }
html[data-density="compact"] .sect { padding: .7rem 0; }
html[data-density="compact"] .c-head { margin-bottom: .6rem; }
html[data-density="compact"] .menu { padding: .2rem; }
html[data-density="compact"] .page-history { --tl-gap: .8rem; padding-top: .75rem; }
html[data-density="compact"] .tl-head { margin-bottom: .9rem; }
html[data-density="compact"] .ev { padding-bottom: 1rem; }
html[data-density="compact"] .ev-card { margin-top: .25rem; padding: .45rem .8rem; }
html[data-density="compact"] .ev-time { font-size: var(--t-read); }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }