:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #1c2330;
  --muted: #5d6778;
  --border: #dfe3ea;
  --accent: #2f6fdf;
  --accent-text: #ffffff;
  --danger: #c93a3a;
  --ok: #1f8a4c;
  --warn: #b7791f;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.06);
  /* Module colours (top row underline, later the module header). */
  --mod-contacts: #2f6fdf;
  --mod-calendar: #d64545;
  --mod-mail: #0f8b8d;
  --mod-files: #c98a12;
  --mod-notes: #7a52c7;
  --mod-finance: #1f8a4c;
  --mod-admin: #64748b;
  --mod-account: #4a6fa5;
  /* Height of the top row; full-height module pages use the rest. */
  --nav-h: 55px;
  --app-h: calc(100vh - var(--nav-h));
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151b;
    --surface: #1a1f27;
    --surface-2: #222833;
    --text: #e6e9ef;
    --muted: #9aa4b5;
    --border: #2e3542;
    --accent: #5b8ff0;
    --danger: #ef6b6b;
    --ok: #4cc27f;
    --warn: #e0a84a;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.boot { padding: 40px; text-align: center; color: var(--muted); }

/* Layout */
.shell { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; }
.brand { font-weight: 700; font-size: 18px; }
/* Top row (main menu): modules as text links, on the right the save state, administration, account and sign-out. */
.topnav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
/* Narrower windows: the brand and the save label give way to the module links (the tooltip keeps the save state). */
@media (max-width: 1100px) { .nav-brand span, .sync-label { display: none; } .topnav { gap: 6px; } }
.nav-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; padding-right: 6px; cursor: default; user-select: none; }
.nav-brand img { width: 34px; height: 34px; display: block; }
.nav-links, .nav-right { display: flex; align-items: center; gap: 2px; height: 100%; }
.nav-right { margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: none; cursor: pointer; box-shadow: inset 0 3px 0 transparent; white-space: nowrap; }
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.active { color: var(--text); box-shadow: inset 0 3px 0 var(--mod, var(--accent)); }
.nav-link[data-section="contacts"] { --mod: var(--mod-contacts); }
.nav-link[data-section="calendar"] { --mod: var(--mod-calendar); }
.nav-link[data-section="mail"] { --mod: var(--mod-mail); }
.nav-link[data-section="files"] { --mod: var(--mod-files); }
.nav-link[data-section="notes"] { --mod: var(--mod-notes); }
.nav-link[data-section="finance"] { --mod: var(--mod-finance); }
.nav-link[data-section="admin"] { --mod: var(--mod-admin); }
.nav-link[data-section="account"] { --mod: var(--mod-account); }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--mod, var(--accent)) 16%, transparent); color: var(--text); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.main { padding: 28px 32px; max-width: 1100px; width: 100%; min-width: 0; }
/* Second level (administration): text column like the contact groups */
.section-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: var(--app-h); }
.subnav { border-right: 1px solid var(--border); padding: 20px 10px; background: var(--surface); }
.page { padding: 28px 32px; max-width: 1100px; width: 100%; min-width: 0; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar h1 { margin: 0; flex: 1; }

/* Phones: the top row scrolls sideways (the phone menu comes later), the second level is a row of tabs. */
:where(.ui-phone) .topnav { position: static; gap: 4px; padding: 0 6px; }
:where(.ui-phone) .nav-link { padding: 0 8px; }
:where(.ui-phone) .main { padding: 16px; }
:where(.ui-phone) .section-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
:where(.ui-phone) .subnav { border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 10px; }
:where(.ui-phone) .subnav .pane-title { display: none; }
:where(.ui-phone) .subnav .group-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
:where(.ui-phone) .subnav .group-list a { flex: none; }
:where(.ui-phone) .page { padding: 16px; }

/* Cards and tables */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat .value { font-size: 26px; font-weight: 700; }
.stat .label { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.actions { text-align: right; white-space: nowrap; }
.empty { color: var(--muted); padding: 16px 8px; }

/* Badges */
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge.ok { color: var(--ok); }
.badge.warn { color: var(--warn); }
.badge.danger { color: var(--danger); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); vertical-align: -2px; margin-right: 6px; }
/* System groups: all contacts = mix of the preset group colours, unassigned = white, trash = black. */
.swatch-all { background: conic-gradient(#e0564a, #f08c2e, #d8a526, #3f9d5a, #2a9d8f, #3b82f6, #6366f1, #a259d9, #d9538f, #e0564a); }
.swatch-none { background: #fff; }
.swatch-trash { background: #000; }

/* Forms */
form.stack, .stack { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.inline { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
input, select { font: inherit; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; }
select { min-height: calc(1.5em + 14px); }
input[type="color"] { padding: 2px; height: 36px; width: 64px; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-input { font-size: 22px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }

button { font: inherit; border-radius: 8px; padding: 6px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
button:hover { background: var(--surface-2); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--danger); }
button.primary.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; }
button.small { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: 0.6; cursor: default; }

.error { color: var(--danger); font-size: 14px; }
.notice { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 14px; }

/* Auth screens (sign-in, activation, two-step verification; design docs/navrh-prihlaseni-2.html, Petr 2026-10-16).
   The card as wide on computers as on a phone (390 px less the 16 px sides). */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth .card { width: 100%; max-width: 358px; margin: 0; padding: 0; overflow: hidden; --band: color-mix(in srgb, var(--accent) 78%, #000); }
/* The bar like the file viewer's (.fv-bar): the module colour, 10/12 px padding, the icon 34 px; Almanach like the
   module name in the header (20 px, not bold). */
.auth-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--band); color: #fff; }
.auth-bar svg { display: block; flex: none; width: 34px; height: 34px; }
.auth-bar span { font-size: 20px; font-weight: 400; line-height: 1.2; }
.auth-body { padding: 20px 16px; }
/* Texts like the folder names in Soubory (13.5 px); field names like the column names of the file list; the notes
   as large as the field names, in normal letters. */
.auth .lead { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--text); }
.auth label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.auth label > .small, .auth .hint { margin: 0; font-size: 12px; line-height: 1.45; text-transform: none; letter-spacing: 0; color: var(--muted); }
.auth .error { margin: 0; font-size: var(--fs-ui); }
.auth .error:empty { display: none; }
/* Fields like the composer's (34 px, 13.5 px text 12 px from the edge, radius 9 px, a 1 px line in the text colour
   while typing); the codes only spaced and centred. */
.auth input { box-sizing: border-box; height: 34px; padding: 0 12px; font-size: var(--fs-ui); text-transform: none; letter-spacing: 0; border-radius: 9px; }
.auth input:focus { outline: 1px solid var(--text); outline-offset: 1px; }
.auth input.code-input { font-size: var(--fs-ui); letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
/* Buttons in the size of the fields (like the module buttons); the main one in the bar's colour. */
.auth button { box-sizing: border-box; height: 34px; padding: 0 12px; font-size: var(--fs-ui); border-radius: 9px; }
.auth button.primary { margin-top: 2px; background: var(--band); border-color: var(--band); color: #fff; }
.auth .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qr { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 9px; }
.qr svg { width: 180px; height: 180px; }
.auth .codes { text-align: center; font-size: var(--fs-ui); border-radius: 9px; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; padding: 12px; background: var(--surface-2); border-radius: 8px; }

/* Dialog and toast */
dialog { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: var(--surface); color: var(--text); width: min(460px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
dialog::backdrop { background: rgba(10, 14, 20, 0.45); }
.toast { position: fixed; right: 16px; bottom: 16px; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow); z-index: 10; }
.toast.error { background: var(--danger); color: #fff; }
a.stat { text-decoration: none; color: inherit; display: block; }
a.stat:hover { border-color: var(--accent); }
.error:empty { display: none; }

/* ---- Web app: contacts ---- */
.main.wide { max-width: none; padding: 0; }
.contacts-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: var(--app-h); }
.contacts-layout.with-detail { grid-template-columns: 210px minmax(0, 1fr) minmax(380px, 460px); }
.pane { overflow-y: auto; min-width: 0; }
.groups-pane { border-right: 1px solid var(--border); padding: 20px 10px; background: var(--surface); }
.pane-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0 10px 8px; }
.group-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.group-list a:hover { background: var(--surface-2); }
.group-list a.active { background: var(--accent); color: var(--accent-text); }
.group-list .count { font-size: 12px; opacity: 0.75; }
.list-pane { display: flex; flex-direction: column; overflow: hidden; }
.list-toolbar { display: flex; gap: 8px; padding: 16px 12px 8px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.list-toolbar input { flex: 1; min-width: 0; }
button.toggle.on { background: var(--surface-2); border-color: var(--accent); color: var(--text); }
.list-pane { container: list / inline-size; }
.avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 88px; height: 88px; font-size: 30px; }
/* List rows (Petr 2026-10-11): a square in the group colours, no initials - 18 px like the colour squares in a
   one-line row (no photo there), over both lines with the photo in a two-line row. */
.avatar.row { width: 18px; height: 18px; border-radius: 5px; }
.avatar.row img { display: none; }
/* Initials stay readable on light group colours too. */
.avatar:not(:has(img)) { text-shadow: 0 0 3px rgba(0, 0, 0, 0.45); }
.avatar.avatar-none { background: #fff; color: #555; border: 1px solid var(--border); text-shadow: none; }
.detail-pane { display: none; padding: 16px 28px 24px; border-left: 1px solid var(--border); background: var(--bg); }
.with-detail .detail-pane { display: block; }
.detail-bar { display: flex; justify-content: flex-end; margin: -6px -10px 6px 0; }
.detail-bar button.icon-btn { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; background: none; color: var(--muted); }
.detail-bar button.icon-btn:hover { color: var(--text); }
.detail-bar button.icon-btn > .btn-label { display: inline; }
.detail-bar button.icon-btn.detail-back { display: none; }
/* The record's own buttons in the detail show their labels too (no icon-only actions). */
.detail-actions button.icon-btn { width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; }
.detail-actions button.icon-btn > .btn-label { display: inline; }
.detail-empty { height: 100%; display: grid; place-items: center; text-align: center; }
.detail-header { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.detail-header h1 { margin-bottom: 8px; }
.fields { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0 0 20px; }
.field-row { display: contents; }
.fields dt { color: var(--muted); font-size: 13px; padding-top: 2px; }
.fields dd { margin: 0; overflow-wrap: anywhere; }
.fields .note { white-space: pre-wrap; }
.detail-actions { margin-bottom: 12px; }
.notice.warn { border-color: var(--warn); margin-bottom: 16px; }
.row.wrap { flex-wrap: wrap; gap: 6px 16px; }
.grow { flex: 1; margin: 0; }
textarea { font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; resize: vertical; }
.contact-form { max-width: 720px; }
.contact-form h3 { margin: 6px 0 0; font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.item-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.item-row:not(.address) { grid-template-columns: 84px minmax(0, 1fr) auto auto; }
/* "výchozí": the default phone / e-mail of the contact (one of each). */
.item-default { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; min-height: 34px; font-size: var(--fs-ui); color: var(--text); white-space: nowrap; cursor: pointer; }
.item-default input { margin: 0; accent-color: var(--accent); }
.item-row input, .item-row .dd, .address-grid input { width: 100%; min-width: 0; }
.address-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; min-width: 0; }
.address-grid .wide { grid-column: 1 / -1; }
/* Icon-only buttons: a square as tall as the other controls; the label is the tooltip. */
button.icon-btn { width: calc(1.5em + 14px); height: calc(1.5em + 14px); padding: 0; border-radius: 8px; display: inline-grid; place-items: center; }
button.icon-btn svg { flex: none; }
.item-row .dd-btn { padding-left: 8px; padding-right: 6px; }
.birthday .num, .birthday .year { width: 84px; }
dialog.wide { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.timeline > li { border-left: 3px solid var(--border); padding: 2px 0 2px 12px; }
.timeline > li.conflict { border-left-color: var(--warn); }
.timeline .diff { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }

@media (max-width: 1100px) {
  /* Not enough room for three columns: the detail replaces the list. */
  .contacts-layout.with-detail { grid-template-columns: 210px minmax(0, 1fr); }
  .with-detail .list-pane { display: none; }
  .with-detail .detail-pane { border-left: 0; }
  .detail-bar { justify-content: flex-start; margin: 0 0 10px; }
  .detail-bar button.icon-btn.detail-back { display: inline-flex; }
  .detail-bar button.icon-btn.detail-close { display: none; }
}
@media (max-width: 900px) {
  .contacts-layout, .contacts-layout.with-detail { grid-template-columns: minmax(0, 1fr); }
  .groups-pane { display: none; }
}
:where(.ui-phone) .contacts-layout { height: auto; }
:where(.ui-phone) .detail-pane { padding: 12px 16px; }
:where(.ui-phone) .item-row { grid-template-columns: 1fr auto; }
:where(.ui-phone) .item-row:not(.address) { grid-template-columns: 1fr auto auto; }
:where(.ui-phone) .item-row .dd { grid-column: 1 / -1; }
:where(.ui-phone) .address-grid { grid-template-columns: 1fr; }
/* Contacts (converted to the Files design 2026-10-11): the layout is the shared .mod-page one. */
/* One scrolling part under the header (the list body), like in Files: the list's own box does not scroll. */
.contacts-body > .contact-table-wrap { overflow: visible; flex: none; }
:where(.ui-phone) .contacts-body > .contact-table-wrap:not(:has(> .contact-list)) { padding-top: 12px; }
/* Kontakty, the list (Seznam) in the rows of E-maily and Soubory (Petr 2026-10-11): 13.5 px, 7 px 8 px, nothing bold,
   the name in the text colour and the rest in the list's grey. Wide: the group-colour square (18 px), the name, home and
   work phone, home and work e-mail. */
.contact-list { display: flex; flex-direction: column; }
.contact-row, .contact-head { display: grid; grid-template-columns: 22px 18px minmax(140px, 1fr) repeat(2, minmax(0, 0.6fr)) repeat(2, minmax(0, 0.85fr)) 96px; grid-template-areas: "check av name ph-home ph-work em-home em-work bday"; align-items: center; gap: 8px; padding: 7px 8px; font-size: var(--fs-ui); }
.contact-head { grid-template-areas: "check name name ph-home ph-work em-home em-work bday"; position: sticky; top: 0; z-index: 1; box-sizing: border-box; min-height: var(--row-h, 37.5px); background: var(--bg); box-shadow: inset 0 -1px 0 var(--border); color: var(--muted); }
:is(.contact-row, .contact-head) > :is(.contact-check, .contact-check-all) { grid-area: check; }
.contact-row > .avatar { grid-area: av; }
:is(.contact-row, .contact-head) > .c-name { grid-area: name; }
:is(.contact-row, .contact-head) > .c-phone-home { grid-area: ph-home; }
:is(.contact-row, .contact-head) > .c-phone-work { grid-area: ph-work; }
:is(.contact-row, .contact-head) > .c-email-home { grid-area: em-home; }
:is(.contact-row, .contact-head) > .c-email-work { grid-area: em-work; }
.contact-row > :is(.c-tel, .c-mail), .contact-head > .c-first, .contact-head .c-head-sub { display: none; }
/* Narozeniny (Petr 2026-10-13): "Za 12 dní" in the last column; in two-line rows under the name. */
:is(.contact-row, .contact-head) > .c-bday { grid-area: bday; }
.contact-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
.contact-row > span.c-name { color: var(--text); }
.contact-row a { color: inherit; text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }
.contact-row { border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); cursor: default; outline: none; }
.contact-row:hover { background: var(--surface-2); }
.contact-row.checked { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* The contact open in the detail: a light tint and a bar; checked rows keep the stronger tint. */
.contact-row.active { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.contact-row.active.checked { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.contact-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Narrow (beside the detail): two lines - the picture over both (40 px, the photo if there is one), the name and the
   default phone on the first line, the days to the birthday under the name and the default e-mail on the right; one
   caption for both lines. The e-mail may take the whole second line, clear of the birthday text. */
@container list (max-width: 900px) {
  .contact-row { grid-template-columns: 22px 40px minmax(0, 1fr) auto; grid-template-areas: "check av name tel" "check av bday mail"; row-gap: 2px; }
  .contact-head { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check name first"; }
  .contact-row > .contact-check { align-self: start; margin-top: 2px; }
}
:where(.ui-phone) .contact-head { display: none; }
/* Phones: the same two lines, 12 px from the edges; the checkbox only while checking. */
:where(.ui-phone) .contact-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av name tel" "av bday mail"; gap: 2px 10px; padding: 10px 12px; }
:where(.ui-phone) .contacts-page:has(.band-sel > :not([hidden])) .contact-row { grid-template-columns: 22px 40px minmax(0, 1fr) auto; grid-template-areas: "check av name tel" "check av bday mail"; }
:where(.ui-phone) .contact-row > .contact-check { align-self: start; margin-top: 2px; }
@container list (max-width: 900px) {
  .contact-row > :is(.c-phone-home, .c-phone-work, .c-email-home, .c-email-work), .contact-head > :is(.c-phone-home, .c-phone-work, .c-email-home, .c-email-work) { display: none; }
  .contact-row > :is(.c-tel, .c-mail), .contact-head > .c-first { display: block; }
  .contact-row > .c-tel { grid-area: tel; text-align: right; }
  .contact-row > .c-mail { grid-row: 2; grid-column: bday-start / mail-end; text-align: right; min-height: 1.5em; }
  .contact-row:has(> .c-bday:not(:empty)) > .c-mail { padding-left: 84px; }
  .contact-head > .c-first { grid-area: first; text-align: right; }
  .contact-head > .c-bday { display: none; }
  .contact-head .c-head-sub { display: inline; }
  .contact-row > .avatar { width: 40px; height: 40px; border-radius: var(--radius); }
  .contact-row > .avatar img { display: block; }
}
:where(.ui-phone) .contact-row > :is(.c-phone-home, .c-phone-work, .c-email-home, .c-email-work) { display: none; }
:where(.ui-phone) .contact-row > :is(.c-tel, .c-mail) { display: block; }
:where(.ui-phone) .contact-row > .c-tel { grid-area: tel; text-align: right; }
:where(.ui-phone) .contact-row > .c-mail { grid-row: 2; grid-column: bday-start / mail-end; text-align: right; min-height: 1.5em; }
:where(.ui-phone) .contact-row:has(> .c-bday:not(:empty)) > .c-mail { padding-left: 84px; }
:where(.ui-phone) .contact-row > .avatar { width: 40px; height: 40px; border-radius: var(--radius); }
:where(.ui-phone) .contact-row > .avatar img { display: block; }
/* Phones: the business cards and "Vybrat vše" keep 12 px from the edges (the list rows go edge to edge). */
:where(.ui-phone) .contacts-body > .contact-table-wrap .contact-cards { margin-left: 12px; margin-right: 12px; }
.contacts-top-pick { display: none; }
@media (max-width: 900px) { .contacts-top-pick { grid-column: 1 / -1; display: flex; } }
.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.color-swatch:hover { transform: scale(1.08); }
.color-swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.photo-change { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.photo-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.photo-tile img, .photo-empty { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.photo-empty { display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--muted); padding: 4px; }
.form-photo { display: flex; justify-content: center; }
.avatar-btn { position: relative; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; background: none; }
.avatar-btn:hover { background: none; }
.avatar-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(1.5em + 14px); height: calc(1.5em + 14px); font-size: 15px; display: grid; place-items: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.avatar-btn:hover .avatar-overlay { background: var(--surface-2); }
.avatar.placeholder { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); }
tr.inactive td { opacity: 0.6; }

/* ---- Web app: calendar ---- */
.calendar-layout .cal-main { display: flex; flex-direction: column; overflow: hidden; }
.detail-pane h1::first-letter { text-transform: uppercase; }
.cal-views { gap: 4px; }
/* The module menu like in Notes, Files and E-mail: the left column runs down the whole height and is as wide as
   dragged, the top bar (search | buttons) spans the calendar and the detail; the detail is always shown beside the calendar. */
.contacts-layout.cal-page { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.contacts-layout.cal-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr) minmax(380px, 460px); }
.cal-page > .cal-side { grid-column: 1; grid-row: 1 / -1; border-right: 0; padding-right: 4px; }
.cal-page > .cal-splitter { grid-column: 2; grid-row: 1 / -1; background: var(--surface); }
.cal-page > .cal-topbar { grid-column: 3 / -1; grid-row: 1; }
.cal-page > .cal-main { grid-column: 3; grid-row: 2; }
.cal-page > .cal-detail { grid-column: 4; grid-row: 2; }
/* The page heading above the calendar (the shown period, the search or the trash), like the folder in Files. */
.cal-page-head .cal-page-title { margin: 14px 16px 10px; overflow-wrap: anywhere; }
.cal-page-icon { color: var(--muted); }
.cal-page-icon svg { stroke-width: 1.75; }
/* The detail as in Files and E-mail: the name as a smaller heading, the fields, then the buttons. */
.cal-detail h1 { font-size: 20px; overflow-wrap: anywhere; }
.cal-detail dd.cal-row-name { display: flex; }
/* Every text of the detail (labels, times, notes, the form) as big as the events in the month view; only the heading is bigger. */
.cal-detail :is(dt, label, .small, .section-label, .cal-agenda-when, .cal-agenda-time, button.link, .cal-chip) { font-size: 15px; }
@media (max-width: 1100px) {
  .contacts-layout.cal-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); }
  .cal-page > .cal-detail { grid-column: 3; }
}
@media (max-width: 900px) {
  .contacts-layout.cal-page, .contacts-layout.cal-page.with-detail { grid-template-columns: minmax(0, 1fr); }
  .cal-page > .cal-splitter { display: none; }
  .cal-page > .cal-topbar, .cal-page > .cal-main, .cal-page > .cal-detail { grid-column: 1; }
  .cal-topbar .notes-top-right { grid-column: 1 / -1; flex-wrap: wrap; }
  .cal-page-head .cal-page-title { margin: 10px 12px 8px; font-size: 26px; }
}
.cal-body { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 16px; }
.cal-item.selected, .cal-bar.selected { outline: 2px solid var(--text); outline-offset: -1px; }
.cancelled .cal-item-title, .cal-bar.cancelled, .cal-agenda-item.cancelled .cal-agenda-title, h1.cancelled { text-decoration: line-through; }
.cal-item.cancelled, .cal-bar.cancelled, .cal-agenda-item.cancelled, .cal-item.tentative, .cal-bar.tentative, .cal-agenda-item.tentative { opacity: 0.7; }

/* Month */
.cal-month { display: flex; flex-direction: column; min-height: 100%; }
/* The day names look like the column captions of the lists in Files and E-mail. */
.cal-month-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0; }
.cal-month-head > div { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-wd-short { display: none; }
:where(.ui-phone) .cal-wd-long { display: none; }
:where(.ui-phone) .cal-wd-short { display: inline; }
.cal-weeks { flex: 1; display: grid; grid-auto-rows: minmax(112px, 1fr); border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 112px; }
.cal-day { grid-row: 1 / -1; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3px 4px; min-width: 0; }
.cal-day.weekend { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
/* The day whose events the detail shows. */
.cal-day.picked, .cal-day.weekend.picked { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Day numbers (and today's mark) are small squares, not circles. */
button.cal-daynum { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border: 0; background: none; padding: 0 4px; border-radius: 6px; font-size: 15px; color: var(--text); }
button.cal-daynum:hover { background: var(--surface-2); }
.cal-day.other-month .cal-daynum { color: var(--muted); }
.cal-day.holiday .cal-daynum { color: var(--danger); font-weight: 600; }
.cal-day.today .cal-daynum { background: var(--accent); color: var(--accent-text); }
button.cal-bar { position: relative; z-index: 1; margin: 1px 3px; height: 22px; padding: 0 6px; border: 0; border-radius: 4px; background: var(--cal-color); color: #fff; font-size: 15px; line-height: 22px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
button.cal-bar:hover { background: var(--cal-color); filter: brightness(1.1); }
/* Month: a longer title of an all-day bar wraps onto a second line (at most two), like the timed events. */
.cal-week button.cal-bar, .cal-wk-allday button.cal-bar { height: auto; min-height: 22px; padding: 1px 6px; line-height: 1.3; white-space: normal; align-self: start; }
.cal-bar-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
/* A payment: the name on the first line (cut off when it does not fit), the amount always on the second. */
.cal-bar-pay { display: flex; flex-direction: column; min-width: 0; }
.cal-bar-pay-name, .cal-bar-pay-amount { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bar.cont-left { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-right { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* The day's events lie over the bar lanes (moved below the day's own bars): clicks pass through to the bars and the day. */
.cal-items { position: relative; z-index: 1; min-width: 0; min-height: 0; pointer-events: none; }
.cal-items-fit > * { pointer-events: auto; }
.cal-items-fit { position: absolute; inset: 1px 3px 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
/* Timed events: blocks like in the week view – title, time from–to below. */
button.cal-item { display: flex; flex-direction: column; align-items: stretch; flex: none; gap: 0; border: 0; border-left: 3px solid var(--cal-color); background: color-mix(in srgb, var(--cal-color) 30%, var(--surface)); padding: 2px 6px; border-radius: 4px; font-size: 15px; line-height: 1.3; text-align: left; min-width: 0; color: var(--text); }
button.cal-item:hover { background: color-mix(in srgb, var(--cal-color) 42%, var(--surface)); }
/* A longer title wraps onto a second line (at most two lines, then it is cut off). */
.cal-item-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.cal-item-time { color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--cal-color); }
button.cal-more { flex: none; border: 0; background: none; padding: 0 4px; font-size: 15px; color: var(--muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.cal-more:hover { color: var(--accent); background: none; }

/* Agenda and day list */
/* The whole width of the page (agenda, search results, trash); the day headings like the date groups of the mail list. */
.cal-agenda { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; margin: 0; }
.cal-agenda-day h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
/* Today like in the other views: the date on a blue square. */
.cal-agenda-day.today .cal-agenda-date { padding: 2px 6px; margin-left: -6px; border-radius: 6px; background: var(--accent); color: var(--accent-text); }
.cal-day-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
/* Agenda rows: time on the left, the event as a block like in the week and month views. */
button.cal-agenda-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 2px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; }
button.cal-agenda-item:hover { background: none; }
.cal-agenda-time { color: var(--muted); font-size: 15px; white-space: nowrap; }
.cal-agenda-bar { display: none; }
.cal-agenda-text { display: flex; flex-direction: column; min-width: 0; padding: 4px 8px; border-left: 3px solid var(--cal-color); border-radius: 4px; background: color-mix(in srgb, var(--cal-color) 30%, var(--surface)); }
button.cal-agenda-item:hover .cal-agenda-text { background: color-mix(in srgb, var(--cal-color) 42%, var(--surface)); }
button.cal-agenda-item.selected .cal-agenda-text { outline: 2px solid var(--text); outline-offset: -1px; }
.cal-agenda-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Agenda and day list: no time column, the time is under the title (as in the week view). */
button.cal-agenda-item.no-time { grid-template-columns: minmax(0, 1fr); }
.cal-agenda-when { color: var(--muted); font-size: 15px; }
/* The second line of a trash row (calendar, who deleted it) as big as the times. */
.cal-agenda-text .small { font-size: 15px; }
/* The repeat icon after the title of a recurring event. */
.cal-repeat { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--muted); }

/* Left column */
.cal-side { display: flex; flex-direction: column; gap: 10px; }
/* The column already keeps 10 px between its parts: the line above the trash as far from the calendars as in Notes. */
.cal-side > .notes-trash-link { margin-top: 2px; }
.cal-hint { padding: 0 10px; }

/* Event form */
.cal-form-times { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cal-form-times .row { flex-wrap: nowrap; gap: 6px; }
.cal-form-times input[type="date"] { flex: 1; min-width: 0; }
.cal-form-times input[type="time"] { width: 104px; flex: none; }
.cal-custom-rule { padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.cal-custom-rule .num { width: 84px; }
.cal-weekdays { gap: 4px; flex-wrap: wrap; }
.cal-weekdays button { padding: 6px 10px; }
.section-label { font-size: 13px; color: var(--muted); }

/* Month on a phone: dots instead of texts. */
:where(.ui-phone) .cal-weeks { grid-auto-rows: minmax(64px, 1fr); }
:where(.ui-phone) .cal-week { min-height: 64px; }
:where(.ui-phone) .cal-item .cal-item-time, :where(.ui-phone) .cal-item .cal-item-title { display: none; }
:where(.ui-phone) button.cal-item { height: 6px; padding: 0; border-left: 0; background: var(--cal-color); }
:where(.ui-phone) button.cal-bar, :where(.ui-phone) .cal-week button.cal-bar, :where(.ui-phone) .cal-wk-allday button.cal-bar { height: 6px; min-height: 0; font-size: 0; padding: 0; }
:where(.ui-phone) button.cal-agenda-item { grid-template-columns: 84px minmax(0, 1fr); }
@media (max-width: 1100px) {
  /* Like contacts: on a narrower screen the detail replaces the calendar. */
  .calendar-layout.with-detail .cal-main { display: none; }
}
@media (max-width: 900px) {
  .calendar-layout .cal-side { display: none; }
}

/* Drag and drop (month, week) */
.dragging { opacity: 0.75; cursor: grabbing; z-index: 5; }
.cal-day.drop-target, .cal-wk-allday-cell.drop-target { background: color-mix(in srgb, var(--accent) 18%, transparent); }
button.cal-bar, button.cal-item { touch-action: none; }

/* Year */
/* The font of the rest of the calendar: at most 3 months in a row (fewer where a month would get narrower than
   280 px), the page scrolls down when the months do not fit. */
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 56px) / 3)), 1fr)); gap: 24px 28px; padding: 8px 0 16px; max-width: 1400px; margin: 0 auto; }
button.cal-year-title { border: 0; background: none; padding: 2px 4px; margin-bottom: 4px; font-weight: 600; font-size: 18px; color: var(--text); text-transform: capitalize; }
button.cal-year-title:hover { color: var(--accent); background: none; }
.cal-year-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cal-year-wd { font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 2px 0 2px 4px; text-align: left; }
button.cal-year-day { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 3px; height: 32px; padding: 0 2px 0 4px; border: 0; border-radius: 6px; background: none; color: var(--text); font-size: 15px; }
button.cal-year-day:hover { background: var(--surface-2); }
.cal-year-day.weekend { color: var(--muted); }
.cal-year-day.holiday { color: var(--danger); font-weight: 600; }
.cal-year-day.today .cal-year-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; background: var(--accent); color: var(--accent-text); border-radius: 6px; padding: 0 3px; }
.cal-year-day.picked { box-shadow: inset 0 0 0 1px var(--accent); }
/* One small square per calendar with events that day, after the number. */
.cal-year-num { min-width: 2.2ch; text-align: right; }
.cal-year-dots { display: flex; gap: 1px; align-items: center; }
.cal-year-dots:empty { display: none; }
.cal-year-dots .cal-dot { width: 6px; height: 6px; border-radius: 1px; }
.cal-year-plus { font-size: 11px; line-height: 1; color: var(--muted); }

/* Week */
.cal-body.cal-body-week { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.cal-week-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-wk-head, .cal-wk-allday, .cal-wk-grid { display: grid; grid-template-columns: 72px repeat(7, minmax(0, 1fr)); }
.cal-wk-head { border-bottom: 1px solid var(--border); }
/* The date above the day name, so the whole word fits a narrow column. */
button.cal-wk-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; border: 0; background: none; padding: 6px 0; color: var(--text); border-radius: 8px; }
button.cal-wk-day:hover { background: var(--surface-2); }
/* The day names look like the column captions of the lists in Files and E-mail (as in the month view). */
.cal-wk-wd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.cal-wk-date { display: inline-grid; place-items: center; min-width: 30px; height: 30px; font-size: 18px; font-weight: 600; padding: 0 4px; border-radius: 6px; }
.cal-wk-day.today .cal-wk-date { background: var(--accent); color: var(--accent-text); }
.cal-wk-day.holiday .cal-wk-date { color: var(--danger); }
.cal-wk-day.today.holiday .cal-wk-date { color: var(--accent-text); }
.cal-wk-allday { border-bottom: 1px solid var(--border); padding: 2px 0; min-height: 26px; }
/* The hours and "celý den" as big as the day names above the columns. */
.cal-wk-label { grid-column: 1; grid-row: 1 / -1; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; color: var(--muted); padding: 4px 6px; text-align: right; }
.cal-wk-allday-cell { grid-row: 1 / -1; border-left: 1px solid var(--border); }
.cal-wk-allday-cell.weekend, .cal-wk-col.weekend { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.cal-wk-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.cal-wk-grid { position: relative; }
.cal-wk-gutter { grid-column: 1; }
.cal-wk-hour { height: 44px; font-size: 12px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.cal-wk-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 44px); }
.cal-wk-event { position: absolute; z-index: 1; overflow: hidden; display: flex; flex-direction: column; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--cal-color) 30%, var(--surface)); border-left: 3px solid var(--cal-color); color: var(--text); font-size: 15px; line-height: 1.3; cursor: pointer; touch-action: none; user-select: none; }
.cal-wk-event:hover { background: color-mix(in srgb, var(--cal-color) 42%, var(--surface)); }
.cal-wk-event.selected { outline: 2px solid var(--text); outline-offset: -1px; }
/* Only the title (no time): it wraps as far as the block's height allows. */
.cal-wk-event-title { overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.cal-wk-event.cancelled .cal-wk-event-title { text-decoration: line-through; }
.cal-wk-event.cancelled, .cal-wk-event.tentative { opacity: 0.7; }
.cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.cal-wk-ghost { position: absolute; left: 2px; right: 4px; z-index: 3; border-radius: 6px; background: color-mix(in srgb, var(--accent) 30%, transparent); border: 1px dashed var(--accent); font-size: 11px; padding: 2px 6px; pointer-events: none; }

/* People ("Osoby") in the event form */
.cal-people-chips { gap: 6px; }
.cal-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.cal-chip.member { border-color: var(--accent); }
button.cal-chip-x { border: 0; background: none; padding: 0 6px; font-size: 15px; line-height: 1; color: var(--muted); border-radius: 999px; }
button.cal-chip-x:hover { color: var(--danger); background: none; }
.cal-people-results { display: flex; flex-direction: column; gap: 2px; }
button.cal-people-hit { display: flex; align-items: center; gap: 8px; justify-content: space-between; border: 0; background: none; padding: 6px 10px; border-radius: 8px; text-align: left; color: var(--text); }
button.cal-people-hit:hover { background: var(--surface-2); }

/* Contact detail: family member, upcoming events */
.cal-member { margin: -4px 0 8px; }
.cal-upcoming { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.cal-upcoming h3 { margin: 0 0 4px; font-size: 14px; }

/* Trash: deleted events below the contacts */
.trash-events { margin: 18px 0 0; display: flex; flex-direction: column; gap: 2px; max-width: 760px; }
.trash-events h3 { margin: 0 0 6px; font-size: 14px; }
/* Calendar trash: date with time needs a wider first column. */
button.cal-agenda-item.cal-trash-item { grid-template-columns: 150px minmax(0, 1fr); }
/* Bars: edge handles to stretch them over more days; no text selection while dragging. */
button.cal-bar, button.cal-item, .cal-wk-event { user-select: none; -webkit-user-select: none; }
.cal-bar-resize { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.cal-bar-resize[data-edge="start"] { left: 0; }
.cal-bar-resize[data-edge="end"] { right: 0; }
.resizing { opacity: 0.85; z-index: 5; }
/* Drag/resize feedback: the days the event would cover, visible edge grips, cursor. */
.cal-day.drop-target, .cal-wk-allday-cell.drop-target, .cal-wk-col.drop-target { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.cal-bar-resize::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); opacity: 0; transition: opacity 0.1s; }
.cal-bar-resize[data-edge="start"]::after { left: 2px; }
.cal-bar-resize[data-edge="end"]::after { right: 2px; }
button.cal-bar:hover .cal-bar-resize::after, button.cal-bar.resizing .cal-bar-resize::after { opacity: 1; }
button.cal-bar.resizing { outline: 2px solid var(--text); outline-offset: 1px; }
body.cal-resizing, body.cal-resizing * { cursor: ew-resize !important; }
body.cal-dragging, body.cal-dragging * { cursor: grabbing !important; }

/* Calendar list: tick boxes at the end, private calendars with a lock */
/* Wrapped names keep the swatch, lock and tick box on the first line (line height 20px). */
.group-list a.cal-row { gap: 8px; align-items: flex-start; line-height: 20px; }
.cal-row-name { display: inline-flex; align-items: flex-start; min-width: 0; }
.cal-row-name > .swatch { flex: none; margin-top: 3px; }
.cal-row-label { min-width: 0; overflow-wrap: anywhere; }
.cal-row .cal-lock { margin-top: 3.5px; }
.cal-lock { display: inline-flex; flex: none; margin-left: 6px; color: var(--muted); }
.group-list a.active .cal-lock { color: inherit; }
input.cal-check { width: 16px; height: 16px; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--accent); pointer-events: none; }

/* Drop-down lists (dropdown.ts): every <select> is shown as a button and our own list;
   items may carry a colour square and a lock. The native select stays hidden. */
select.dd-native { display: none !important; }
:where(.dd) { display: inline-flex; vertical-align: middle; max-width: 100%; min-width: 0; }
:where(label, .stack) > :where(.dd) { display: flex; }
button.dd-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: calc(1.5em + 14px); padding: 6px 10px 6px 11px; font-size: 15px; line-height: 1.5; text-align: left; background: var(--surface); color: var(--text); }
button.dd-btn:disabled { opacity: 0.6; cursor: default; }
button.dd-btn > svg { flex: none; margin-left: auto; color: var(--muted); }
.dd-face { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-width: 0; }
.dd-face-opt { grid-area: 1 / 1; display: flex; align-items: center; min-width: 0; visibility: hidden; }
.dd-face-opt.on { visibility: visible; }
.dd-face-opt .dd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd .swatch, .dd-list .swatch { flex: none; }
.dd-indent { flex: none; }
.dd-list { position: fixed; z-index: 1000; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); }
.dd-group { padding: 8px 8px 2px; font-size: 12px; color: var(--muted); }
.dd-item { display: flex; align-items: flex-start; padding: 6px 8px; border-radius: 6px; font-size: 15px; line-height: 20px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.dd-item > .swatch { margin-top: 3px; }
.dd-item > .cal-lock { margin-top: 3.5px; }
.dd-item:hover, .dd-item:focus { background: var(--surface-2); outline: none; }
.dd-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.dd-item[aria-disabled="true"] { color: var(--muted); cursor: default; background: none; }
.dd-item[aria-selected="true"] { font-weight: 600; }
.dd-check { display: inline-flex; flex: none; margin: 2px 0 0 auto; padding-left: 12px; color: var(--accent); visibility: hidden; }
.dd-item[aria-selected="true"] .dd-check { visibility: visible; }
/* E-maily (converted modules next): the lists in 13.5 px, the chosen item marked by its tick only, not bold. */
:root:is([data-module="mail"], [data-module="contacts"]) .dd-item { font-size: var(--fs-ui); }
:root:is([data-module="mail"], [data-module="contacts"]) .dd-item[aria-selected="true"] { font-weight: 400; }

/* Links that look like buttons */
a.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; border-radius: 8px; padding: 6px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; }
a.button:hover { background: var(--surface-2); }
a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
a.button.icon-btn { width: calc(1.5em + 14px); height: calc(1.5em + 14px); padding: 0; }

/* Linked storage (Můj účet) */
.storage-name { display: flex; align-items: center; }
.storage-warn { display: inline-flex; color: var(--warn); margin-left: 6px; }
.storage-warn-text { color: var(--warn); }
.cert-box .fields { margin: 8px 0; }
.fingerprint { font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* Files page */
.files-layout .files-main { display: flex; flex-direction: column; overflow: hidden; }
.files-conns a.files-conn { align-items: flex-start; line-height: 20px; }
.files-conns a.files-conn .swatch { margin-top: 3px; }
a.tree-node { display: flex; justify-content: flex-start; align-items: flex-start; gap: 4px; padding: 4px 8px 4px 0; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 14px; line-height: 20px; }
a.tree-node:hover { background: var(--surface-2); }
a.tree-node.active { background: var(--accent); color: var(--accent-text); }
a.tree-node.active .fi-folder { color: inherit; }
button.tree-toggle { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--muted); border-radius: 4px; }
button.tree-toggle svg { transition: transform 0.12s; }
button.tree-toggle.open svg { transform: rotate(90deg); }
a.tree-node.active button.tree-toggle { color: inherit; }
.tree-label { min-width: 0; overflow-wrap: anywhere; }
.fi-folder { display: inline-flex; flex: none; color: #e0a42e; }
.fi-file { display: inline-flex; flex: none; color: var(--muted); }
a.tree-node > .fi-folder { margin-top: 2px; }
.drop-target { outline: 2px dashed var(--accent) !important; outline-offset: -2px; background: color-mix(in srgb, var(--accent) 12%, transparent) !important; }

.files-conn-select { display: none; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; flex: 1 1 260px; font-size: 16px; }
button.crumb { border: 0; background: none; padding: 4px 6px; border-radius: 6px; color: var(--text); }
button.crumb:hover { background: var(--surface-2); }
.crumb.current { padding: 4px 6px; font-weight: 600; }
.crumb-sep { display: inline-flex; color: var(--muted); }
.files-selbar { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.files-selbar > span { margin-right: auto; font-size: 14px; }
.files-body { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 16px; outline: none; }
.files-body.drop-files { outline: 2px dashed var(--accent); outline-offset: -6px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.files-loading { padding: 16px 4px; }
/* "Nalezeno: …" takes the place of the first row (as tall as the column captions, text centred), so its text keeps the
   line of the first rows of the left column and the detail (Petr 2026-10-12). */
.files-search-head { display: flex; align-items: center; box-sizing: border-box; min-height: var(--row-h, 37.5px); margin: 0; padding: 7px 8px; font-size: var(--fs-ui); color: var(--muted); }
.files-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 60px 16px; }
.files-empty h2 { margin: 6px 0 0; }
.files-empty .fi-folder { color: var(--muted); }
button.files-more { margin: 10px auto 0; display: block; }

/* The list looks like the mail list: rows on a grid, column captions styled like the module title,
   a click opens the item, the checkbox alone checks it. */
.files-list { --files-date-w: 156px; --files-size-w: 76px; display: flex; flex-direction: column; }
.files-row, .files-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) var(--files-date-w) var(--files-size-w); align-items: center; gap: 8px; }
.files-row.with-where, .files-head.with-where { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 0.6fr) var(--files-date-w) var(--files-size-w); }
.files-head { position: sticky; top: 0; z-index: 1; padding: 4px 8px; background: var(--bg); box-shadow: inset 0 -1px 0 var(--border); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.files-head-sub { display: none; }
.files-row { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); cursor: default; outline: none; }
.files-row:hover { background: var(--surface-2); }
/* A click opens a folder, so folders get the hand like the folders in the trees (files open in the detail and keep the arrow, like messages). */
.files-row.is-dir, .files-tile.is-dir { cursor: pointer; }
.files-row.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* The file open in the detail: a light tint and a bar; checked rows keep the stronger tint. */
.files-row.focused { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.files-row.focused.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.files-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.files-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Folder icons in the colour of their connection, like the folders in the tree (not yellow). */
.files-row .fi-folder, .files-tile .fi-folder { color: var(--conn-color, var(--muted)); }
.files-row .files-where, .files-row .files-date, .files-row .files-size { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
.files-date, .files-size { text-align: right; white-space: nowrap; }
.files-size { font-variant-numeric: tabular-nums; }
.files-head .files-date, .files-head .files-size { justify-self: end; }
input.files-check, .tile-check { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
button.th-sort { border: 0; background: none; padding: 2px 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; gap: 4px; align-items: center; }
button.th-sort:hover { color: var(--text); background: none; }
button.th-sort:disabled { opacity: 1; cursor: default; }
.th-arrow { font-size: 10px; }
/* The captions are as high as the captions of the mail list. */
.files-head button.th-sort { padding: 0; }
.fname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fname-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tiles keep one size whatever the width (no stretching): as many as fit in a row. */
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, 132px); justify-content: start; gap: 10px; padding-top: 4px; }
.files-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px; border-radius: 10px; border: 1px solid transparent; cursor: default; outline: none; }
.files-tile:hover { background: var(--surface-2); }
.files-tile.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.files-tile:focus-visible { border-color: var(--accent); }
/* The file open in the detail, like the open row of the list: a light tint and an accent border. */
.files-tile.focused { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); }
.files-tile.focused.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tile-check { position: absolute; top: 8px; left: 8px; opacity: 0; }
.files-tile:hover .tile-check, .files-tile.selected .tile-check, .tile-check:focus { opacity: 1; }
.tile-preview { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 6px; }
.tile-preview img.fi-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.tile-name { width: 100%; text-align: center; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The preview in the detail, under the buttons: only when there is one (a PDF shows the box while it is being drawn). */
.files-preview { display: grid; place-items: center; min-height: 140px; margin-top: 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.files-preview:not(.has-preview):not(.loading) { display: none; }
.files-preview .fi { width: 100%; justify-content: center; }
.files-preview img.fi-thumb { width: auto; height: auto; max-width: 100%; max-height: 60vh; display: block; }
h1.files-detail-name { font-size: 20px; overflow-wrap: anywhere; }

/* Transfers panel */
.transfers { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: min(380px, calc(100vw - 32px)); max-height: 50vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); }
.transfers-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); }
.transfers-list { overflow-y: auto; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.transfer-row { display: flex; align-items: center; gap: 8px; }
.transfer-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.transfer-state { flex: none; }
.transfer-track { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.transfer-bar { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.transfer.done .transfer-bar { background: #3f9d5a; }
.transfer.error .transfer-bar, .transfer.cancelled .transfer-bar { background: var(--danger); }
button.small-btn { width: 26px; height: 26px; }

/* Folder picker and conflicts */
dialog.picker-dialog { width: min(520px, calc(100vw - 32px)); }
.picker-tree { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px; margin: 8px 0; }
.picker-node { display: flex; align-items: flex-start; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 6px; cursor: pointer; line-height: 20px; }
.picker-node:hover { background: var(--surface-2); }
.picker-node.active { background: var(--accent); color: var(--accent-text); }
.picker-node.active .fi-folder, .picker-node.active button.tree-toggle { color: inherit; }
.picker-node.disabled { opacity: 0.55; }
.picker-node > .fi-folder { margin-top: 2px; }
/* E-mail: the folder tree in the Přesunout / Nová složka dialogs; the choice lives in a hidden field. */
.mail-picker .picker-tree { margin-top: 0; }
.mail-picker input.picker-value { display: none; }
.mail-picker .picker-hint { margin: 0; }
/* Folder icons in the module colour like the tree; white on the chosen row. */
.mail-picker .files-folder-icon { color: var(--mod, var(--accent)); }
.mail-picker .picker-node.active .files-folder-icon, .mail-picker .picker-node.active button.tree-toggle { color: inherit; }
.mail-picker .picker-node.disabled .files-folder-icon { color: var(--muted); }
.conflict-list { margin: 6px 0 12px; padding-left: 20px; max-height: 30vh; overflow-y: auto; overflow-wrap: anywhere; }
.conflict-actions { margin-top: 8px; }

@media (max-width: 900px) {
  .files-layout .files-side { display: none; }
}
@media (max-width: 1100px) {
  .files-layout.with-detail .files-main { display: none; }
}

/* Splitter between the left column and the main area (Files, E-mail, Notes) */
.files-splitter { position: relative; cursor: col-resize; touch-action: none; outline: none; }
.files-splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--border); }
.files-splitter:hover::after, .files-splitter:focus-visible::after, body.files-resizing .files-splitter::after { left: 2px; width: 3px; background: var(--accent); }
body.files-resizing, body.files-resizing * { cursor: col-resize !important; user-select: none; }
.files-slot { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.files-body-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Files: the module menu like in E-mail and Notes. The left column (connections, each with its folder tree)
   runs down the whole height and is as wide as dragged; the top bar spans the folder and the detail. */
.contacts-layout.mod-page { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
/* The detail column: 460 px, twice as wide on screens wider than 1920 px (Petr 2026-10-14); the header's search field
   is as wide as the detail's content. */
:root { --detail-w: 460px; --detail-search-w: 435px; }
@media (min-width: 1921px) { :root { --detail-w: 920px; --detail-search-w: 895px; } }
.contacts-layout.mod-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr) minmax(380px, var(--detail-w)); }
.mod-page > .files-side { grid-column: 1; grid-row: 1 / -1; border-right: 0; padding-right: 4px; }
.mod-page > .files-side-splitter { grid-column: 2; grid-row: 1 / -1; background: var(--surface); }
.mod-page > .files-topbar { grid-column: 3 / -1; grid-row: 1; }
.mod-page > .files-main { grid-column: 3; grid-row: 2; }
.mod-page > .files-detail { grid-column: 4; grid-row: 2; }
.files-topbar[hidden] { display: none; }
/* A narrow list (phones, a list beside the detail): the name and the size on the first line, the date under the name,
   on the left. */
@container list (max-width: 640px) {
  .files-row, .files-row.with-where { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check name size" "check date date"; row-gap: 2px; }
  .files-head, .files-head.with-where { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .files-row > .files-date { padding-left: 26px; justify-self: start; text-align: left; }
  .files-row > .files-check { grid-area: check; }
  .files-row > .files-name { grid-area: name; }
  .files-row > .files-date { grid-area: date; }
  .files-row > .files-size { grid-area: size; }
  .files-list .files-where, .files-head > .files-date { display: none; }
  .files-head .files-head-sub { display: inline; }
}
/* The folder fills the area (files dropped anywhere on it are uploaded). */
.mod-page .files-slot { flex: 1; }
.files-top-pick { display: none; }
/* Rows sized like the Notes tree (.nt-row) and the mailboxes: 15 px regular text, 28 px rows, 14 px per level. */
.mod-page .files-conns a.files-conn { justify-content: flex-start; gap: 2px; padding: 4px; border-radius: 6px; font-size: 15px; }
.mod-page .files-conns a.files-conn button.tree-toggle { color: var(--muted); }
.mod-page .files-conns a.files-conn.active button.tree-toggle { color: inherit; }
.files-tree a.tree-node { gap: 2px; padding: 4px; font-size: 15px; }
.files-tree .tree-toggle-space { flex: none; width: 20px; }
/* Folder icons like in the mail tree: 15 px, normal stroke, grey. */
.files-folder-icon { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--muted); }
/* In the tree the folder icons carry the colour of their connection (like E-mail and Finance); the chosen row keeps its text colour. */
.files-tree .files-folder-icon { color: var(--conn-color, var(--muted)); }
a.tree-node.active .files-folder-icon { color: inherit; }
/* "Koš" of the storage Almanach: the bin is grey (not a folder), the count at the end like mailbox folders. */
.files-tree .files-folder-icon.files-trash-icon, .files-page-icon.files-trash-icon { color: var(--muted); }
.files-tree a.files-trash-node .count { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.files-tree a.files-trash-node.active .count { color: inherit; }
.files-trash { padding: 0 20px 20px; }
.files-trash .trash-row { align-items: center; padding: 8px 4px; }
.files-trash-info { display: flex; align-items: center; gap: 10px; }
.files-trash-info .fi { flex: none; }
.files-trash-info .fi-folder { color: var(--conn-color, var(--muted)); }
.files-trash-name { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .contacts-layout.mod-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); }
  .mod-page > .files-detail { grid-column: 3; }
}
@media (max-width: 900px) {
  .contacts-layout.mod-page, .contacts-layout.mod-page.with-detail { grid-template-columns: minmax(0, 1fr); }
  .mod-page > .files-side-splitter { display: none; }
  .mod-page > .files-topbar, .mod-page > .files-main, .mod-page > .files-detail { grid-column: 1; }
  /* Phones: search on the first row, the connection below it, then the path and the buttons. */
  .files-top-pick { grid-column: 1 / -1; display: flex; }
  .files-topbar .notes-top-right { grid-column: 1 / -1; }
}


.mail-servers .mail-server-row { flex-wrap: nowrap; }
.mail-servers .mail-server-row input:first-child { flex: 1; min-width: 0; }
.mail-servers .num { width: 90px; }

/* Rich text editor (editor/editor.ts) */
.rte { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-height: 0; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; border-radius: 8px 8px 0 0; }
button.rte-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--text); }
button.rte-btn:hover { background: var(--surface-2); }
button.rte-btn.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.rte-text { font-weight: 600; font-size: 15px; }
.rte-text.i { font-style: italic; font-family: Georgia, serif; }
.rte-text.u { text-decoration: underline; }
.rte-text.s { text-decoration: line-through; }
.rte-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.rte-toolbar .dd.rte-block { width: 120px; }
.rte-toolbar .dd.rte-block .dd-btn { min-height: 30px; padding: 2px 8px; font-size: var(--fs-ui); }
.rte-color-wrap { position: relative; }
.rte-colors { position: absolute; top: 34px; left: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 24px); gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.rte-colors .rte-text { grid-column: 1 / -1; font-weight: 400; font-size: 13px; }
button.rte-color { width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--border); }
.rte-content { flex: 1; min-height: 0; overflow: auto; }
/* The mail editor (messages, signatures): the text in the size of the app and of a received message (Petr 2026-10-11). */
.rte-prose { min-height: 220px; padding: 12px 14px; outline: none; font-size: var(--fs-ui); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.rte.compact .rte-prose { min-height: 90px; }
.rte-prose p { margin: 0 0 0.6em; }
.rte-prose h1, .rte-prose h2, .rte-prose h3 { margin: 0.6em 0 0.4em; line-height: 1.3; }
.rte-prose h1 { font-size: 24px; }
.rte-prose h2 { font-size: 20px; }
.rte-prose h3 { font-size: 17px; }
.rte-prose ul, .rte-prose ol { padding-left: 24px; margin: 0 0 0.6em; }
.rte-prose blockquote { margin: 0 0 0.6em 4px; padding-left: 10px; border-left: 3px solid var(--border); color: var(--muted); }
.rte-prose a { color: var(--accent); }
.rte-prose img { max-width: 100%; height: auto; border-radius: 4px; }
.rte-prose img.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.rte-prose table { border-collapse: collapse; margin: 0 0 0.6em; }
.rte-prose td, .rte-prose th { border: 1px solid var(--border); padding: 4px 8px; min-width: 40px; vertical-align: top; }
.rte-prose hr { border: 0; border-top: 1px solid var(--border); margin: 0.8em 0; }
.rte-prose p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--muted); float: left; height: 0; pointer-events: none; }
.signature-editor .rte-toolbar { position: static; }
/* The composer scrolls with 26 px above its content: its toolbar sticks to the very top of that scrolling part (right
   under the header), so no text shows above it (Petr 2026-10-11). */
.mod-page .files-detail .compose .rte-toolbar { top: -26px; }
/* Phones: the toolbar scrolls away with the text (it would cover a third of the space above the keyboard). */
:where(.ui-phone) .mod-page .files-detail .compose .rte-toolbar { position: static; }

/* Composer (mail-compose.ts) */
.compose { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.compose.drop-files { outline: 2px dashed var(--accent); outline-offset: 4px; }
.compose-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compose-head h1 { flex: 1; margin: 0; font-size: 20px; }
.compose-from { display: flex; align-items: flex-start; gap: 8px; flex-direction: row; }
.compose-from .dd { flex: 1; }
.compose-row { display: flex; flex-direction: column; gap: 10px; }
.compose-row[hidden] { display: none; }
.addr-field { position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 8px; padding: 0; color: var(--text); font-size: 15px; }
.addr-caption { flex: none; width: 88px; padding-top: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.addr-box { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: calc(1.5em + 14px); padding: 3px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: text; }
.addr-box:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.addr-chips { display: contents; }
.addr-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 5px 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
.addr-chip.invalid { border-color: var(--danger); color: var(--danger); }
/* The chip's cross: the 18 px icon of the search field's cross, grey, the text colour on hover. */
button.addr-x { display: inline-flex; flex: none; margin-left: 4px; border: 0; background: none; padding: 0; color: var(--muted); line-height: 1; }
button.addr-x:hover { color: var(--text); background: none; }
input.addr-input { flex: 1; min-width: 120px; border: 0; outline: none; padding: 4px; background: transparent; }
input.addr-input:focus { outline: none; }
.addr-suggest { position: absolute; top: 100%; left: 96px; right: 0; margin-top: 4px; max-height: 280px; }
.addr-hit { justify-content: space-between; gap: 12px; }
.addr-hit.on { background: var(--surface-2); }
.addr-hit-mail { flex: none; }
/* The subject has its caption on the left like the address fields. */
input.compose-subject { flex: 1; min-width: 0; width: auto; font-weight: 500; }
.compose-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.compose-attachments:empty { display: none; }
/* Attachments being sent look like those of an open message; the cross at the end removes one. */
.compose-attachments .compose-att { padding-right: 4px; cursor: pointer; }
.compose-att:not(.error):hover { background: color-mix(in srgb, var(--band) 72%, #fff); }
.compose-att.error:hover { background: color-mix(in srgb, var(--danger) 90%, #000); }
.compose-att.pending { opacity: 0.7; }
.compose-att.error { background: color-mix(in srgb, var(--danger) 80%, #000); }
button.compose-att-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: #fff; opacity: 0.8; }
button.compose-att-x:hover { opacity: 1; background: rgb(255 255 255 / 0.18); color: #fff; }
.compose-editor { flex: 1; display: flex; flex-direction: column; min-height: 260px; }
.compose-editor > .rte { flex: 1; }
:where(.ui-phone) .addr-caption { width: 84px; }
:where(.ui-phone) .addr-suggest { left: 0; }
.roots-choice { max-height: 240px; overflow-y: auto; padding: 4px 2px; gap: 6px; }
.roots-choice label.inline { gap: 6px; }

/* Built-in file viewer (file-viewer.ts): the file over the whole window on a dark background, in both themes (like a photo viewer). */
body.fv-open { overflow: hidden; }
.fv { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0e1014; color: #e6e9ef; }
.fv-bar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; }
.fv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fv-count { color: #9aa4b5; font-size: 13px; font-variant-numeric: tabular-nums; }
.fv button.icon-btn { background: transparent; border-color: transparent; color: #e6e9ef; }
.fv button.icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.fv-stage { min-height: 0; display: grid; place-items: center; overflow: auto; padding: 0 72px 24px; }
.fv-loading { color: #9aa4b5; }
img.fv-img { display: block; max-width: 100%; max-height: calc(100vh - 88px); object-fit: contain; }
video.fv-video { display: block; max-width: 100%; max-height: calc(100vh - 88px); background: #000; }
.fv-audio-box { display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(520px, 100%); }
audio.fv-audio { width: 100%; }
.fv-pdf { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 16px; }
.fv-pdf-page { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.fv-pdf-page canvas { display: block; }
.fv-text { align-self: start; width: min(960px, 100%); }
.fv-text pre { margin: 0; padding: 16px 18px; border-radius: 8px; background: #1c2028; color: #e6e9ef; font: 13px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.fv-note { margin: 0 0 8px; color: #9aa4b5; font-size: 13px; }
.fv-msg { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; text-align: center; color: #c3cad6; }
.fv-msg p { margin: 0; }
.fv-msg-icon { display: inline-flex; color: #9aa4b5; }
.fv-msg button { display: inline-flex; align-items: center; gap: 6px; }
img.fv-doc-thumb { max-width: 100%; max-height: 50vh; border-radius: 6px; background: #fff; }
/* Previous / next on the sides, over the file. */
.fv button.fv-nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.fv button.fv-nav:hover { background: rgba(255, 255, 255, 0.2); }
.fv button.fv-nav[hidden] { display: none; }
.fv-prev { left: 12px; }
.fv-next { right: 12px; }
:where(.ui-phone) .fv-bar { padding: 6px 8px; }
:where(.ui-phone) .fv-stage { padding: 0 8px 16px; }
:where(.ui-phone) .fv button.fv-nav { top: auto; bottom: 16px; margin-top: 0; background: rgba(40, 44, 52, 0.85); }
/* A click on the preview in the detail opens the viewer. */
.files-preview.has-preview { cursor: zoom-in; }

/* File previews (file-preview.ts) */
.files-preview.loading::after { content: "Připravuji náhled…"; position: absolute; bottom: 8px; font-size: 12px; color: var(--muted); }
.files-preview { position: relative; }
canvas.files-pdf-page { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); margin: 8px auto; }
pre.files-text-preview { width: 100%; max-height: 360px; margin: 0; padding: 10px 12px; overflow: auto; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; color: var(--text); }
.files-preview.has-preview { place-items: center; }

/* ProseMirror / TipTap base styles (copied from @tiptap/core; editors use injectCSS: false because of the CSP) */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror [contenteditable="false"] { white-space: normal; }
.ProseMirror [contenteditable="false"] [contenteditable="true"] { white-space: pre-wrap; }
.ProseMirror pre { white-space: pre-wrap; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; width: 0 !important; height: 0 !important; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0; }
.ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid currentColor; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; }
@keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection * { caret-color: transparent; }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }

/* Notes: notebooks + tree on the left (adjustable width), the note on the right */
.notes-layout { display: grid; grid-template-columns: var(--side-w, 280px) 7px minmax(0, 1fr); height: var(--app-h); }
.notes-side { overflow: auto; padding: 20px 4px 16px 10px; background: var(--surface); }
.notes-splitter { background: var(--surface); }
.notes-side-empty { padding: 4px 10px; }
.notes-tree { display: flex; flex-direction: column; gap: 1px; }
.nt-row { display: flex; align-items: flex-start; gap: 2px; padding: 4px 4px; border-radius: 6px; color: var(--text); text-decoration: none; cursor: pointer; line-height: 20px; }
.nt-row:hover { background: var(--surface-2); }
.nt-row.active { background: var(--accent); color: var(--accent-text); }
.nt-row.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.nt-notebook { margin-top: 6px; }
.nt-item:first-child > .nt-notebook { margin-top: 0; }
.nt-notebook .nt-name { flex: 1 1 auto; }
.nt-notebook .swatch { margin-top: 3px; }
.nt-row .tree-toggle, .nt-row .tree-toggle-space { flex: none; }
.nt-row .tree-toggle-space { width: 20px; }
.nt-row.active .tree-toggle, .nt-row.active .nt-lock { color: inherit; }
.nt-lock { display: inline-flex; margin-left: 4px; color: var(--muted); vertical-align: -1px; }
.nt-icon { flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: 15px; line-height: 1; color: var(--muted); }
.nt-row.active .nt-icon { color: inherit; }
.nt-row .tree-label { flex: 1 1 auto; }
.nt-row .tree-label.muted { color: var(--muted); }
.nt-row.active .tree-label.muted { color: inherit; opacity: 0.8; }
.nt-empty { padding: 2px 0 4px 46px; }
/* A grey bin like the trash folder of the mail, as big as the page icons of the tree, in the column of the notebook swatches. */
.notes-trash-icon { display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; margin: 3px 6px 0 0; color: var(--muted); }
.notes-trash-link a.cal-row.active .notes-trash-icon { color: inherit; }
.notes-trash-icon svg { width: 15px; height: 15px; margin: -0.5px; }
.notes-trash-link { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
/* The count looks like the word "Koš" next to it. */
.notes-side .notes-trash-link a.cal-row .count, .cal-side .notes-trash-link a.cal-row .count, .contacts-side .notes-trash-link a.cal-row .count { font-size: inherit; color: inherit; opacity: 1; font-variant-numeric: normal; }

.notes-main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
/* The module menu: search | breadcrumbs | buttons. */
.notes-topbar { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.notes-top-left { min-width: 0; display: flex; align-items: center; gap: 8px; }
.notes-search { flex: 1 1 auto; min-width: 0; width: 100%; }
.notes-top-center { min-width: 0; display: flex; align-items: center; }
.notes-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.notes-crumbs { font-size: 14px; }
.notes-crumbs a.crumb { padding: 4px 6px; border-radius: 6px; color: var(--text); text-decoration: none; }
.notes-crumbs a.crumb:hover { background: var(--surface-2); }
.notes-crumbs .crumb.current { font-weight: 400; color: var(--muted); }
.notes-top-right { justify-content: flex-end; align-items: center; gap: 10px; }
.notes-presence { display: inline-flex; padding-left: 4px; }
.presence-dot { width: 26px; height: 26px; margin-left: -5px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; border: 2px solid var(--bg); cursor: default; }
button.icon-btn.notes-back { display: none; }
.notes-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 32px 120px; }
.notes-loading { padding: 24px 32px; }
.notes-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 80px 24px; text-align: center; }
.notes-empty-icon { color: var(--muted); opacity: 0.6; }

/* Notes use the whole width of the main area. */
.note-page { margin: 0; }
.note-heading { display: flex; align-items: flex-start; gap: 8px; }
.note-heading textarea.note-title { flex: 1; min-width: 0; }
.note-icon-slot { flex: none; margin-top: 4px; }
/* A fixed box (emoji differ in width): the title starts at the same place on every page and on the notebook page. */
.note-icon { display: inline-block; width: 46px; text-align: center; font-size: 30px; line-height: 1.2; padding: 0; border: 0; background: none; border-radius: 8px; }
button.note-icon:hover { background: var(--surface-2); }
/* A page without an emoji: the grey default page icon, as big as an emoji. */
.note-icon.note-icon-default { display: inline-grid; place-items: center; height: 36px; color: var(--muted); vertical-align: top; }
textarea.note-title { display: block; width: 100%; margin: 4px 0 0; padding: 0; border: 0; background: none; resize: none; overflow: hidden; font-size: 32px; line-height: 1.25; font-weight: 700; color: var(--text); }
textarea.note-title:focus { outline: none; }
textarea.note-title::placeholder { color: var(--muted); opacity: 0.6; }
.note-heading + .note-editor-host { margin-top: 18px; }

.note-editor { position: relative; }
.note-body { position: relative; }
.note-editor.note-loading .note-body { visibility: hidden; }
.note-editor.note-loading::before { content: "Načítám…"; position: absolute; color: var(--muted); }
.note-prose { min-height: 240px; outline: none; font-size: 16px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.note-prose > * + * { margin-top: 0.35em; }
.note-prose p { margin: 0; }
.note-prose h1, .note-prose h2, .note-prose h3 { margin: 1.1em 0 0.2em; line-height: 1.3; font-weight: 600; }
.note-prose h1 { font-size: 26px; }
.note-prose h2 { font-size: 21px; }
.note-prose h3 { font-size: 18px; }
.note-prose ul, .note-prose ol { margin: 0; padding-left: 26px; }
.note-prose li > p { margin: 0; }
.note-prose blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--text); }
.note-prose a { color: var(--accent); cursor: pointer; }
.note-prose a[href^="#/notes/"] { color: var(--text); text-decoration-color: var(--muted); text-underline-offset: 3px; }
.note-prose code { font-family: ui-monospace, Consolas, monospace; font-size: 0.88em; padding: 1px 4px; border-radius: 4px; background: var(--surface-2); color: #c2410c; }
.note-prose pre { margin: 0.5em 0; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); overflow-x: auto; }
.note-prose pre code { padding: 0; background: none; color: var(--text); font-size: 14px; }
.note-prose hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }
.note-prose table { border-collapse: collapse; margin: 0.6em 0; width: 100%; table-layout: fixed; }
/* "table" in the selector: stronger than the app-wide "tr:last-child td { border-bottom: 0 }" of lists. */
.note-prose table td, .note-prose table th { border: 1px solid var(--border); padding: 6px 8px; vertical-align: top; text-align: left; }
.note-prose th { background: var(--surface-2); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--text); }
.note-prose .selectedCell { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.note-prose mark { border-radius: 3px; padding: 0 2px; color: #1c2330 !important; } /* dark text on the light highlight, also in the dark theme */
.note-prose ul[data-type="taskList"] { list-style: none; padding-left: 2px; }
.note-prose ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.note-prose ul[data-type="taskList"] li > label { flex: none; margin-top: 4px; display: block; }
.note-prose ul[data-type="taskList"] li > label input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.note-prose ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.note-prose ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--muted); text-decoration: line-through; }
.note-prose .is-empty::before { content: attr(data-placeholder); float: left; height: 0; color: var(--muted); opacity: 0.7; pointer-events: none; }
.collaboration-carets__caret { position: relative; margin: 0 -1px; border-left: 1px solid; border-right: 1px solid; word-break: normal; pointer-events: none; }
.collaboration-carets__selection { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.collaboration-carets__label { position: absolute; top: -1.35em; left: -1px; padding: 0 5px; border-radius: 4px 4px 4px 0; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; user-select: none; }

.note-table-bar button.rte-btn { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.note-bubble { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); z-index: 20; }
.note-palette { display: flex; flex-direction: column; gap: 6px; width: 272px; top: 36px; }
.note-palette .row { gap: 4px; flex-wrap: wrap; }

.slash-menu { position: fixed; z-index: 50; width: 280px; max-height: 320px; overflow: auto; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
button.slash-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; text-align: left; }
button.slash-item.active, button.slash-item:hover { background: var(--surface-2); }
.slash-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 13px; font-weight: 600; }
.slash-text { display: flex; flex-direction: column; line-height: 1.3; }
.slash-empty { padding: 8px 10px; }

.popup-menu { position: fixed; z-index: 60; min-width: 210px; display: flex; flex-direction: column; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
.popup-menu > button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 6px; background: none; text-align: left; }
.popup-menu > button:hover, .popup-menu > button:focus-visible { background: var(--surface-2); outline: none; }
.popup-menu > button.danger { color: #c62828; }
.emoji-menu { width: 372px; max-width: calc(100vw - 16px); padding: 6px 8px 8px; }
.emoji-tabs { display: flex; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
button.emoji-tab { flex: 1; display: grid; place-items: center; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; font-size: 18px; color: var(--muted); }
button.emoji-tab:hover { background: var(--surface-2); }
.emoji-scroll { height: 300px; overflow-y: auto; padding-top: 4px; }
.emoji-heading { padding: 8px 4px 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
button.emoji { padding: 3px 0; border: 0; border-radius: 6px; background: none; font-size: 22px; line-height: 1.3; }
button.emoji:hover { background: var(--surface-2); }
button.emoji.on { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.emoji-menu > button.emoji-remove { margin-top: 6px; }

.subpage-list { display: flex; flex-direction: column; }
a.subpage { display: flex; align-items: flex-start; gap: 6px; padding: 4px 6px; border-radius: 6px; color: var(--text); text-decoration: none; line-height: 20px; }
a.subpage:hover { background: var(--surface-2); }

/* Hits start in line with the heading (their padding goes into the left margin). */
.notes-results { margin: 0 -12px; display: flex; flex-direction: column; gap: 2px; }
.notes-results > p { margin: 0 12px; }
a.search-hit { display: block; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
a.search-hit:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.search-hit-title { display: flex; align-items: flex-start; gap: 6px; line-height: 20px; }
.search-hit-snippet { margin-top: 4px; color: var(--text); opacity: 0.85; }
.trash-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.trash-info { min-width: 0; }

@media (max-width: 900px) {
  .notes-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: var(--app-h); }
  .notes-splitter { display: none; }
  .notes-layout.show-main .notes-side { display: none; }
  /* The module header (with the search) is the first child, so it stays on top of the tree. */
  .notes-layout:not(.show-main) { grid-template-rows: auto 1fr; }
  .notes-layout:not(.show-main) .notes-view { display: none; }
  .notes-layout.show-main button.icon-btn.notes-back { display: inline-grid; }
  .notes-scroll { padding: 12px 16px 80px; }
  .notes-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 10px; }
  .notes-top-left { grid-column: 1 / -1; }
  .notes-top-center:empty, .notes-top-right:empty { display: none; }
  textarea.note-title { font-size: 26px; }
}

/* Notes P2: pictures, files, uploads, full size view, version history, printing */
.note-figure { position: relative; margin: 0.6em 0; display: flex; flex-direction: column; align-items: center; }
.note-figure[data-align="left"] { align-items: flex-start; }
.note-figure[data-align="right"] { align-items: flex-end; }
.note-img-frame { position: relative; max-width: 100%; line-height: 0; }
.note-img-frame img { max-width: 100%; height: auto; width: 100%; border-radius: 6px; cursor: default; }
.note-figure.selected .note-img-frame img { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-img-handle { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 4px; background: var(--accent); border: 2px solid var(--surface); cursor: nwse-resize; display: none; touch-action: none; }
.note-figure.selected .note-img-handle { display: block; }
.note-figure[data-align="right"] .note-img-handle { right: auto; left: -6px; cursor: nesw-resize; }
.note-img-tools { display: none; position: absolute; top: 8px; right: 8px; z-index: 5; line-height: normal; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.note-figure.selected .note-img-tools { display: flex; align-items: center; }
.note-img-caption { margin-top: 6px; font-size: 14px; color: var(--muted); text-align: center; }
.note-file { display: flex; align-items: center; gap: 10px; margin: 0.4em 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.note-file.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-file-icon { flex: none; color: var(--muted); display: inline-flex; }
.note-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.note-file-name { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.note-file-name:hover { text-decoration: underline; }
a.icon-btn.note-file-download { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text); }
a.icon-btn.note-file-download:hover { background: var(--surface-2); }
.note-upload { display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-download { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; }
dialog.versions-dialog { width: min(1100px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px)); padding: 0; }
.versions-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100%; }
.versions-side { padding: 20px 12px; border-right: 1px solid var(--border); overflow: auto; }
.versions-side h2 { margin: 0 0 4px 8px; }
.versions-side > p { margin: 0 8px 12px; }
.version-list { display: flex; flex-direction: column; gap: 2px; }
button.version-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; }
button.version-item:hover { background: var(--surface-2); }
button.version-item.active { background: var(--accent); color: var(--accent-text); }
button.version-item.active .muted { color: inherit; opacity: 0.85; }
.versions-main { display: flex; flex-direction: column; min-height: 0; padding: 20px 24px 16px; gap: 12px; }
.version-preview { flex: 1; min-height: 0; overflow: auto; }
.version-title { font-size: 26px; font-weight: 700; margin: 0 0 12px; }
@media (max-width: 700px) {
  .versions-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: 40% 60%; }
  .versions-side { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media print {
  .topnav, .notes-side, .notes-splitter, .notes-topbar, .note-subpages, .note-img-tools, .note-img-handle, .collaboration-carets__caret, .note-bubble, .toast { display: none !important; }
  body, .notes-main, .notes-scroll { background: #fff !important; color: #000 !important; overflow: visible !important; height: auto !important; }
  .shell, .notes-layout { display: block !important; height: auto !important; }
  .notes-scroll { padding: 0 !important; }
  .note-page { max-width: none; }
  .note-prose { color: #000; }
  .note-figure, .note-file, .note-prose pre, .note-prose table { break-inside: avoid; }
}

/* Finance: books on the left (like contact groups), the chosen book on the right */
/* Finance: the module menu like E-mail. The books in the left column (like the mailboxes) with their
   sections under them, the top bar over the main area, the page heading like a page in Notes. */
.fin-layout { display: grid; grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: var(--app-h); }
.fin-layout > .fin-side { grid-column: 1; grid-row: 1 / -1; }
.fin-layout > .fin-splitter { grid-column: 2; grid-row: 1 / -1; }
.fin-layout > .fin-topbar { grid-column: 3; grid-row: 1; }
.fin-layout > .fin-main { grid-column: 3; grid-row: 2; }
.fin-topbar[hidden], .fin-search[hidden] { display: none; }
.fin-top-pick { display: none; }
.fin-side { overflow: auto; padding: 20px 4px 16px 10px; background: var(--surface); }
.fin-splitter { background: var(--surface); }
.fin-side-empty { padding: 4px 10px; }
.fin-main { overflow: auto; min-width: 0; }
.fin-page { padding: 18px 32px 28px; }
/* Rows sized like the mailboxes and the Notes tree: 15 px regular text, 28 px rows. */
.fin-books a.fin-book { justify-content: flex-start; gap: 2px; padding: 4px; border-radius: 6px; font-size: 15px; }
.fin-books a.fin-book.open:not(.active) { font-weight: 400; }
.fin-books a.fin-book button.tree-toggle { color: var(--muted); }
.fin-books a.fin-book.active button.tree-toggle { color: inherit; }
.fin-tree a.tree-node { gap: 2px; padding: 4px; font-size: 15px; }
.fin-tree .tree-toggle-space { flex: none; width: 20px; }
.fin-section-icon { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--muted); }
/* The section icons in the colour of their book, like the folders of a mailbox; the chosen row keeps its text colour. */
.fin-tree .fin-section-icon, .fin-page-icon { color: var(--book-color, var(--muted)); }
a.tree-node.active .fin-section-icon { color: inherit; }
/* Payments waiting for confirmation: like the unread count of a mail folder, the row's own text. */
.fin-books .count.fin-pending-count { margin-left: auto; padding-left: 6px; font-size: inherit; font-weight: 400; color: inherit; opacity: 1; }
.fin-page-title { margin: 0 0 14px; overflow-wrap: anywhere; }
.fin-page-icon svg { stroke-width: 1.75; }
.fin-page-title .fin-currency { align-self: center; font-size: 13px; font-weight: 400; }
.fin-search-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.fin-tx td:nth-child(3) { color: var(--muted); }
.fin-desc { margin: -6px 0 16px; }
.fin-stat .value { font-variant-numeric: tabular-nums; font-weight: 600; }
.fin-stat .label::first-letter { text-transform: uppercase; }
.fin-in { color: var(--ok); }
.fin-out { color: var(--danger); }
.fin-warn { color: var(--warn); cursor: help; }
.fin-table td.num, .fin-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-table tr.clickable { cursor: pointer; }
.fin-table tr.clickable:hover td { background: var(--surface-2); }
.fin-tx td { padding-top: 7px; padding-bottom: 7px; }
.fin-tx tr.fin-day td { padding: 14px 8px 4px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); background: none !important; cursor: default; }
.fin-tx tr.fin-day:first-child td { padding-top: 2px; }
.fin-check { width: 28px; padding-right: 0; }
.fin-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.fin-tx-card { padding: 8px 12px; }
.fin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.fin-filters input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.fin-range { gap: 6px; flex-wrap: nowrap; }
.fin-totals { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.fin-bulk { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.fin-bulk > span:first-child { flex: 1; }
.fin-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.seg-item { flex-direction: row; gap: 0; color: var(--text); font-size: 14px; cursor: pointer; }
.seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.seg-item span { padding: 6px 14px; border-left: 1px solid var(--border); }
.seg-item:first-child span { border-left: 0; }
.seg-item input:checked + span { background: var(--accent); color: var(--accent-text); }
.seg-item input:disabled + span { opacity: 0.45; cursor: default; }
.seg-item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.fin-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.fin-dl dt { color: var(--muted); font-size: 13px; }
.fin-dl dd { margin: 0; }
.fin-cats td { padding-top: 3px; padding-bottom: 3px; }
.fin-cats tr.fin-group td { padding-top: 14px; color: var(--muted); font-size: 13px; }
.fin-cats td.fin-cat { padding-left: 22px; }
.fin-subtabs { display: inline-flex; gap: 4px; flex: 1; }
.fin-subtab { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 4px 12px; font: inherit; font-size: 14px; }
.fin-subtab.active { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.fin-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; background: var(--surface-2); }
.fin-chip:not(:has(.fin-chip-x)) { padding-right: 10px; }
.fin-chip-x { border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 15px; line-height: 1; cursor: pointer; }
.fin-chip-x:hover { color: var(--danger); }
.fin-rates { max-height: 360px; overflow: auto; }
.fin-members { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0; gap: 8px; }
.fin-members legend { padding: 0 4px; }
.fin-own { align-items: flex-start; }
.fin-own .spacer { flex: 1; }
@media (max-width: 900px) {
  /* Phones (like E-mail): no left column; the search on the first row, the book and its section below it, then the buttons. */
  .fin-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: var(--app-h); }
  .fin-layout > .fin-side, .fin-layout > .fin-splitter { display: none; }
  .fin-layout > .fin-topbar, .fin-layout > .fin-main { grid-column: 1; }
  .notes-topbar.fin-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .fin-top-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  .fin-top-pick .dd { display: flex; flex: 1 1 160px; }
  .fin-topbar .notes-top-center { display: none; }
  .fin-topbar .notes-top-right { grid-column: 1 / -1; }
  .fin-page { padding: 12px 16px 16px; }
  .fin-page-title { font-size: 26px; }
  .fin-hide-narrow { display: none; }
}

/* Finance F2: plan, goals, limits */
.group-list a.cal-row .count { margin-left: auto; padding-left: 6px; font-size: 12px; color: var(--danger); font-variant-numeric: tabular-nums; }
.group-list a.cal-row.active .count { color: inherit; }
.fin-months th.num { white-space: normal; }
.fin-months tr.fin-sum td { border-top: 1px solid var(--border); }
.fin-items .fin-item-date { white-space: nowrap; width: 1%; padding-right: 14px; }
.fin-items tr.fin-pending .fin-item-date { color: var(--danger); }
.fin-items td.actions .icon-btn { width: 30px; height: 30px; }
button.fin-ok-btn { color: var(--ok); }
.fin-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--muted); vertical-align: 1px; margin-left: 4px; }
.fin-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; min-width: 120px; }
.fin-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 4px 0 0 4px; }
.fin-bar-plan { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.fin-bar.warn .fin-bar-fill { background: var(--warn); }
.fin-bar.warn .fin-bar-plan { background: color-mix(in srgb, var(--warn) 35%, transparent); }
.fin-bar.over .fin-bar-fill { background: var(--danger); }
.fin-bar.over .fin-bar-plan { background: color-mix(in srgb, var(--danger) 35%, transparent); }
.fin-bar.good .fin-bar-fill { background: var(--ok); }
.fin-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
button.fin-goal { display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
button.fin-goal:hover { border-color: var(--accent); }
button.fin-goal.inactive { opacity: 0.65; }
.fin-goal-text { font-size: 14px; }
.fin-limits td:first-child { width: 60%; }
.fin-month-nav { gap: 4px; flex: 1; justify-content: center; }
.fin-month-nav > span { min-width: 120px; text-align: center; }
.fin-closed summary { cursor: pointer; margin: 4px 0 10px; }
.fin-pending-card { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.fin-items td.actions .row { flex-wrap: nowrap; gap: 4px; }

/* Charts (web/src/charts.ts). Categorical slots validated for both themes (CVD-safe adjacent order);
   light slots 3–5 are below 3:1 on white, so every chart has a legend, tooltips and a table. */
:root {
  --viz-1: #2a78d6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-4: #eda100;
  --viz-5: #e87ba4;
  --viz-plan: #9ec5f4;
  --viz-plan-line: #5598e7;
  --viz-grid: #eceff3;
  --viz-axis: var(--muted);
  --viz-band: rgba(47, 111, 223, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-4: #c98500;
    --viz-5: #d55181;
    --viz-plan: #1c5cab;
    --viz-plan-line: #86b6ef;
    --viz-grid: #262c36;
    --viz-band: rgba(91, 143, 240, 0.1);
  }
}
.viz { position: relative; width: 100%; }
.viz svg { display: block; overflow: visible; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--border); stroke-width: 1; }
.viz-axis { fill: var(--viz-axis); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-band { fill: var(--viz-band); }
.viz-hit { fill: transparent; outline: none; }
.viz-col { outline: none; }
.viz-col.pickable { cursor: pointer; }
.viz-col:hover path, .viz-col:focus-visible path { filter: brightness(1.12); }
.viz-col.selected .viz-band, .viz-col.selected .viz-hit { fill: var(--viz-band); }
.viz-col:focus-visible .viz-hit { stroke: var(--accent); stroke-width: 1; }
.viz-fill-1 { fill: var(--viz-1); }
.viz-fill-2 { fill: var(--viz-2); }
.viz-fill-3 { fill: var(--viz-3); }
.viz-fill-4 { fill: var(--viz-4); }
.viz-fill-5 { fill: var(--viz-5); }
.viz-fill-plan { fill: var(--viz-plan); }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.dashed { stroke-dasharray: 5 4; }
.viz-stroke-1 { stroke: var(--viz-1); }
.viz-stroke-2 { stroke: var(--viz-2); }
.viz-stroke-3 { stroke: var(--viz-3); }
.viz-stroke-4 { stroke: var(--viz-4); }
.viz-stroke-5 { stroke: var(--viz-5); }
.viz-stroke-plan { stroke: var(--viz-plan-line); }
.viz-key-plan.line, .viz-tip .viz-key-plan { border-color: var(--viz-plan-line); }
.viz-dot { stroke: var(--surface); stroke-width: 2; }
.viz-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.viz-cross { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.viz-seg { stroke: none; outline: none; cursor: default; }
.viz-seg:hover, .viz-seg:focus-visible { filter: brightness(1.12); }
.viz-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.viz-tip-title { color: var(--muted); margin-bottom: 2px; }
.viz-tip-row { display: flex; align-items: center; gap: 6px; }
.viz-tip-row strong { font-variant-numeric: tabular-nums; }
.viz-key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--viz-1); }
.viz-tip .viz-key, .viz-key.line { width: 14px; height: 0; border-radius: 0; border-top: 2px solid var(--viz-1); background: none; }
.viz-key.dashed { border-top-style: dashed; }
.viz-key-1 { background: var(--viz-1); border-color: var(--viz-1); }
.viz-key-2 { background: var(--viz-2); border-color: var(--viz-2); }
.viz-key-3 { background: var(--viz-3); border-color: var(--viz-3); }
.viz-key-4 { background: var(--viz-4); border-color: var(--viz-4); }
.viz-key-5 { background: var(--viz-5); border-color: var(--viz-5); }
.viz-key-plan { background: var(--viz-plan); border-color: var(--viz-plan); }
.viz-tip .viz-key, .viz-key.line { background: none; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.viz-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.viz-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.viz-donut { position: relative; width: 150px; height: 150px; flex: none; }
.viz-donut-legend { display: grid; gap: 6px; font-size: 13px; }
.viz-donut-legend .viz-legend-item { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; }
.viz-donut-legend strong { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.viz-hbars { display: grid; gap: 6px; }
.viz-hbar { display: grid; grid-template-columns: minmax(80px, 40%) 1fr auto; align-items: center; gap: 10px; font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; padding: 2px 0; text-align: left; }
button.viz-hbar { cursor: pointer; }
button.viz-hbar:hover .viz-hbar-fill { filter: brightness(1.12); }
.viz-hbar-label { overflow-wrap: anywhere; }
.viz-hbar-track { height: 10px; }
.viz-hbar-fill { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.viz-hbar-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Finance F3: Analýza, Zůstatky */
.fin-loading { opacity: 0.6; transition: opacity 0.15s; }
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fin-tile { margin: 0; padding: 14px 16px; }
.fin-tile .label { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.fin-tile .value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fin-triple .current .value { color: var(--accent); }
.fin-triple .value { font-size: 15px; }
.fin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fin-tile:has(.fin-triple) { grid-column: span 2; }
.fin-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fin-charts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-charts > .card { margin-bottom: 16px; min-width: 0; }
.card h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.fin-section { margin-top: 8px; font-size: 18px; }
.fin-clear { margin-left: 10px; font-weight: 400; }
.fin-cat-table table { font-size: 13px; }
.fin-cat-table th:first-child, .fin-cat-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 180px; }
.fin-cat-table td, .fin-cat-table th { padding: 6px 8px; }
.fin-cat-table .current { background: var(--viz-band); }
.fin-cat-table td.clickable { cursor: pointer; }
.fin-cat-table td.clickable:hover { text-decoration: underline; }
.fin-tree-label { display: inline-flex; align-items: center; gap: 4px; }
.fin-toggle { border: 0; background: none; color: var(--muted); padding: 0; width: 16px; font-size: 12px; cursor: pointer; }
.fin-toggle-space { display: inline-block; width: 16px; }
.fin-row-type td { font-weight: 600; }
.fin-row-group td:first-child { padding-left: 22px; }
.fin-row-category td:first-child { padding-left: 40px; }
.fin-row-fx td { color: var(--muted); font-style: italic; }
.fin-row-fx td:first-child { padding-left: 58px; }
.fin-forecast { font-style: italic; }
.fin-indent { padding-left: 22px !important; }
.fin-cat-table tr.fin-row-group td[colspan] { padding-left: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 1100px) {
  .fin-charts, .fin-charts.three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fin-tile:has(.fin-triple) { grid-column: auto; }
}
.viz-hatch-line { stroke: var(--viz-1); stroke-width: 1.5; opacity: 0.55; }
.viz-key-plan:not(.line) { background: repeating-linear-gradient(45deg, var(--viz-plan) 0 3px, color-mix(in srgb, var(--viz-1) 55%, var(--viz-plan)) 3px 4.5px); }

/* Finance F4: documents, payee, payments with a contact, the calendar Platby choice */
.fin-docs { display: flex; flex-direction: column; gap: 6px; }
.fin-docs-list { display: flex; flex-direction: column; gap: 4px; }
.fin-docs-list > p { margin: 0; }
.fin-doc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; }
.fin-doc-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.fin-doc-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.fin-doc-name { overflow-wrap: anywhere; text-align: left; }
button.link.fin-doc-name { text-decoration: none; color: var(--text); }
button.link.fin-doc-name:hover { text-decoration: underline; }
.fin-doc-meta { white-space: nowrap; }
.fin-doc > :last-child { grid-column: -2 / -1; }
.fin-clip { display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.fin-contact .cal-people-results:empty { display: none; }
.fin-contact-payments .fin-contact-pay { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.fin-contact-payments .fin-contact-pay:hover { background: var(--surface-2); }
.fin-contact-pay-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.fin-contact-pay .num { white-space: nowrap; }
.fin-cal-choice { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.fin-cal-choice h3 { margin: 0; font-size: 15px; font-weight: 400; }
.fin-cal-choice p { margin: 0; }
.fin-cal-book { gap: 4px; }
.fin-cal-accounts { padding-left: 26px; gap: 4px; }
@media (max-width: 600px) {
  .fin-doc { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
  .fin-doc-meta { grid-column: 2; grid-row: 2; }
}

/* Notes: the page of a notebook (not editable) */
.notebook-title { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 18px; font-size: 32px; font-weight: 700; line-height: 1.25; }
/* The colour square in a box as big as a page icon, so the heading looks like a page heading. */
.notebook-title .notebook-icon { flex: none; width: 46px; height: 36px; display: grid; place-items: center; }
.notebook-title .notebook-swatch { flex: none; width: 28px; height: 28px; border-radius: 7px; margin: 0; }
.notebook-description { margin: 0 0 18px; }
.notebook-list { margin-top: 8px; }
.notebook-list a.subpage { align-items: baseline; }
.subpage-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Notes: locked page */
.notes-lock-slot:empty { display: none; }
/* The page's buttons side by side; on phones in the "⋯" menu (only the lock of a locked page stays). */
.notes-actions { display: inline-flex; align-items: center; gap: 6px; }
button.icon-btn.notes-lock-btn.on { color: var(--accent); border-color: var(--accent); }
button.icon-btn.notes-more { display: none; }
@media (max-width: 900px) {
  .notes-actions > :not(.notes-lock-btn.on) { display: none; }
  button.icon-btn.notes-more { display: inline-grid; }
}
.note-page.locked textarea.note-title { cursor: default; }
/* A locked page is for reading: no "last change" line, no empty writing area under the text. */
.note-page.locked .note-prose { min-height: 0; }
.notes-scroll:has(.note-page.locked) { padding-bottom: 32px; }

/* Notes: sub-page blocks in the text (like Notion) */
.note-subpage { margin: 1px 0; border-radius: 6px; }
.note-subpage.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-prose a.note-subpage-link { display: flex; align-items: flex-start; gap: 6px; padding: 3px 6px; margin-left: -6px; border-radius: 6px; color: var(--text); text-decoration: none; line-height: 1.5; }
.note-prose a.note-subpage-link:hover { background: var(--surface-2); }
.note-subpage-link .nt-icon { margin-top: 2px; }
.note-subpage-title { min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.note-subpage-link.missing { color: var(--muted); font-style: italic; }

/* ---- Notes P3: block handle and menu, callout, columns, toggle, links, colours, quick search */

/* Colours of whole blocks (named, so the dark theme has its own shades) */
.note-prose {
  --nc-gray: #6b7280; --nc-brown: #8b5e3c; --nc-orange: #d9730d; --nc-yellow: #b7791f; --nc-green: #2e7d32; --nc-blue: #1565c0; --nc-purple: #7c3aed; --nc-pink: #c2185b; --nc-red: #c62828;
  --nb-gray: #f1f1ef; --nb-brown: #f4eeee; --nb-orange: #fbecdd; --nb-yellow: #fbf3db; --nb-green: #edf3ec; --nb-blue: #e7f3f8; --nb-purple: #f6f3f9; --nb-pink: #faf1f5; --nb-red: #fdebec;
  --nb-callout: #f1f1ef;
}
@media (prefers-color-scheme: dark) {
  .note-prose {
    --nc-gray: #9ca3af; --nc-brown: #c69c7c; --nc-orange: #fb923c; --nc-yellow: #facc15; --nc-green: #4ade80; --nc-blue: #60a5fa; --nc-purple: #c084fc; --nc-pink: #f472b6; --nc-red: #f87171;
    --nb-gray: #2a2f38; --nb-brown: #3a2f2a; --nb-orange: #3d2c1d; --nb-yellow: #3b351c; --nb-green: #1f3326; --nb-blue: #1c2e3d; --nb-purple: #2e2540; --nb-pink: #3a2230; --nb-red: #3d2224;
    --nb-callout: #252a33;
  }
}
.note-prose [data-text-color="gray"], .block-swatch-text[data-color="gray"] { color: var(--nc-gray); }
.note-prose [data-text-color="brown"], .block-swatch-text[data-color="brown"] { color: var(--nc-brown); }
.note-prose [data-text-color="orange"], .block-swatch-text[data-color="orange"] { color: var(--nc-orange); }
.note-prose [data-text-color="yellow"], .block-swatch-text[data-color="yellow"] { color: var(--nc-yellow); }
.note-prose [data-text-color="green"], .block-swatch-text[data-color="green"] { color: var(--nc-green); }
.note-prose [data-text-color="blue"], .block-swatch-text[data-color="blue"] { color: var(--nc-blue); }
.note-prose [data-text-color="purple"], .block-swatch-text[data-color="purple"] { color: var(--nc-purple); }
.note-prose [data-text-color="pink"], .block-swatch-text[data-color="pink"] { color: var(--nc-pink); }
.note-prose [data-text-color="red"], .block-swatch-text[data-color="red"] { color: var(--nc-red); }
.note-prose [data-bg-color="gray"], .block-swatch-bg[data-color="gray"] { background: var(--nb-gray); }
.note-prose [data-bg-color="brown"], .block-swatch-bg[data-color="brown"] { background: var(--nb-brown); }
.note-prose [data-bg-color="orange"], .block-swatch-bg[data-color="orange"] { background: var(--nb-orange); }
.note-prose [data-bg-color="yellow"], .block-swatch-bg[data-color="yellow"] { background: var(--nb-yellow); }
.note-prose [data-bg-color="green"], .block-swatch-bg[data-color="green"] { background: var(--nb-green); }
.note-prose [data-bg-color="blue"], .block-swatch-bg[data-color="blue"] { background: var(--nb-blue); }
.note-prose [data-bg-color="purple"], .block-swatch-bg[data-color="purple"] { background: var(--nb-purple); }
.note-prose [data-bg-color="pink"], .block-swatch-bg[data-color="pink"] { background: var(--nb-pink); }
.note-prose [data-bg-color="red"], .block-swatch-bg[data-color="red"] { background: var(--nb-red); }
.note-prose :is(p, h1, h2, h3, blockquote, ul, ol)[data-bg-color] { border-radius: 4px; padding: 2px 6px; }
.note-prose :is(ul, ol)[data-bg-color] { padding-left: 30px; }
.block-swatch-text, .block-swatch-bg { --nc-gray: #6b7280; --nc-brown: #8b5e3c; --nc-orange: #d9730d; --nc-yellow: #b7791f; --nc-green: #2e7d32; --nc-blue: #1565c0; --nc-purple: #7c3aed; --nc-pink: #c2185b; --nc-red: #c62828; --nb-gray: #f1f1ef; --nb-brown: #f4eeee; --nb-orange: #fbecdd; --nb-yellow: #fbf3db; --nb-green: #edf3ec; --nb-blue: #e7f3f8; --nb-purple: #f6f3f9; --nb-pink: #faf1f5; --nb-red: #fdebec; }
@media (prefers-color-scheme: dark) {
  .block-swatch-text, .block-swatch-bg { --nc-gray: #9ca3af; --nc-brown: #c69c7c; --nc-orange: #fb923c; --nc-yellow: #facc15; --nc-green: #4ade80; --nc-blue: #60a5fa; --nc-purple: #c084fc; --nc-pink: #f472b6; --nc-red: #f87171; --nb-gray: #2a2f38; --nb-brown: #3a2f2a; --nb-orange: #3d2c1d; --nb-yellow: #3b351c; --nb-green: #1f3326; --nb-blue: #1c2e3d; --nb-purple: #2e2540; --nb-pink: #3a2230; --nb-red: #3d2224; }
}

/* Text colour and highlight from the formatting bar (data-color: the CSP forbids style attributes) */
.note-prose span[data-color="#1d1d1f"] { color: #1d1d1f; }
.note-prose span[data-color="#6b7280"] { color: #6b7280; }
.note-prose span[data-color="#c62828"] { color: #c62828; }
.note-prose span[data-color="#e65100"] { color: #e65100; }
.note-prose span[data-color="#b7791f"] { color: #b7791f; }
.note-prose span[data-color="#2e7d32"] { color: #2e7d32; }
.note-prose span[data-color="#1565c0"] { color: #1565c0; }
.note-prose span[data-color="#6a1b9a"] { color: #6a1b9a; }
@media (prefers-color-scheme: dark) {
  .note-prose span[data-color="#1d1d1f"] { color: var(--text); }
  .note-prose span[data-color="#6b7280"] { color: #9ca3af; }
  .note-prose span[data-color="#c62828"] { color: #f87171; }
  .note-prose span[data-color="#e65100"] { color: #fb923c; }
  .note-prose span[data-color="#b7791f"] { color: #facc15; }
  .note-prose span[data-color="#2e7d32"] { color: #4ade80; }
  .note-prose span[data-color="#1565c0"] { color: #60a5fa; }
  .note-prose span[data-color="#6a1b9a"] { color: #c084fc; }
}
.note-prose mark { background: #fff3a3; }
.note-prose mark[data-color="#ffd6a5"] { background: #ffd6a5; }
.note-prose mark[data-color="#ffc9c9"] { background: #ffc9c9; }
.note-prose mark[data-color="#c8f2c2"] { background: #c8f2c2; }
.note-prose mark[data-color="#c6e2ff"] { background: #c6e2ff; }
.note-prose mark[data-color="#e5d4ff"] { background: #e5d4ff; }

/* Block handle (drag to move, click for the menu) */
.note-handle { position: relative; display: grid; place-items: center; width: 20px; height: 24px; margin-left: -6px; border-radius: 4px; color: var(--muted); cursor: grab; opacity: 0.7; }
/* An invisible bridge over the gap to the text: on the way from the text to the handle the mouse never leaves both. */
.note-handle::after { content: ""; position: absolute; left: 100%; top: 0; width: 6px; height: 100%; }
.note-handle:hover { background: var(--surface-2); opacity: 1; }
.note-handle[data-dragging="true"] { cursor: grabbing; }
.note-block-menu { max-height: min(70vh, 560px); overflow: auto; min-width: 230px; }
.block-menu-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.block-menu-glyph { display: inline-grid; place-items: center; width: 16px; font-size: 11px; font-weight: 700; }
.block-swatches { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px 6px; }
.note-block-menu button.block-swatch { display: inline-grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 0; border: 1px solid var(--border); border-radius: 6px; font-weight: 700; font-size: 13px; }
.note-block-menu button.block-swatch-text { background: var(--surface); }
.note-block-menu button.block-swatch-bg[data-color="default"] { background: var(--surface); }
.note-block-menu button.block-swatch.on { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Callout */
.note-prose .note-callout { display: flex; gap: 10px; margin: 0.6em 0; padding: 12px 16px; border-radius: 8px; }
.note-prose .note-callout:not([data-bg-color]) { background: var(--nb-callout); }
.note-prose .note-callout[data-bg-color] { padding: 12px 16px; border-radius: 8px; }
button.note-callout-icon { flex: none; width: 28px; height: 28px; margin-top: -2px; padding: 0; border: 0; border-radius: 6px; background: none; font-size: 20px; line-height: 28px; cursor: pointer; }
button.note-callout-icon:hover { background: rgba(127, 127, 127, 0.15); }
.note-callout-body { flex: 1; min-width: 0; }
.note-callout-body > :first-child { margin-top: 0; }
.note-callout-body > :last-child { margin-bottom: 0; }

/* Columns */
.note-prose .note-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; margin: 0.6em 0; }
.note-prose .note-column { min-width: 0; border-radius: 6px; }
.note-prose .note-column > :first-child { margin-top: 0; }
.note-prose .note-column > :last-child { margin-bottom: 0; }
.ProseMirror[contenteditable="true"] .note-column { outline: 1px dashed transparent; outline-offset: 6px; }
.ProseMirror[contenteditable="true"] .note-columns:hover > .note-column { outline-color: var(--border); }
@media (max-width: 700px) {
  .note-prose .note-columns { grid-auto-flow: row; gap: 12px; }
}

/* Toggle */
.note-prose .note-toggle { display: flex; align-items: flex-start; gap: 2px; margin: 0.3em 0; }
.note-prose .note-toggle > div { flex: 1; min-width: 0; }
.note-prose .note-toggle summary { display: block; list-style: none; }
.note-prose .note-toggle summary::-webkit-details-marker { display: none; }
.note-prose .note-toggle [data-type="detailsContent"] { margin-top: 2px; }
.note-prose .note-toggle [data-type="detailsContent"] > :first-child { margin-top: 0; }
button.note-toggle-btn { flex: none; width: 22px; height: 24px; margin-left: -4px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
button.note-toggle-btn::before { content: ""; display: inline-block; border-left: 6px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform 0.12s; }
.note-toggle.is-open > button.note-toggle-btn::before { transform: rotate(90deg); }
button.note-toggle-btn:hover { background: var(--surface-2); color: var(--text); }

/* Link to a note in the text */
.note-prose a.note-link-a { padding: 1px 3px; border-radius: 4px; color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); }
.note-prose a.note-link-a:hover { background: var(--surface-2); }
.note-prose a.note-link-a.missing { color: var(--muted); font-style: italic; }
.note-link-icon { display: inline-flex; margin-right: 3px; vertical-align: -2px; color: var(--muted); }
.note-link.selected a.note-link-a { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Link to a NAS file */
.note-nas-file button.note-file-name { border: 0; padding: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.note-nas-file button.note-file-name:hover { text-decoration: underline; }

/* Quick search (Ctrl+K) */
dialog.quick-open { width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 520px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); flex-direction: column; overflow: hidden; }
dialog.quick-open[open] { display: flex; }
dialog.quick-open::backdrop { background: rgba(0, 0, 0, 0.35); }
input.quick-open-input { margin: 0; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; font-size: 17px; }
input.quick-open-input:focus { outline: none; }
.quick-open-list { flex: 1; overflow: auto; padding: 6px; }
button.quick-open-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; }
button.quick-open-item.active { background: var(--surface-2); }
.quick-open-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.quick-open-empty { margin: 10px; }
.quick-open-hint { padding: 8px 14px; border-top: 1px solid var(--border); }
@media print {
  .note-handle, button.note-toggle-btn { display: none !important; }
  .note-prose [data-type="detailsContent"][hidden] { display: block !important; }
}

/* The global save / connection indicator in the top row: calm grey while all is fine. */
.sync-status { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; cursor: default; color: var(--muted); font-size: 15px; white-space: nowrap; }
.sync-status[data-state="saving"], .sync-status[data-state="connecting"] { color: var(--text); }
.sync-status[data-state="saving"] svg, .sync-status[data-state="connecting"] svg { animation: sync-spin 1.2s linear infinite; }
.sync-status[data-state="offline"] { color: #b45309; }
.sync-status[data-state="error"] { color: var(--danger); }
@keyframes sync-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sync-status svg { animation: none !important; } }

/* Dragging a block next to another one makes columns: a vertical line shows where (instead of the drop cursor). */
.note-col-indicator { position: fixed; z-index: 50; width: 3px; border-radius: 2px; background: var(--accent); pointer-events: none; }
body.note-col-dropping .prosemirror-dropcursor-block { display: none !important; }

/* Text alignment of paragraphs and headings (a data attribute: the CSP blocks style attributes). */
.note-prose [data-text-align="center"] { text-align: center; }
.note-prose [data-text-align="right"] { text-align: right; }

/* Contacts: checked business cards. */
.contact-card.checked { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* Contacts as business cards (the second view of the list). */
.contact-cards-all { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px 4px; cursor: pointer; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.contact-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; outline: none; min-width: 0; }
.contact-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.contact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.contact-card.active { box-shadow: inset 3px 0 0 var(--accent); }
.contact-card-check { position: absolute; top: 10px; right: 10px; }
.contact-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 22px; }
.contact-card-title { min-width: 0; }
.contact-card-name { font-size: 16px; overflow-wrap: anywhere; }
.contact-card-lines { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.contact-card-line { display: flex; gap: 8px; min-width: 0; }
.contact-card-label { flex: none; width: 92px; color: var(--muted); font-size: 13px; }
.contact-card-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-card-value a { color: var(--text); text-decoration: none; }
.contact-card-value a:hover { color: var(--accent); text-decoration: underline; }
/* Phones check like Soubory and E-maily: no "Vybrat vše" above the list (Petr 2026-10-11). */
:where(.ui-phone) .contact-cards-all { display: none; }

/* Coloured module header (menu proposal 14, module-band.ts): the module name with the path under it, the search on
   the right, the buttons with labels on the second row. It spans the left column too. */
.icon-btn > .btn-label { display: none; }
.mod-band { --mod: var(--mod-contacts); --band: color-mix(in srgb, var(--mod) 78%, #000); display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 460px); grid-template-areas: "title search" "acts acts"; align-items: center; gap: 12px 18px; padding: 14px 20px 12px; background: var(--band); color: #fff; border-bottom: 0; }
.mod-band[data-section="calendar"] { --mod: var(--mod-calendar); }
.mod-band[data-section="mail"] { --mod: var(--mod-mail); }
.mod-band[data-section="files"] { --mod: var(--mod-files); }
.mod-band[data-section="notes"] { --mod: var(--mod-notes); }
.mod-band[data-section="finance"] { --mod: var(--mod-finance); }
.mod-band[data-section="admin"] { --mod: var(--mod-admin); }
.mod-band[data-section="account"] { --mod: var(--mod-account); }
.mod-band > .band-title { grid-area: title; display: flex; align-items: center; gap: 12px; min-width: 0; }
.band-icon { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); }
.band-name { min-width: 0; }
.band-module { font-size: 22px; line-height: 1.2; }
.band-path { font-size: 13px; min-width: 0; }
.band-path .notes-top-center { min-width: 0; }
.mod-band .crumbs, .mod-band .notes-crumbs { font-size: 13px; color: #fff; }
.mod-band :is(a.crumb, span.crumb, button.crumb) { color: #fff; padding: 0 2px; background: none; }
.mod-band :is(a.crumb, button.crumb):hover { background: none; text-decoration: underline; }
.mod-band .crumb.current { color: rgba(255, 255, 255, 0.85); }
.mod-band .crumbs :is(.sep, .crumb-sep), .mod-band .crumbs svg { color: rgba(255, 255, 255, 0.7); }
.mod-band > .notes-top-left { grid-area: search; }
.mod-band input[type="search"] { height: 40px; border-radius: 10px; border-color: transparent; background: var(--surface); color: var(--text); }
.mod-band > .notes-top-right { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px; }
.mod-band .notes-top-right:empty { display: none; }
.mod-band button.icon-btn { width: auto; height: auto; min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 13.5px; }
.mod-band button.icon-btn > .btn-label { display: inline; }
.mod-band button.icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.28); }
.mod-band button.icon-btn.primary { background: #fff; color: var(--band); }
.mod-band button.icon-btn.danger { background: #fff; color: #b42323; margin-left: 10px; }
.mod-band button.icon-btn:is(.on, [aria-pressed="true"]) { background: rgba(255, 255, 255, 0.34); }
.mod-band button.icon-btn:disabled { opacity: 0.5; }
.mod-band .muted { color: rgba(255, 255, 255, 0.8); }
/* Full width over the left column (wide screens; phones have one column anyway). */
.notes-layout { grid-template-rows: auto minmax(0, 1fr); }
.notes-layout > .mod-band { grid-column: 1 / -1; }
@media (min-width: 901px) {
  :is(.contacts-page, .cal-page, .mod-page, .mail-layout, .fin-layout) > .mod-band { grid-column: 1 / -1; grid-row: 1; }
  :is(.contacts-page > .contacts-side, .contacts-page > .contacts-splitter, .cal-page > .cal-side, .cal-page > .cal-splitter, .mod-page > .files-side, .mod-page > .files-side-splitter, .mail-layout > .mail-side, .mail-layout > .mail-splitter, .fin-layout > .fin-side, .fin-layout > .fin-splitter) { grid-row: 2; }
}
@media (max-width: 900px) {
  .mod-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "search" "acts"; padding: 10px 12px; gap: 10px; }
  .notes-layout > .notes-main { order: 0; }
}
/* Notes: the way back to the tree only on phones with a note open. */
.mod-band button.icon-btn.notes-back { display: none; }
@media (max-width: 900px) { .notes-layout.show-main .mod-band button.icon-btn.notes-back { display: inline-flex; } }
/* Administration and the account: the header above the page (and above the second-level column). */
.main.with-band { padding: 0; max-width: none; }
.main.with-band > .page-band-body { padding: 28px 32px; max-width: 1100px; }
.main.with-band > .section-layout { min-height: calc(var(--app-h) - 100px); }
:where(.ui-phone) .main.with-band > .page-band-body { padding: 16px; }
/* The page name is the path in the header, so the page's own heading goes; its buttons show their labels. */
.main.with-band .toolbar > h1 { display: none; }
.main.with-band .toolbar { justify-content: flex-end; }
.main.with-band .toolbar button.icon-btn { width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; }
.main.with-band .toolbar button.icon-btn > .btn-label { display: inline; }
/* Buttons of forms and dialogs show their labels (Uložit, Zrušit, …) - no icon-only actions. */
:is(dialog, form) .row.end button.icon-btn, .leave-dialog button.icon-btn { width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; }
:is(dialog, form) .row.end button.icon-btn > .btn-label, .leave-dialog button.icon-btn > .btn-label { display: inline; }
dialog.leave-dialog { width: min(440px, calc(100vw - 32px)); }
dialog.leave-dialog h2 { margin: 0 0 6px; font-size: 18px; }
dialog.leave-dialog p { margin: 0 0 16px; color: var(--muted); }
/* Finance: transactions and planned payments open in a panel beside the list (like the detail in the other modules). */
.fin-layout.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr) minmax(380px, 460px); }
.fin-layout > .fin-detail { grid-column: 4; grid-row: 2; overflow: auto; }
.form-panel > h1 { font-size: 20px; margin: 0 0 4px; }
@media (max-width: 1100px) {
  .fin-layout.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); }
  .fin-layout.with-detail > .fin-main { display: none; }
  .fin-layout > .fin-detail { grid-column: 3; }
}
@media (max-width: 900px) {
  .fin-layout.with-detail { grid-template-columns: minmax(0, 1fr); }
  .fin-layout > .fin-detail { grid-column: 1; }
}
/* Checked records: their bar (count, bulk actions, Zrušit výběr) takes the place of the module's buttons in the header. */
.mod-band > .band-sel { grid-area: acts; min-width: 0; }
.mod-band > .band-sel:empty, .mod-band > .band-sel:has(> [hidden]:only-child) { display: none; }
.mod-band:has(> .band-sel > :not([hidden])) > .notes-top-right { display: none; }
.mod-band .band-sel > :is(.files-selbar, .fin-bulk) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; }
.mod-band .band-sel > :is(.files-selbar, .fin-bulk) > span:first-child { flex: none; margin-right: 6px; padding: 6px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.24); font-size: 13.5px; }
.mod-band .band-sel button.icon-btn.danger { margin-left: 10px; }
/* Phones: the bar stays at the bottom of the screen (where the thumb is); the header keeps its buttons. */
:where(.ui-phone) .mod-band:has(> .band-sel > :not([hidden])) > .notes-top-right { display: flex; }
:where(.ui-phone) .mod-band .band-sel > :is(.files-selbar, .fin-bulk) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 12px; background: var(--band); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
:where(.ui-phone) .mod-band .band-sel > :is(.files-selbar, .fin-bulk) > * { flex: none; }
/* Labels under the icons, like the bottom bar of the phone mockup. */
:where(.ui-phone) .mod-band .band-sel button.icon-btn { flex-direction: column; gap: 2px; padding: 5px 8px; font-size: 11.5px; min-height: 0; }
:where(.ui-phone) .mod-band .band-sel button.icon-btn.danger { margin-left: 0; }

/* ---------- Phones (menu proposal 14, Samsung Galaxy S25 = 360 × 780 CSS px) ---------- */
.band-module { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 22px; line-height: 1.2; cursor: default; text-align: left; }
.sheet-veil { position: fixed; inset: 0; z-index: 300; background: rgba(10, 14, 20, 0.45); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; max-height: 88vh; overflow: auto; padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); }
.sheet-grab { width: 40px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: var(--border); }
.sheet-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0 6px 8px; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sheet-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; color: var(--text); text-decoration: none; font-size: 13px; text-align: center; }
.sheet-tile:hover { background: var(--surface-2); }
.sheet-tile-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--mod) 16%, transparent); color: var(--mod); }
.sheet-tile.active { background: color-mix(in srgb, var(--mod) 12%, transparent); }
.sheet-tile.active .sheet-tile-icon { background: var(--mod); color: #fff; }
.sheet-tile .nav-badge { position: absolute; top: 6px; right: 10px; }
.sheet-tile[data-section="contacts"] { --mod: var(--mod-contacts); }
.sheet-tile[data-section="calendar"] { --mod: var(--mod-calendar); }
.sheet-tile[data-section="mail"] { --mod: var(--mod-mail); }
.sheet-tile[data-section="files"] { --mod: var(--mod-files); }
.sheet-tile[data-section="notes"] { --mod: var(--mod-notes); }
.sheet-tile[data-section="finance"] { --mod: var(--mod-finance); }
.sheet-tile[data-section="admin"] { --mod: var(--mod-admin); }
.sheet-list { display: flex; flex-direction: column; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sheet-row { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 15.5px; text-decoration: none; text-align: left; cursor: pointer; }
.sheet-row:hover { background: var(--surface-2); }
.phone-menu > .sync-status { padding: 10px 12px 2px; }
:root:where(.ui-phone) { --nav-h: 0px; }
:where(.ui-phone) .topnav { display: none; }
:where(.ui-phone) .band-module { cursor: pointer; font-size: 19px; }
:where(.ui-phone) .band-icon { width: 34px; height: 34px; border-radius: 10px; }
:where(.ui-phone) .mod-band { gap: 8px; padding: 10px 12px; }
/* The header's buttons in one line that scrolls sideways (like the phone mockup). */
:where(.ui-phone) .mod-band > .notes-top-right { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
:where(.ui-phone) .mod-band > .notes-top-right > * { flex: none; }
:where(.ui-phone) .mod-band input[type="search"] { height: 44px; font-size: 16px; }
.phone-menu .sync-label { display: inline; }
/* Phones: the chip row under the header (groups, calendars, mailbox + folders, storage + path, book + sections). */
.chip-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: rgba(255, 255, 255, 0.16); color: #fff; font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.chip.on { background: #fff; color: var(--band); }
.chip.box { background: var(--surface); color: var(--text); }
.chip-sq { width: 12px; height: 12px; flex: none; border-radius: 3px; background: var(--c, #8a7967); }
.chip-sq.empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c, #8a7967); }
.chip-count { font-size: 12px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.chip-sep { flex: none; display: inline-flex; color: rgba(255, 255, 255, 0.7); }
.sheet-row.on { background: var(--surface-2); }
.sheet-row-label { flex: 1; min-width: 0; }
.sheet-row .chip-sq { width: 16px; height: 16px; }
.cal-top-pick { display: none; }
@media (max-width: 900px) {
  :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick) { grid-column: 1 / -1; display: block; min-width: 0; }
}

/* ---------- The real app = the mockup (menu proposal 14) ---------- */
/* Each module page knows its colour, so its detail and lists can use it (not only the header). */
.contacts-page { --mod: var(--mod-contacts); }
.cal-page { --mod: var(--mod-calendar); }
.mail-layout { --mod: var(--mod-mail); }
.files-page { --mod: var(--mod-files); }
.notes-layout { --mod: var(--mod-notes); }
.fin-layout { --mod: var(--mod-finance); }
:is(.contacts-page, .cal-page, .mail-layout, .mod-page, .notes-layout, .fin-layout) { --band: color-mix(in srgb, var(--mod) 78%, #000); }
/* Search field with a magnifier. */
.mod-band > .notes-top-left { position: relative; }
.band-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.mod-band > .notes-top-left > input[type="search"] { padding-left: 38px; }
/* View switches (Seznam/Mřížka, Den/Týden/…) after the actions, like in the mockup. */
.mod-band > .notes-top-right > button.icon-btn.toggle { order: 5; }
/* Header: module (opens the module sheet) on the left, the account on the right; no path (the chips say where). */
:where(.ui-phone) .mod-band { padding: 10px 12px; gap: 10px; }
:where(.ui-phone) .mod-band > .band-title { gap: 9px; }
:where(.ui-phone) .band-path { display: none; }
:where(.ui-phone) .mod-band input[type="search"] { height: 44px; border-radius: 12px; font-size: 15px; }
:where(.ui-phone) .mod-band button.icon-btn { padding: 8px 12px; }
:where(.ui-phone) .mod-band > :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick) { margin: 0 -12px -10px; padding: 10px 12px; }

/* Lists: two lines per record, the key value on the right; checkboxes only while checking; no column captions. */
:where(.ui-phone) .files-head, :where(.ui-phone) .mail-head { display: none; }
:where(.ui-phone) .files-row, :where(.ui-phone) .files-row.with-where { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name size" "date date"; gap: 2px 10px; padding: 10px 16px; min-height: 58px; }
:where(.ui-phone) .files-row > .files-name { font-size: 15px; }
:where(.ui-phone) .files-row > .files-size, :where(.ui-phone) .files-row > .files-date { font-size: var(--fs-ui); }
:where(.ui-phone) .files-row > .files-size { justify-self: end; }
:where(.ui-phone) .files-row > .files-date { padding-left: 26px; justify-self: start; text-align: left; }
:where(.ui-phone) .fin-tx tr.clickable { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc amount" "cat cat"; gap: 2px 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
:where(.ui-phone) .fin-tx tr.clickable > td { padding: 0; border: 0; }
:where(.ui-phone) .fin-tx tr.clickable > td:nth-child(2) { grid-area: desc; font-size: 15px; }
:where(.ui-phone) .fin-tx tr.clickable > td:nth-child(3) { grid-area: cat; }
:where(.ui-phone) .fin-tx tr.clickable > td:nth-child(5) { grid-area: amount; font-size: 14.5px; }
:where(.ui-phone) .fin-tx tr.clickable > :is(td:nth-child(4), td:nth-child(6)) { display: none; }
:where(.ui-phone) :is(.mod-page, .mail-layout, .contacts-page, .fin-layout):not(:has(.band-sel > :not([hidden]))) :is(.files-check, .mail-check, .contact-check, .fin-check) { display: none; }
:where(.ui-phone) .mod-page:has(.band-sel > :not([hidden])) .files-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check name size" "check date date"; }
:where(.ui-phone) .fin-layout:has(.band-sel > :not([hidden])) .fin-tx tr.clickable { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "check desc amount" "check cat cat"; }
:where(.ui-phone) .fin-tx tr.clickable > td.fin-check { grid-area: check; }

/* Detail: the whole screen, a coloured bar with the way back on top, the record's actions at the bottom. */
:where(.ui-phone) .with-detail > .mod-band { display: none; }
:where(.ui-phone) .detail-pane { padding: 0 16px 96px; }
:where(.ui-phone) .detail-bar { position: sticky; top: 0; z-index: 5; margin: 0 -16px 14px; padding: 8px 8px 8px 4px; background: var(--band, var(--accent)); }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back { color: #fff; font-size: 15.5px; padding: 8px 10px 8px 4px; }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back:hover { background: rgba(255, 255, 255, 0.14); }
:where(.ui-phone) .detail-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
:where(.ui-phone) .detail-actions button.icon-btn { flex-direction: column; gap: 3px; width: auto; padding: 6px 2px; border: 0; background: none; color: var(--text); font-size: 12px; }
:where(.ui-phone) .detail-actions button.icon-btn svg { color: var(--mod, var(--accent)); }
:where(.ui-phone) .detail-actions button.icon-btn.danger, :where(.ui-phone) .detail-actions button.icon-btn.danger svg { color: var(--danger); }
:where(.ui-phone) .detail-actions button.icon-btn.primary { background: none; color: var(--text); }
.phone-more-btn { display: none !important; }
.sheet-sep { height: 1px; margin: 6px 0; background: var(--border); }
.sheet-row.danger, .sheet-row.danger svg { color: var(--danger); }
.sheet-row:disabled { opacity: 0.45; }
:where(.ui-phone) .detail-actions > button.icon-btn.phone-more { display: none; }
:where(.ui-phone) .detail-actions > button.icon-btn.phone-more-btn { display: flex !important; }
/* Chips (phones and the middle width, wherever the left column is hidden) on a light strip under the header. */
@media (max-width: 900px) {
  .mod-band > :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick) { background: var(--surface); border-bottom: 1px solid var(--border); }
  .chip { background: var(--surface-2); color: var(--text); }
  .chip svg { color: var(--mod); }
  .chip.on { background: color-mix(in srgb, var(--mod) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mod) 60%, transparent); }
  .chip.box { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); font-weight: 500; }
  .chip.box svg { color: var(--muted); }
  .chip-sep { color: var(--muted); }
}
/* Hover in the coloured header and the coloured back bar: a lighter shade of the module colour (never the grey of
   ordinary buttons, never dark text). */
.band-module:hover { background: none; }
.chip:hover { background: var(--surface-2); }
.chip.on:hover { background: color-mix(in srgb, var(--mod) 24%, transparent); }
.chip.box:hover { background: var(--surface-2); }
.detail-bar button.icon-btn.detail-back:hover, .detail-bar button.icon-btn.detail-close:hover { background: color-mix(in srgb, var(--mod, var(--accent)) 14%, transparent); }
:where(.ui-phone) .band-module { margin-left: -6px; padding: 6px 10px 6px 6px; border-radius: 10px; }
:where(.ui-phone) .band-module:hover, :where(.ui-phone) .band-module:active { background: rgba(255, 255, 255, 0.14); color: #fff; }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back, :where(.ui-phone) .detail-bar button.icon-btn.detail-back:hover, :where(.ui-phone) .detail-bar button.icon-btn.detail-back:active { color: #fff; }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back:hover, :where(.ui-phone) .detail-bar button.icon-btn.detail-back:active { background: rgba(255, 255, 255, 0.14); }
/* "Zpět na …" as big as the module name in the header (where the detail replaces the list). */
@media (max-width: 1100px) { .detail-bar button.icon-btn.detail-back { font-size: 22px; } }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back { font-size: 19px; }
/* Phones: the detail's back bar exactly as tall as the header's top row (it ends where the search starts) and its
   label on the same line as the module name: 10 px + a 34.8 px button (6 + 19 px × 1.2 + 6) + 10 px. */
:where(.ui-phone) .detail-bar { padding: 10px 12px 10px 6px; }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back { height: auto; padding: 6px 10px 6px 6px; border-radius: 10px; line-height: 1.2; min-height: 0; }

/* ---------- Desktop like the mockup (round 2) ---------- */
/* Header buttons as in the mockup: groups split by a thin line, the first action white, Smazat white with red text. */
.band-sep { flex: none; width: 1px; height: 22px; margin: 0 6px; background: rgba(255, 255, 255, 0.4); }
.mod-band button.icon-btn { padding: 7px 12px; }
.mod-band button.icon-btn.primary { font-weight: 600; }
.mod-band button.icon-btn.danger { margin-left: 0; }
.mod-band button.icon-btn.danger:disabled { background: rgba(255, 255, 255, 0.16); color: #fff; }
.band-selchip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.22); font-size: 13.5px; white-space: nowrap; }
.band-selchip button.icon-btn { padding: 4px 9px !important; min-height: 0 !important; border-radius: 7px; background: #fff !important; color: var(--band) !important; font-size: 13px; }
/* The view switch last, on the right: one joined control with plain words (Seznam | Dlaždice). */
.band-views { margin-left: auto; display: inline-flex; flex: none; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; overflow: hidden; }
.band-views button { padding: 6px 12px; border: 0; border-radius: 0; background: none; color: #fff; font-size: 13px; }
.band-views button + button { border-left: 1px solid rgba(255, 255, 255, 0.4); }
.band-views button:hover { background: rgba(255, 255, 255, 0.16); }
.band-views button.on { background: rgba(255, 255, 255, 0.28); }
/* Files: the header itself shows the checked items' actions (at every width, no bar at the bottom of a phone); the
   file's buttons are in the header too. */
.mod-page .mod-band > .band-sel { display: none; }
.mod-page .mod-band:has(> .band-sel > :not([hidden])) > .notes-top-right { display: flex; }
:where(html:not(.ui-phone)) .files-detail .detail-actions { display: none; }
/* No "Zavřít": wide screens close the detail by a second click on the record, so the bar is only for the way back. */
@media (min-width: 1101px) { .detail-bar { display: none; } }
/* Checkboxes appear under the mouse (and stay while something is checked), like in the mockup. */
@media (hover: hover) {
  :where(html:not(.ui-phone)) :is(.files-row, .files-tile) .files-check, :where(html:not(.ui-phone)) .files-tile .tile-check, :where(html:not(.ui-phone)) .mail-row .mail-check, :where(html:not(.ui-phone)) .contact-row .contact-check, :where(html:not(.ui-phone)) .fin-tx tr.clickable .fin-check input { visibility: hidden; }
  :where(html:not(.ui-phone)) :is(.files-row, .files-tile):is(:hover, .selected) :is(.files-check, .tile-check), :where(html:not(.ui-phone)) .mail-row:is(:hover, .selected) .mail-check, :where(html:not(.ui-phone)) .contact-row:is(:hover, .checked) .contact-check, :where(html:not(.ui-phone)) .fin-tx tr.clickable:hover .fin-check input, :where(html:not(.ui-phone)) .fin-tx .fin-check input:checked { visibility: visible; }
  :where(html:not(.ui-phone)) :is(.mod-page, .mail-layout, .contacts-page, .fin-layout):has(.band-sel > :not([hidden])) :is(.files-check, .tile-check, .mail-check, .contact-check, .fin-check input) { visibility: visible; }
}
/* The row of column captions as tall as a row of data. */
.files-head { padding-top: 7px; padding-bottom: 7px; min-height: var(--row-h, 37.5px); }
.mail-head { padding-top: 7px; padding-bottom: 7px; min-height: var(--row-h, 37.5px); }
/* The left column without the module name (the header says it). */
:is(.contacts-side, .cal-side, .files-side, .mail-side, .fin-side, .notes-side) > .pane-title { display: none; }

/* ---------- Round 3 (Petr 2026-10-10) ---------- */
:root { --fs-ui: 13.5px; }
/* The header is always the same height, whatever is chosen: a title row and one row of buttons that never wraps. */
:where(html:not(.ui-phone)) .mod-band { grid-template-rows: minmax(47px, auto) 34px; }
:where(html:not(.ui-phone)) .mod-band > .band-title { min-height: 47px; }
:where(html:not(.ui-phone)) .mod-band > :is(.notes-top-right, .band-sel) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; height: 34px; }
:where(html:not(.ui-phone)) .mod-band .notes-top-right:empty { display: flex; }
.mod-band button.icon-btn, .band-count, .band-views { box-sizing: border-box; height: 34px; min-height: 34px; }
.mod-band button.icon-btn { flex: none; font-size: var(--fs-ui); }
/* No lines between the buttons: equal gaps. */
.band-sep { display: none; }
/* No white buttons in the header: the main action and Smazat look like the others (all modules). */
.mod-band button.icon-btn.primary, .mod-band button.icon-btn.danger { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: inherit; }
.mod-band button.icon-btn.primary:hover:not(:disabled), .mod-band button.icon-btn.danger:hover:not(:disabled) { background: rgba(255, 255, 255, 0.28); }
.mod-band button.icon-btn.danger:disabled { background: rgba(255, 255, 255, 0.16); }
/* "Vybráno N" as a field of its own; Zrušit výběr is an ordinary button next to it. */
.band-count { flex: none; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; font-size: var(--fs-ui); white-space: nowrap; }
.band-views button { font-size: var(--fs-ui); }
/* The "check all" box in the column captions appears under the mouse too (and while something is checked). */
@media (hover: hover) {
  :where(html:not(.ui-phone)) :is(.files-head, .mail-head, .contact-head) input[type="checkbox"] { visibility: hidden; }
  :where(html:not(.ui-phone)) :is(.files-head, .mail-head, .contact-head):hover input[type="checkbox"], :where(html:not(.ui-phone)) :is(.mod-page, .mail-layout):has(.band-sel > :not([hidden])) :is(.files-head, .mail-head, .contact-head) input[type="checkbox"] { visibility: visible; }
}
/* Files: one text size like the buttons - the tree, the column captions, the rows and the detail; the file name in the
   detail as big as the module name, not bold. */
.files-side, .files-side .tree-node, .files-side a, .files-head, .files-head button, .files-row, .files-row :is(.files-name, .files-date, .files-size, .files-where), .files-tile, .files-detail .fields :is(dt, dd) { font-size: var(--fs-ui); }
.files-head { text-transform: none; letter-spacing: 0; }
.files-detail h1.files-detail-name { font-size: 20px; font-weight: 400; line-height: 1.2; }
/* One spacing system for every detail (Soubory, E-maily; Petr 2026-10-11): the title 12 px above what follows, the
   property rows 10 px apart, 16 px under the properties, every other block 12 px apart. */
.files-detail h1.files-detail-name { margin: 0 0 12px; }
.files-detail .fields { row-gap: 10px; margin: 0 0 16px; }
.files-detail .fields + .files-preview { margin-top: 0; }
/* The composer: its title 12 px above the first field too (the fields are 10 px apart, like the header; Petr 2026-10-11). */
.files-detail .compose-head { margin-bottom: 2px; }
/* The first word of every left column at the same height (24 px under the header): Contacts and Calendar have taller rows. */
@media (min-width: 901px) { :is(.contacts-page > .contacts-side, .cal-page > .cal-side) { padding-top: 17px; } }
/* Files: the column captions and the file name in the detail start on the same line as the first word of the left
   column (24 px under the header). */
:where(html:not(.ui-phone)) .mod-page .files-body { padding-top: 14.4px; }
:where(html:not(.ui-phone)) .mod-page .files-detail { padding-top: 26px; }
/* The 20 px title's letters start 3 px lower in their line than 13.5 px text: pulled up so its letters begin on the
   same line as "Osobní" and "Odesílatel" (Petr 2026-10-11). Phones keep the same gaps as computers: 26 px
   above the content (29 px to the title's letters), 12 px at the sides and the end. */
.mod-page .files-detail h1.files-detail-name, .mod-page .files-detail .compose-head { margin-top: -3px; }
/* The middle width (761–900 px: no left column): the header keeps the wide layout - the search on the right of the
   module name, one row of buttons - and the chips get a light strip of their own under it. */
@media (max-width: 900px) {
  /* .mod-band twice: E-mail and Finance have their own columns for this width. */
  :where(html:not(.ui-phone)) .mod-band.mod-band { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "title search" "acts acts"; gap: 12px 18px; padding: 14px 20px 12px; }
  :where(html:not(.ui-phone)) .mod-band:has(> :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick)) { grid-template-areas: "title search" "acts acts" "pick pick"; grid-template-rows: minmax(47px, auto) 34px auto; }
  :where(html:not(.ui-phone)) .mod-band > :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick) { grid-area: pick; margin: 0 -20px -12px; padding: 10px 20px; }
  /* The path under the module name stays as on wide screens (E-mail and Finance hid it here before the header). */
  :where(html:not(.ui-phone)) .mod-band .band-path > .notes-top-center:not(:empty) { display: flex; }
}
/* The row of modules fits the middle width too. */
@media (max-width: 1100px) { :where(html:not(.ui-phone)) .topnav { gap: 4px; padding: 0 8px; } :where(html:not(.ui-phone)) .nav-link { padding: 0 7px; } }
/* Files: no path under the module name at any width (the tree and the chips say where you are). */
/* ---------- Three layouts: computer (> 1100 px), tablet (761–1100 px), phone (≤ 760 px) ---------- */
/* ui.ts puts html.ui-phone on phones and on tablets in the modules that use the phone layout there (Files so far). The
   phone layout above relies on these narrow-screen rules, so a tablet in the phone layout gets them too (up to 1100 px). */
:where(.ui-phone) .mod-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "search" "acts"; }
:where(.ui-phone) :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick) { grid-column: 1 / -1; display: block; min-width: 0; }
:where(.ui-phone) .mod-band > :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick) { background: var(--surface); border-bottom: 1px solid var(--border); }
:where(.ui-phone) .chip { background: var(--surface-2); color: var(--text); }
:where(.ui-phone) .chip svg { color: var(--mod); }
:where(.ui-phone) .chip.on { background: color-mix(in srgb, var(--mod) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mod) 60%, transparent); }
:where(.ui-phone) .chip.box { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); font-weight: 500; }
:where(.ui-phone) .chip.box svg { color: var(--muted); }
:where(.ui-phone) .chip-sep { color: var(--muted); }
:where(.ui-phone) .contacts-layout.mod-page, :where(.ui-phone) .contacts-layout.mod-page.with-detail { grid-template-columns: minmax(0, 1fr); }
:where(.ui-phone) .mod-page > :is(.files-side, .files-side-splitter) { display: none; }
:where(.ui-phone) .mod-page > :is(.files-topbar, .files-main, .files-detail) { grid-column: 1; }
/* Phone rows of Files: the narrow list (container query above) places the cells; a tablet's list is wider. */
:where(.ui-phone) .files-row > .files-check { grid-area: check; }
:where(.ui-phone) .files-row > .files-name { grid-area: name; }
:where(.ui-phone) .files-row > .files-date { grid-area: date; }
:where(.ui-phone) .files-row > .files-size { grid-area: size; }
:where(.ui-phone) .files-list .files-where { display: none; }
/* Files: the tree's own 15 px (storages and folders) gives way to the size of the buttons too. */
.mod-page .files-side :is(.files-conns a.files-conn, .files-tree a.tree-node) { font-size: var(--fs-ui); }
/* The smaller text sits 1 px lower in its line: the tree starts 1 px higher, on the line of the column captions. */
.mod-page > .files-side { padding-top: 19px; }
/* Choices in a menu (sorting): a tick in front of the chosen one, a line between the groups. */
.popup-menu > button.sep { position: relative; margin-top: 7px; }
.popup-menu > button.sep::before { content: ""; position: absolute; left: 6px; right: 6px; top: -4px; border-top: 1px solid var(--border); }
.menu-tick { flex: none; width: 18px; height: 18px; display: inline-flex; color: var(--mod, var(--accent)); }
.popup-menu .menu-label { flex: 1; min-width: 0; }
/* The sort menu's button: on its own, before the view switch, on the right (Název A–Z ˅   Seznam | Dlaždice). */
.mod-band button.band-sort { margin-left: auto; flex: none; box-sizing: border-box; height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 12px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: none; color: #fff; font-size: var(--fs-ui); white-space: nowrap; }
.mod-band button.band-sort:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.mod-band button.band-sort:disabled { opacity: 0.6; cursor: default; }
.mod-band button.band-sort + .band-views { margin-left: 0; }
.files-head .files-name { display: block; text-align: left; }
/* Files: the open folder (and storage) in the left column in the module's colour; the count of the bin like its name. */
.mod-page .files-side :is(a.tree-node, a.files-conn).active { background: var(--band); color: #fff; }
.files-tree a.files-trash-node .count { color: inherit; font-size: inherit; font-family: inherit; font-variant-numeric: normal; }
/* Files: the date of a narrow row (phones, a list beside the detail) on the right, under the size. */
@container list (max-width: 640px) {
  .files-row > .files-date { padding-left: 0; justify-self: end; text-align: right; }
}
:where(.ui-phone) .files-row > .files-date { padding-left: 0; justify-self: end; text-align: right; }
/* The module's icon in the header as tall as the search field (computer and tablet). */
:where(html:not(.ui-phone)) .band-icon { width: 40px; height: 40px; }
/* Narrow rows (two lines): the checkbox on the line of the name, not between the lines. */
@container list (max-width: 640px) {
  .files-row > .files-check { align-self: start; margin-top: 2px; }
}
:where(.ui-phone) .files-row > .files-check { align-self: start; margin-top: 2px; }
/* Files bin: rows in the list's type (no note above them), starting where the list does under the header; the
   item's buttons like the header's (the module colour, icon and word). */
.mod-page .files-trash { padding-top: 16.4px; }
.files-trash .trash-row { padding: 7px 8px; }
.files-trash-name, .files-trash-meta { font-size: var(--fs-ui); line-height: 1.5; }
.files-trash-meta { color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
.files-trash-actions { flex: none; gap: 6px; }
.files-trash-actions button.icon-btn { width: auto; height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--band) 84%, #fff); color: #fff; font-size: var(--fs-ui); }
.files-trash-actions button.icon-btn > .btn-label { display: inline; }
.files-trash-actions button.icon-btn:hover { background: color-mix(in srgb, var(--band) 72%, #fff); color: #fff; }
/* Phones: the module's icon as tall as the search field there too. */
:where(.ui-phone) .band-icon { width: 44px; height: 44px; }
/* Phones: the bin's buttons under the line saying where the item was and when it was deleted. */
:where(.ui-phone) .files-trash .trash-row { flex-direction: column; align-items: stretch; gap: 8px; }
:where(.ui-phone) .files-trash-actions { padding-left: 30px; }
/* Files bin: the item's icon small, on the line of its name (like the list); the details under the name. */
.files-trash .files-trash-info { display: block; min-width: 0; }
.files-trash .files-trash-name { display: flex; align-items: center; gap: 8px; }
.files-trash .files-trash-name > .fi { flex: none; display: inline-flex; }
.files-trash .files-trash-meta { padding-left: 26px; }
:where(.ui-phone) .files-trash-actions { padding-left: 26px; }
/* Phones: the module name's highlight and "Zpět na …" as tall as the module's icon and the search (44 px); the back
   bar so ends where the header's search starts (10 + 44 + 10 px). */
:where(.ui-phone) .band-module { box-sizing: border-box; height: 44px; }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back { box-sizing: border-box; height: 44px; display: inline-flex; align-items: center; }
/* Phones: "Zpět na …" starts where the header's icon and search do (12 px from the edge), not before them. */
:where(.ui-phone) .detail-bar { padding-left: 12px; }
/* Phones: "Zpět na …" looks like a button (like the header's buttons on the coloured bar). */
:where(.ui-phone) .detail-bar button.icon-btn.detail-back { background: rgba(255, 255, 255, 0.16); padding: 0 14px 0 10px; }
:where(.ui-phone) .detail-bar button.icon-btn.detail-back:is(:hover, :active) { background: rgba(255, 255, 255, 0.28); }
/* Phones: the module's icon and name are one button (opening the module menu), with no arrow. */
:where(.ui-phone) .mod-band > .band-title { justify-self: start; box-sizing: border-box; height: 44px; gap: 2px; padding-right: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); cursor: pointer; }
:where(.ui-phone) .mod-band > .band-title:is(:hover, :active) { background: rgba(255, 255, 255, 0.28); }
:where(.ui-phone) .band-icon { background: none; }
:where(.ui-phone) .band-module, :where(.ui-phone) .band-module:is(:hover, :active) { height: auto; margin-left: 0; padding: 0; background: none; }
/* Phones: the file's detail fills the screen; the coloured bar on top and the actions at the bottom stay put and only
   the part between them (name, place, … preview) scrolls, with its own scrollbar. */
:where(.ui-phone) .mod-page.with-detail > .files-detail { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; }
:where(.ui-phone) .files-detail > .detail-bar { flex: none; position: static; margin: 0; }
:where(.ui-phone) .files-detail > .files-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 16px; }
:where(.ui-phone) .files-detail > .detail-actions { flex: none; position: static; }
/* Arrows at the ends of a row of buttons that does not fit (scrollArrows in module-band.ts): over the row, in the
   bar's colour with a soft edge, so the buttons under them fade out. */
.scroll-arrow { z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)), var(--band); cursor: pointer; }
.scroll-arrow:hover { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), var(--band); }
.scroll-arrow[hidden] { display: none; }
.scroll-arrow.left svg { transform: rotate(180deg); }
.mod-band > .scroll-arrow { grid-area: acts; align-self: center; }
.mod-band > .scroll-arrow.left { justify-self: start; }
.mod-band > .scroll-arrow.right { justify-self: end; }
/* The row's buttons end (fading out) before an arrow: nothing shows under the arrow or between it and the edge. The
   zone is the arrow and a gap, plus the row's own padding where the row reaches the screen's edge (phones). */
.mod-band > .notes-top-right { --arrow-zone: 40px; }
/* The phone's chip row: the same arrows, 12 px from the screen edges, over the row (scrollingChips). */
.chip-scroll { position: relative; }
.chip-scroll > .chip-row { --arrow-zone: 51px; }
.chip-scroll > .scroll-arrow { position: absolute; top: 50%; margin-top: -17px; }
.chip-scroll > .scroll-arrow.left { left: 0; }
.chip-scroll > .scroll-arrow.right { right: 0; }
/* On the light strip the arrows look like its chips: grey edge, the strip's colour inside (Petr 2026-10-11). */
.chip-scroll > .scroll-arrow { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); color: var(--text); }
.chip-scroll > .scroll-arrow:hover { background: var(--surface-2); }
:where(.ui-phone) .mod-band > .notes-top-right { --arrow-zone: 52px; }
.scroll-cut-r { -webkit-mask-image: linear-gradient(to left, transparent var(--arrow-zone), #000 calc(var(--arrow-zone) + 10px)); mask-image: linear-gradient(to left, transparent var(--arrow-zone), #000 calc(var(--arrow-zone) + 10px)); }
.scroll-cut-l { -webkit-mask-image: linear-gradient(to right, transparent var(--arrow-zone), #000 calc(var(--arrow-zone) + 10px)); mask-image: linear-gradient(to right, transparent var(--arrow-zone), #000 calc(var(--arrow-zone) + 10px)); }
.scroll-cut-l.scroll-cut-r { -webkit-mask-image: linear-gradient(to right, transparent var(--arrow-zone), #000 calc(var(--arrow-zone) + 10px), #000 calc(100% - var(--arrow-zone) - 10px), transparent calc(100% - var(--arrow-zone))); mask-image: linear-gradient(to right, transparent var(--arrow-zone), #000 calc(var(--arrow-zone) + 10px), #000 calc(100% - var(--arrow-zone) - 10px), transparent calc(100% - var(--arrow-zone))); }
/* Files (trial): the module's icon, the search field and "Zpět na soubory" as tall as the header's buttons (34 px). */
.mod-page .band-icon { width: 34px; height: 34px; border-radius: 9px; }
/* The module's icon: 22 px on computers and phones, with the 1.5 px line of the 18 px icons (Petr 2026-10-11); the
   phone's module sheet uses the same size for its module tiles and its rows (Můj účet, Odhlásit). */
.mod-page .band-icon > svg, .sheet-tile-icon > svg, .phone-menu .sheet-row > svg { stroke-width: calc(2 * 18 / 22); }
.mod-page .mod-band input[type="search"] { height: 34px; border-radius: 9px; border-color: var(--border); }
.mod-page .mod-band > .band-title { height: auto; }
:where(.ui-phone) .mod-page .mod-band > .band-title { height: 34px; border-radius: 9px; }
.mod-page .detail-bar button.icon-btn.detail-back { height: 34px; border-radius: 9px; }
/* A file's name exactly as it is (the detail's headings elsewhere start with a capital letter). */
.files-detail h1.files-detail-name::first-letter { text-transform: none; }
/* Files on a computer (trial): the header's spacing as on the phone - 10 px around and between its two 34 px rows. */
:where(html:not(.ui-phone)) .mod-page .mod-band { grid-template-rows: 34px 34px; row-gap: 10px; padding-top: 10px; padding-bottom: 10px; }
/* The coloured header: 10 px everywhere (Petr 2026-10-11) - above the first row, between the rows, under the last one
   (also to the phone's chip strip) and between the buttons. Arrow zones: 12 px edge on phones + 34 px arrow + 5 px
   clear, then a 10 px fade (Petr 2026-10-11). Computers and phones. */
.mod-page .mod-band { row-gap: 10px; }
.mod-page .mod-band > .notes-top-right, .mod-page .mod-band .band-sel > .files-selbar { gap: 10px; }
.mod-page .mod-band .band-sel > .files-selbar > span:first-child { margin-right: 0; }
.mod-page .mod-band > .notes-top-right { --arrow-zone: 39px; }
:where(.ui-phone) .mod-page .mod-band > .notes-top-right { --arrow-zone: 51px; }
:where(html:not(.ui-phone)) .mod-page .mod-band > .band-title { min-height: 34px; }
/* Files: the accents (the open file, checked rows and boxes, focus, the splitter) in the module's colour, not blue. */
.mod-page { --accent: var(--mod); }
/* The search field's focus ring on the coloured header: white. */
.mod-page .mod-band input[type="search"]:focus { outline-color: #fff; }
/* Buttons of dialogs and forms (Uložit, Zrušit, Smazat, …) the size of the modules' buttons: 13.5 px text, 34 px tall.
   Their colours stay (the red of a destructive action warns in a dialog). */
:is(dialog, form) .row.end button.icon-btn, .leave-dialog button.icon-btn { box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: var(--fs-ui); }
/* Files: the accents of everything shown over the page while it is open (dialogs such as the folder picker, the
   transfers panel and its progress) in the module's colour too. */
:root[data-module="files"] { --accent: var(--mod-files); }
:root[data-module="mail"] { --accent: var(--mod-mail); }
:root[data-module="contacts"] { --accent: var(--mod-contacts); }
/* Files: folders (tree, list, tiles, bin) in the module's colour; a storage keeps its own colour (its square). */
.files-row .fi-folder, .files-tile .fi-folder, .files-tree .files-folder-icon, .files-trash-info .fi-folder { color: var(--mod); }
/* Files: the chips' icons and arrows 18 px like all the other icons. */
.mod-page .chip-row svg { width: 18px; height: 18px; }
/* Files: the storage's coloured square as big as the icons (18 px), in the tree and in its chip. */
.mod-page .files-side a.files-conn .swatch { width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; }
.mod-page .chip-row .chip-sq { width: 18px; height: 18px; border-radius: 5px; }
/* Phones: the module's name sits exactly in the middle of its row (no line box of the name's wrapper shifting it by a
   pixel). */
:where(.ui-phone) .mod-band .band-name { display: flex; align-items: center; }
.files-search-head:empty { display: none; }
dialog.progress-dialog { width: min(440px, calc(100vw - 32px)); }
dialog.progress-dialog h2 { margin: 0 0 6px; font-size: 18px; }
dialog.progress-dialog p { margin: 0 0 12px; }
/* Files: search results look like the bin's items (name; folder · size · changed; "Přejít do složky" on the right). */
.files-found .trash-row { align-items: center; padding: 7px 8px; cursor: default; outline: none; }
.files-found .trash-row:hover { background: var(--surface-2); }
.files-found .trash-row.focused { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.files-found .trash-row.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.files-found .trash-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Kontakty: the bin's rows open the contact (read only), so they react like search results. */
.contacts-trash .trash-row { outline: none; }
.contacts-trash .trash-row:hover { background: var(--surface-2); }
.contacts-trash .trash-row.focused { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.contacts-trash .trash-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.files-found .files-trash-info { display: block; min-width: 0; }
.files-found .files-trash-name { display: flex; align-items: center; gap: 8px; }
.files-found .files-trash-name > .fi { flex: none; display: inline-flex; }
.files-found .files-trash-meta { padding-left: 26px; }
.files-found .fi-folder { color: var(--mod); }
:where(.ui-phone) .files-found .trash-row { flex-direction: column; align-items: stretch; gap: 8px; }
:where(.ui-phone) .files-found .files-trash-actions { padding-left: 26px; }
/* Files: a long name wraps onto more lines (no "…"); the row's other cells stay on its first line. */
.files-row { align-items: start; }
.files-row .files-name { align-items: flex-start; }
.files-row .fname-text { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.files-row .files-name > .fi { margin-top: 1px; }
.files-row > .files-check { margin-top: 2px; }
.files-detail h1.files-detail-name { overflow-wrap: anywhere; }
/* Files, narrow rows (phones, a list beside the detail): the name takes the whole first line when it is long and the
   size moves under it (on the right); a short name keeps the size beside it. The date is the last line, on the right. */
@container list (max-width: 640px) {
  .files-row, .files-row.with-where { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; row-gap: 2px; }
  .files-row > .files-check { order: 0; flex: none; }
  .files-row > .files-name { order: 1; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 30px); }
  .files-row > .files-size { order: 2; margin-left: auto; }
  .files-row > .files-date { order: 3; flex: 1 0 100%; padding-left: 0; text-align: right; }
}
:where(.ui-phone) .files-row, :where(.ui-phone) .files-row.with-where { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; row-gap: 2px; }
:where(.ui-phone) .files-row > .files-check { order: 0; flex: none; }
:where(.ui-phone) .files-row > .files-name { order: 1; flex: 0 1 auto; min-width: 0; max-width: 100%; }
:where(.ui-phone) .mod-page:has(.band-sel > :not([hidden])) .files-row > .files-name { max-width: calc(100% - 30px); }
:where(.ui-phone) .files-row > .files-size { order: 2; margin-left: auto; }
:where(.ui-phone) .files-row > .files-date { order: 3; flex: 1 0 100%; padding-left: 0; text-align: right; }
/* Files, narrow rows: the size at the end of the name's last line when there is room (else on the line under it). */
.fname-size { display: none; }
@container list (max-width: 640px) {
  .files-row > .files-size { display: none; }
  .files-row > .files-name { display: block; flex: 1 1 0; max-width: none; padding-left: 26px; text-indent: -26px; }
  .files-row > .files-name > .fi { display: inline-flex; vertical-align: -3px; margin: 0 8px 0 0; text-indent: 0; }
  .files-row .fname-text { display: inline; }
  .files-row .fname-size { display: block; float: right; margin-left: 12px; text-indent: 0; color: color-mix(in srgb, var(--text) 72%, var(--bg)); font-variant-numeric: tabular-nums; }
}
:where(.ui-phone) .files-row > .files-size { display: none; }
:where(.ui-phone) .files-row > .files-name { display: block; flex: 1 1 0; max-width: none; padding-left: 26px; text-indent: -26px; }
:where(.ui-phone) .files-row > .files-name > .fi { display: inline-flex; vertical-align: -3px; margin: 0 8px 0 0; text-indent: 0; }
:where(.ui-phone) .files-row .fname-text { display: inline; }
:where(.ui-phone) .files-row .fname-size { display: block; float: right; margin-left: 12px; text-indent: 0; color: color-mix(in srgb, var(--text) 72%, var(--bg)); font-variant-numeric: tabular-nums; font-size: var(--fs-ui); }
/* The chip strip: the same gap above and under the chips (the row's own 2 px at the bottom made it 12 under, 10 above). */
.mod-band .chip-row { padding-bottom: 0; }
/* No empty chip strip under the header (Files' bin has no chips). */
.mod-band > :is(.contacts-top-pick, .files-top-pick, .mail-top-pick, .fin-top-pick, .cal-top-pick):empty { display: none; }
/* ---------- Files: review round (Petr 2026-10-10) ---------- */
/* Loading: grey placeholder rows in the shape of the list. */
.files-skel { padding-top: 4px; }
.files-skel-row { display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 38px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.skel { display: block; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--text) 10%, transparent); animation: skel-pulse 1.1s ease-in-out infinite alternate; }
.skel-icon { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.skel-name { width: 38%; }
.files-skel-row:nth-child(3n + 2) .skel-name { width: 52%; }
.files-skel-row:nth-child(3n) .skel-name { width: 27%; }
.skel-date { width: 120px; margin-left: auto; }
@keyframes skel-pulse { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
/* Dropping files from the computer: the folder (or a folder row) outlined in the module's colour. */
.files-body { position: relative; }
.files-body.drop-files { outline: 2px dashed var(--accent); outline-offset: -6px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mod-page .drop-target { outline: 2px dashed var(--accent) !important; outline-offset: -2px; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
/* Tiles: the name in the list's size; "Složka" and the size in the list's grey. */
.files-tile .tile-name { font-size: var(--fs-ui); }
.files-tile .tile-meta { font-size: var(--fs-ui); color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
/* Phones (and tablets in the phone layout): tiles across the whole width. */
:where(.ui-phone) .files-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
/* The detail's preview like a tile's (no frame, the same rounding), not clickable: Otevřít soubor opens the file. */
.files-preview { border: 0; border-radius: 6px; }
.files-preview.has-preview { cursor: default; }
/* An unavailable storage: dimmed in the tree; a message (unavailableMessage) says why. */
/* The text and the square dimmed, also while the row is chosen (its highlight stays full). */
.mod-page .files-conns a.files-conn.unavailable > * { opacity: 0.55; }
/* The reason under an open message would say the same twice: it shows once the message is closed. */
body:has(dialog.unavailable-dialog[open]) .files-unavailable-note { visibility: hidden; }
/* Files on phones: Koš as the last item of the storage Almanach's first level (the computer has it in the tree). */
.files-trash-entry { display: none; cursor: pointer; }
:where(.ui-phone) .files-list > .files-trash-entry { display: flex; }
:where(.ui-phone) .files-grid > .files-trash-entry { display: flex; }
.files-trash-entry .fi-trash { display: inline-flex; color: var(--muted); }
/* The storage chip without its name (the name is the path's first chip). */
.chip.box.compact { gap: 4px; padding: 0 10px; }
/* Files: the same edges in the three parts - a highlighted row 12 px from the part's sides, its text 8 px further in
   (the tree, the list and the detail all start their text 20 px from their edge). */
.mod-page > .files-side { padding-left: 12px; padding-right: 12px; }
.mod-page .files-conns a.files-conn { padding: 4px 8px; }
.mod-page .files-tree a.tree-node { padding-right: 8px; }
/* Counted from the highlighted rows: the detail starts 12 px after its line, like a row ends 12 px before it. */
:where(html:not(.ui-phone)) .mod-page > .files-detail { padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }
/* Around the line between the tree and the list (it sits 3 px into the 7 px splitter): 12 px from the highlighted rows
   on both sides, like around the detail's line. */
:where(html:not(.ui-phone)) .mod-page > .files-side { padding-right: 9px; }
:where(html:not(.ui-phone)) .mod-page .files-body { padding-left: 9px; }
/* Files on a computer: one left and one right edge for everything - the top row, the header, the tree's and the list's
   highlighted rows and the detail sit 12 px from the window's sides. */
:where(html:not(.ui-phone)) .mod-page .mod-band { padding-left: 12px; padding-right: 12px; }
/* Phones: the module's header (with its chips) stays at the top while the list scrolls under it. */
:where(.ui-phone) .mod-page > .mod-band { position: sticky; top: 0; z-index: 10; }
/* Phones: like the open file's detail, the list is a screen of its own - the header does not move at all (no page
   scrolling or bouncing), only the list under it scrolls. */
:where(.ui-phone) .mod-page:not(.with-detail) { display: flex; flex-direction: column; height: 100vh; height: var(--app-h, 100dvh); overflow: hidden; }
:where(.ui-phone) .mod-page:not(.with-detail) > .mod-band { position: static; flex: none; }
:where(.ui-phone) .mod-page:not(.with-detail) > .files-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
:where(.ui-phone) .mod-page:not(.with-detail) .files-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
:where(.ui-phone) .mod-page:not(.with-detail) .files-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
:where(.ui-phone) .mod-page .files-detail-scroll { overscroll-behavior: contain; }
/* Files on phones: an open file keeps the same header as the list (module, search, the file's buttons, the path);
   Zavřít sits on its first row; the detail's own top and bottom bars go. */
.mod-band > button.icon-btn.band-close { display: none; }
:where(.ui-phone) .mod-page.with-detail > .mod-band { display: grid; position: static; flex: none; }
:where(.ui-phone) .mod-page.with-detail > .mod-band > button.icon-btn.band-close { display: inline-flex; grid-area: title; justify-self: end; align-self: center; height: 34px; }
/* E-maily: no Zavřít while writing (the message is sent, saved into Koncepty or dropped). */
:where(.ui-phone) .mail-page.composing > .mod-band > button.icon-btn.band-close { display: none; }
:where(.ui-phone) .mod-page.with-detail { display: flex; flex-direction: column; height: 100vh; height: var(--app-h, 100dvh); overflow: hidden; }
/* (keyboard.ts: --app-h is the height above the on-screen keyboard; --vv-top undoes a browser that pans the page.) */
:where(html.ui-phone[style*="--vv-top"]) .mod-page { translate: 0 var(--vv-top); }
:where(.ui-phone) .mod-page.with-detail > .files-main { display: none; }
:where(.ui-phone) .mod-page.with-detail > .files-detail { flex: 1; min-height: 0; height: auto; }
/* Phones: no chips over an open file (they lead around the list, which is not shown). */
:where(.ui-phone) .mod-page.with-detail > .mod-band > :is(.files-top-pick, .mail-top-pick, .contacts-top-pick) { display: none; }
/* Files detail: a property's name on the same line as its value (both in the same size, so no shift of the name). */
.files-detail .fields dt { padding-top: 0; }
/* The search field's clearing cross: the same 18 px icon (and grey) as the magnifier and the other icons. */
.mod-band input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0 0 0 6px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  cursor: pointer;
}
.mod-band input[type="search"]::-webkit-search-cancel-button:hover { background: var(--text); }
/* Phones: the module's name has its arrow again (it opens the module menu). */
.band-chev { display: none; }
:where(.ui-phone) .band-chev { display: inline-flex; margin-left: 2px; opacity: 0.85; }
/* An open sheet (module menu, storages, …): the page and its lists under it do not move. */
html.sheet-open, html.sheet-open body { overflow: hidden; overscroll-behavior: none; }
html.sheet-open .mod-page .files-body, html.sheet-open .mod-page .files-detail-scroll { overflow: hidden; }
.sheet-veil { touch-action: none; }
.sheet { overscroll-behavior: contain; }
/* A scrolling part of a modal layer does not pass its scrolling on to the page under it. */
dialog, .sheet, .popup-menu, .dd-list, .fv, dialog *, .fv * { overscroll-behavior: contain; }
/* ---------- Files: last round (Petr 2026-10-10) ---------- */
/* The bin's rows start where the list's rows do (computer). */
:where(html:not(.ui-phone)) .mod-page .files-trash { padding-left: 9px; padding-right: 12px; }
/* Phones: the text of the list, the search results, the bin and the detail 16 px from the screen's edge (rows run
   from edge to edge). */
:where(.ui-phone) .mod-page .files-body { padding-left: 0; padding-right: 0; }
:where(.ui-phone) .files-row, :where(.ui-phone) .files-row.with-where { padding-left: 16px; padding-right: 16px; }
:where(.ui-phone) .mod-page :is(.files-found, .files-trash) .trash-row { padding-left: 16px; padding-right: 16px; }
:where(.ui-phone) .mod-page .files-trash { padding-left: 0; padding-right: 0; }
:where(.ui-phone) .mod-page .files-grid { padding-left: 8px; padding-right: 8px; }
/* The transfers panel like the dialogs: their heading, Zavřít as a button with its word, the list's type size. */
.transfers-head { padding: 10px 10px 10px 16px; }
.transfers-head strong { font-size: 18px; font-weight: 600; }
.transfers-head button.icon-btn { width: auto; box-sizing: border-box; height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 9px; font-size: var(--fs-ui); }
.transfers-head button.icon-btn > .btn-label { display: inline; }
.transfers-list { padding: 8px 16px 12px; }
.transfer-label { font-size: var(--fs-ui); }
.transfer-state { font-size: var(--fs-ui); }
/* The file viewer: its top bar in the module's colour like the header, buttons with their words (34 px, 18 px icons). */
.fv { --band: color-mix(in srgb, var(--accent) 78%, #000); }
.fv-bar { min-height: 0; gap: 6px; padding: 10px 12px; background: var(--band); color: #fff; }
.fv-name { font-size: var(--fs-ui); line-height: 1.5; }
.fv-count { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-ui); }
.fv .fv-bar button.icon-btn { width: auto; box-sizing: border-box; height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: var(--fs-ui); }
.fv .fv-bar button.icon-btn > .btn-label { display: inline; }
.fv .fv-bar button.icon-btn:hover { background: rgba(255, 255, 255, 0.28); }
:where(.ui-phone) .fv-bar { padding: 10px 12px; }
.fv:focus { outline: none; }
/* Phones: the content's edge = the header's edge, 12 px (the header's buttons, search and chips start there). */
:where(.ui-phone) .files-row, :where(.ui-phone) .files-row.with-where { padding-left: 12px; padding-right: 12px; }
:where(.ui-phone) .mod-page :is(.files-found, .files-trash) .trash-row { padding-left: 12px; padding-right: 12px; }
:where(.ui-phone) .mod-page .files-grid { padding-left: 4px; padding-right: 4px; }
:where(.ui-phone) .mod-page .files-search-head { padding: 7px 12px; }
:where(.ui-phone) .files-detail > .files-detail-scroll { padding: 26px 12px 12px; }

/* File viewer on computers: a window over the dimmed page, not the whole screen (phones keep the whole screen). */
.fv-win { position: relative; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0e1014; --fv-h: 100dvh; }
.fv { display: block; }
.fv > .fv-win { height: 100%; }
:where(html:not(.ui-phone)) .fv { display: grid; grid-template-rows: none; justify-items: center; align-items: start; padding-top: var(--nav-h); background: rgba(10, 14, 20, 0.45); }
:where(html:not(.ui-phone)) .fv > .fv-win { --fv-h: calc(100dvh - var(--nav-h) - 48px); width: calc(100vw - 96px); height: var(--fv-h); box-sizing: border-box; border: 1px solid var(--border); border-top: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.fv img.fv-img, .fv video.fv-video { max-height: calc(var(--fv-h) - 88px); }
:where(html:not(.ui-phone)) .fv .fv-stage { padding: 24px 72px; }
:where(html:not(.ui-phone)) .fv img.fv-img, :where(html:not(.ui-phone)) .fv video.fv-video { max-height: calc(var(--fv-h) - 57px - 48px); }
/* The viewer's previous / next arrows look like the arrows of the scrolling button row (module style). */
.fv button.fv-nav { width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)), var(--band); }
.fv button.fv-nav:hover { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), var(--band); }
:where(.ui-phone) .fv button.fv-nav { margin-top: 0; }
/* The viewer's background is the page's (--bg, behind the file list), no colour of its own; texts follow the theme. */
.fv, .fv-win { background: var(--bg); color: var(--text); }
:where(html:not(.ui-phone)) .fv { background: rgba(10, 14, 20, 0.45); }
.fv-loading, .fv-note, .fv-msg-icon { color: var(--muted); }
.fv-msg { color: var(--text); }
.fv-text pre { background: var(--surface-2); color: var(--text); }
/* A long file name is cut with "…" and never pushes the buttons out of the bar (the column may not outgrow the window). */
.fv-win { grid-template-columns: minmax(0, 1fr); }
/* A long file name wraps onto at most two lines, then ends with "…". */
.fv-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 17px; }
/* The same height with one or two lines of the name (the bar does not jump between files). */
/* The viewer's bar like the coloured header: 10 px above and below its 34 px buttons = 54 px (Petr 2026-10-11); a
   name on two lines (2 × 17 px) fits the same height. */
.fv-bar { box-sizing: border-box; min-height: 54px; }
/* Files on computers: the search text in the button size (the larger type is only the module name). */
:where(html:not(.ui-phone)) .mod-page .mod-band input[type="search"] { font-size: var(--fs-ui); }
/* Files: the module name 20 px; the search text in the button size on phones too. */
.mod-page .band-module, :where(.ui-phone) .mod-page .band-module { font-size: 20px; font-weight: 400; }
:where(.ui-phone) .mod-page .mod-band input[type="search"] { font-size: var(--fs-ui); }
/* Files detail: the PDF page fills its preview box (no strip of the box above and below it). */
canvas.files-pdf-page { margin: 0 auto; }
/* Dialog and panel titles like the module name: 20 px, regular. */
dialog h2, dialog.leave-dialog h2, dialog.progress-dialog h2 { font-size: 20px; font-weight: 400; }
.transfers-head strong { font-size: 20px; font-weight: 400; }
/* Dialogs: everything but the title in the button size (13.5 px); the title stays 20 px. */
dialog { font-size: var(--fs-ui); }
dialog label, dialog label.inline, dialog .small, dialog :is(input, select, textarea):not(.code-input) { font-size: var(--fs-ui); }
/* The transfers panel: its notes (an error of a transfer) in the button size too. */
.transfers .small { font-size: var(--fs-ui); }
/* Dialog fields like the header's search field and the composer's fields (Petr 2026-10-11): 34 px, radius 9 px, text
   12 px from the edge, a 1 px line in the text colour while typing; the grey border stays. */
dialog :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"]), select, button.dd-btn):not(.code-input) { box-sizing: border-box; height: 34px; min-height: 0; padding-top: 0; padding-bottom: 0; border-radius: 9px; }
dialog textarea { border-radius: 9px; }
dialog :is(input, select, textarea):not(.code-input):focus, dialog button.dd-btn:focus-visible { outline: 1px solid var(--text); outline-offset: 1px; }
/* Dialog buttons: the same gap as between the module's buttons in the header (6 px). */
dialog .row.end { gap: 6px; }
/* Files on computers: the search as wide as the detail's content (the detail column less its 12 px sides and line). */
:where(html:not(.ui-phone)) .mod-page .mod-band.mod-band { grid-template-columns: minmax(0, 1fr) minmax(240px, var(--detail-search-w)); }
/* The storage's colour square in the tree without an edge. */
.files-side .swatch { border: 0; }
/* The focused search field: a thin white line, not the thick ring. */
.mod-page .mod-band input[type="search"]:focus { outline-width: 1px; }
/* Files path chips: the places before the current one look like the storage chip (its background and edge). */
:where(.ui-phone) :is(.files-top-pick, .mail-top-pick) .chip:not(.on, .box) { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); }
/* Drop-down menus (Řazení, Další…): items in the button size and height (34 px). */
.popup-menu > button { box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-ui); }
/* Phone sheets (module menu, storage choice): the title like a dialog title (20 px), everything else 13.5 px. */
.sheet-title { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); }
.sheet-row, .sheet-tile, .phone-menu > .sync-status { font-size: var(--fs-ui); }
/* Řazení on phones (a sheet): the tick of the chosen column and direction in the module colour. */
.sheet-tick { width: 18px; height: 18px; flex: none; display: inline-flex; color: var(--accent); }
/* Files: the storage's colour square in the storage sheet as big as in the chips (18 px). */
:root:is([data-module="files"], [data-module="mail"], [data-module="contacts"]) .sheet-row .chip-sq { width: 18px; height: 18px; border-radius: 5px; }
/* Phones: the app is as tall as the visible screen (100vh is the screen without the browser's address bar, so the
   page could move up by the bar's height when dragged on the header). Files never scroll the page itself. */
:where(.ui-phone) .shell { min-height: 100dvh; }
html.ui-phone:is([data-module="files"], [data-module="mail"], [data-module="contacts"]), html.ui-phone:is([data-module="files"], [data-module="mail"], [data-module="contacts"]) body { overflow: hidden; overscroll-behavior: none; }
/* Files detail: a picture or PDF preview fills the detail's width and takes the height that goes with it (no grey
   around it). */
.files-preview.has-preview { min-height: 0; place-items: stretch; }
.files-preview.has-preview > :is(img.fi-thumb, canvas.files-pdf-page) { width: 100% !important; height: auto; max-width: none; max-height: none; }
/* Viewer: 12 px above and below the shown file (like the edges elsewhere); phones 12 px at the sides too. */
.fv .fv-stage, :where(.ui-phone) .fv .fv-stage { padding-top: 12px; padding-bottom: 12px; }
:where(.ui-phone) .fv .fv-stage { padding-left: 12px; padding-right: 12px; }
.fv .fv-pdf { padding: 0; }
.fv img.fv-img, .fv video.fv-video, :where(html:not(.ui-phone)) .fv img.fv-img, :where(html:not(.ui-phone)) .fv video.fv-video { max-height: calc(var(--fv-h) - 57px - 24px); }
/* Viewer zoom: − / % / + in the bar (computers; phones use two fingers and a double tap). */
.fv-zoom { display: inline-flex; align-items: center; gap: 6px; }
.fv-zoom[hidden], :where(.ui-phone) .fv .fv-zoom { display: none; }
.fv .fv-bar button.icon-btn.fv-zoom-btn { width: 34px; padding: 0; justify-content: center; }
.fv .fv-bar button.icon-btn.fv-zoom-btn > .btn-label { display: none; }
.fv .fv-bar button.fv-zoom-fit { box-sizing: border-box; height: 34px; min-width: 64px; padding: 0 10px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.fv .fv-bar button.fv-zoom-fit:hover { background: rgba(255, 255, 255, 0.28); }
.fv .fv-bar button:disabled { opacity: 0.45; cursor: default; }
/* The stage of a zoomable file: fingers pan it (the viewer handles two-finger zoom), a zoomed file can be scrolled
   to every edge (auto margins centre it while it fits). */
.fv-stage { touch-action: pan-x pan-y; }
.fv-stage.fv-zoomable { justify-items: start; align-items: start; }
.fv-stage.fv-zoomable > * { margin: auto; }
.fv-stage.fv-zoomable > .fv-pdf { margin: 0 auto; }
.fv img.fv-img.fv-zoomed { max-width: none !important; max-height: none !important; }
.fv-stage.zoomed { cursor: grab; }
.fv-stage.dragging { cursor: grabbing; user-select: none; }
/* Tiles: the big icons (44 px) with exactly the line of the 18 px icons elsewhere (1.5 px: 2 units of 24 at 18 px). */
.tile-preview .fi svg { stroke-width: calc(2 * 18 / 40); }
/* Word and Excel in the viewer: a sandboxed frame filling the stage (it has its own 12 px edges). */
.fv .fv-stage.fv-framed { position: relative; display: block; padding: 0; overflow: hidden; }
.fv-office { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.fv-frame-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: var(--bg); }
/* Viewer: the big file icon (64 px, a file it cannot show, the audio player) with exactly the 1.5 px line of the
   18 px icons, like the tiles. */
.fv-msg-icon svg { stroke-width: calc(2 * 18 / 40); }
/* Files with no storage yet: the big server icon with the 1.5 px line of the small icons too. */
.files-empty .fi svg { stroke-width: calc(2 * 18 / 40); }
/* App links have no href (no address shown in the browser's corner): they still look and act like links. */
a[data-href] { cursor: pointer; }

/* ---------- E-maily in the Files design (2026-10-11): the shared .mod-page rules plus what only mail has ---------- */
:where(html:not(.ui-phone)) .mail-top-pick { display: none; }
/* Phones: no column captions (two lines per message). */
:where(.ui-phone) .mail-page .mail-head { display: none; }
/* The tree: system folders, then Složky; a folder the server cannot open is grey; the unread count like the row's text. */
a.tree-node.noselect { color: var(--muted); }
.mail-tree .count.mail-unseen { margin-left: auto; padding-left: 8px; font-size: inherit; font-weight: 400; color: inherit; opacity: 1; }
/* Kontakty: the count of a group like its name, at the right end of the row (like the unread count in E-maily). */
.contacts-groups-list a.contacts-group > .count { margin-left: auto; padding-left: 8px; font-size: inherit; font-weight: 400; color: inherit; opacity: 1; }
.contacts-groups-list a.contacts-group .fi-trash { display: inline-flex; color: var(--muted); }
.contacts-groups-list a.contacts-group.active .fi-trash { color: inherit; }
/* The message list: rows on a grid like the Files list (13.5 px, 7 px 8 px), the captions in the list's type. */
.mail-body { --mail-date-w: 156px; --mail-size-w: 76px; }
.mail-list { display: flex; flex-direction: column; }
/* Columns: the sender, the subject, the date, the size (with the paperclip of a message with attachments right before
   it). */
.mail-row, .mail-head { display: grid; grid-template-columns: 22px minmax(120px, 0.32fr) minmax(0, 1fr) var(--mail-date-w) var(--mail-size-w); grid-template-areas: "check from subject date size"; align-items: center; gap: 8px; padding: 7px 8px; font-size: var(--fs-ui); }
:is(.mail-row, .mail-head) > :is(.mail-check, .mail-check-space) { grid-area: check; }
:is(.mail-row, .mail-head) > .mail-from { grid-area: from; }
:is(.mail-row, .mail-head) > .mail-subject { grid-area: subject; }
:is(.mail-row, .mail-head) > .mail-date { grid-area: date; }
:is(.mail-row, .mail-head) > .mail-size { grid-area: size; }
/* A sub-folder: its icon and name over the sender and subject columns. */
.mail-row.mail-subfolder { grid-template-areas: "check from from date size"; }
.mail-subfolder > .mail-from { display: flex; align-items: center; gap: 8px; }
.mail-folder-ic { display: inline-flex; flex: none; color: var(--mod); }
.mail-head { position: sticky; top: 0; z-index: 1; box-sizing: border-box; min-height: var(--row-h, 37.5px); background: var(--bg); box-shadow: inset 0 -1px 0 var(--border); color: var(--muted); }
.mail-head-sub { display: none; }
.mail-row { border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); cursor: default; outline: none; }
.mail-row:hover { background: var(--surface-2); }
.mail-row.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* The message open in the detail: a light tint and a bar; checked rows keep the stronger tint. */
.mail-row.focused { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.mail-row.focused.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mail-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Read and unread at a glance: unread messages in the module's colour; read ones with the sender (recipient) and the
   subject in the text colour like a file's name in Soubory, the date and size in the list's grey. */
.mail-row :is(.mail-from, .mail-subject) { color: var(--text); }
.mail-row :is(.mail-date, .mail-size) { color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
.mail-row.unread :is(.mail-from, .mail-subject, .mail-date, .mail-size) { color: var(--accent); }
.mail-check { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.mail-from, .mail-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-clip { display: inline-flex; color: var(--muted); }
/* An important message: the red ! before its subject (list and open message), 6 px before the text. */
.mail-important { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--danger); }
.mail-detail-subject .mail-important { vertical-align: -0.5px; }
.mail-important > svg { flex: none; }
.mail-row > .mail-size { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.mail-date, .mail-size { white-space: nowrap; text-align: right; }
.mail-size { font-variant-numeric: tabular-nums; }
.mail-head .mail-date, .mail-head .mail-size { justify-self: end; }
/* Date headings (Dnes, Včera, …) in the list's type and grey. */
.mail-group { padding: 14px 8px 4px; font-size: var(--fs-ui); color: var(--muted); border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
/* A narrow list (beside the open message): the sender and the size on the first line, the subject and the date under
   it (like the narrow rows of Soubory: the size first, the date under it). */
@container list (max-width: 640px) {
  .mail-head, .mail-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check from size" "check subject date"; }
  .mail-head { grid-template-areas: "check from size"; }
  .mail-head > :is(.mail-subject, .mail-date) { display: none; }
  .mail-head .mail-head-sub { display: inline; }
  .mail-row { row-gap: 2px; }
  .mail-row.mail-subfolder { grid-template-areas: "check from size"; }
  .mail-subfolder > .mail-date { display: none; }
}
/* Phones: two lines per message like the narrow list and Soubory (the sender and the size, the subject and the date
   under them), 12 px from the edges; the checkbox only while checking. */
:where(.ui-phone) .mail-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from size" "subject date"; gap: 2px 10px; padding: 10px 12px; min-height: 58px; box-sizing: border-box; }
:where(.ui-phone) .mail-row > .mail-check { align-self: start; margin-top: 2px; }
:where(.ui-phone) .mail-page:has(.band-sel > :not([hidden])) .mail-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check from size" "check subject date"; }
/* Phones: a sub-folder takes one line (its name and "Složka"). */
:where(.ui-phone) .mail-page .mail-list > .mail-row.mail-subfolder { grid-template-areas: "from size"; }
:where(.ui-phone) .mail-page:has(.band-sel > :not([hidden])) .mail-list > .mail-row.mail-subfolder { grid-template-areas: "check from size"; }
:where(.ui-phone) .mail-subfolder > :is(.mail-check-space, .mail-date) { display: none; }
:where(.ui-phone) .mail-group { padding-left: 12px; padding-right: 12px; }
/* The folder pages (the mailbox's first level, Složky) are Files rows without a checkbox. */
@container list (max-width: 640px) { .files-row > .files-check-space { display: none; } }
:where(.ui-phone) .files-row > .files-check-space { display: none; }
/* The open message: the subject like a file's name (20 px), the headers, the attachments as buttons in the module's
   colour (like the buttons of the Files bin), then the text with no frame around it. */
.mail-detail h1.mail-detail-subject::first-letter { text-transform: none; }
.mail-headers { margin-bottom: 16px; }
/* "Obrázky z internetu jsou skryté." counts as one more property (Petr 2026-10-11): 10 px under them, 16 px above what
   follows. */
.files-detail .mail-headers:has(+ .mail-images-note) { margin-bottom: 10px; }
.mail-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mail-attachment { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; box-sizing: border-box; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--band) 84%, #fff); color: #fff; font-size: var(--fs-ui); }
button.mail-attachment:hover { background: color-mix(in srgb, var(--band) 72%, #fff); color: #fff; }
/* A long name ends with "…"; the icon keeps its 18 px. */
.mail-attachment > svg { flex: none; }
.mail-att-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-att-size { flex: none; opacity: 0.8; font-variant-numeric: tabular-nums; }
/* "Obrázky z internetu jsou skryté." right under the headers, at the gap of their rows. */
.mail-images-note { margin: 0 0 16px; font-size: var(--fs-ui); color: var(--muted); }
/* The read receipt right under the subject: its sentence and, while asked, Poslat potvrzení o přečtení. */
.mail-receipt { margin-bottom: 12px; }
.mail-receipt-note { margin: 0; font-size: var(--fs-ui); color: var(--muted); }
.mail-receipt > .mail-attachments { margin: 12px 0 0; }
iframe.mail-frame { display: block; width: 100%; min-height: 120px; border: 0; border-radius: 6px; background: transparent; color-scheme: normal; }
/* The composer: its title like the message's subject; its buttons are in the header. On phones it scrolls under the
   header like the message. */
.compose-head h1 { font-weight: 400; line-height: 1.2; }
:where(.ui-phone) .mail-page.composing > .files-detail { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 26px 12px 12px; }
/* Search results: the unread ones in the module's colour, like in the list. */
.mail-found-row.unread .files-trash-name { color: var(--accent); }
/* The composer's fields in the size of the buttons (13.5 px, 34 px tall) like the fields of the dialogs; the subject not
   bold. */
.compose :is(.addr-field, .addr-caption, .addr-chip, input, select, .dd-btn) { font-size: var(--fs-ui); }
.compose .addr-caption { padding-top: 7px; }
.compose :is(input.compose-subject, .dd-btn) { box-sizing: border-box; height: 34px; min-height: 0; }
input.compose-subject { font-weight: 400; }
.compose .addr-box { box-sizing: border-box; min-height: 34px; }
.compose input.addr-input { padding-top: 0; padding-bottom: 0; }
/* A field that is not being typed into: no empty line for the typing place after the chips (leaving it adds what was
   typed, so it is empty); a click into the field brings it back. */
.compose .addr-box:not(:focus-within) > input.addr-input { flex: 0 0 0; width: 0; min-width: 0; height: 0; padding: 0; }
/* Chips 26 px, so a row of them keeps the field at exactly 34 px. */
.compose .addr-chip { line-height: 20px; }
/* Switches under the subject (Důležitá zpráva, Potvrzení o přečtení): a row as tall as a field, aligned with the fields. */
.compose .compose-switches { align-items: center; flex-wrap: wrap; gap: 10px 20px; min-height: 34px; }
label.switch-row { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 34px; font-size: var(--fs-ui); color: var(--text); cursor: pointer; user-select: none; }
/* The switch itself: 34 × 20 px track, white knob; on = the module colour. */
input.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; box-sizing: border-box; width: 34px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: var(--border); cursor: pointer; transition: background 0.15s; }
input.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
input.switch:checked { background: var(--accent); }
input.switch:checked::before { transform: translateX(14px); }
input.switch:focus { outline: none; }
input.switch:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
/* Like the header's search field: radius 9 px, text 12 px from the edge, a 1 px line in the text colour while typing
   (white on dark; the grey border stays because the fields sit on the page, not on the band). */
.compose :is(.addr-box, input.compose-subject, .dd-btn) { border-radius: 9px; }
.compose .addr-box { padding-left: 7px; }
.compose :is(.addr-box:focus-within, input.compose-subject:focus, .dd-btn:focus-visible) { outline: 1px solid var(--text); outline-offset: 1px; }
/* E-maily: the open folder's sub-folders at the top of its list (phones reach them only this way): the folder icon in
   the module's colour, the name over the sender and subject columns, "Složka" on the right (unread counts only in the tree). */
.mail-row.mail-subfolder { cursor: pointer; align-items: start; }
.mail-subfolder > .mail-from { color: var(--text); }
/* ---------- Soubory: long names in the list (Petr 2026-10-11) ---------- */
/* Computer: in the wide list a name stays on one line and ends with "…"; in the narrow list beside the detail (two
   lines per row) it wraps onto at most two lines like on phones, the size and the date on the right. */
:where(html:not(.ui-phone)) .files-list > .files-row { align-items: center; }
:where(html:not(.ui-phone)) .files-list > .files-row .files-name { align-items: center; }
:where(html:not(.ui-phone)) .files-list > .files-row :is(.files-name > .fi, .files-check) { margin-top: 0; }
:where(html:not(.ui-phone)) .files-list > .files-row .fname-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@container list (max-width: 640px) {
  :where(html:not(.ui-phone)) .files-list > .files-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check name size" "check name date"; column-gap: 8px; row-gap: 2px; align-items: start; }
  :where(html:not(.ui-phone)) .files-list > .files-row > :is(.files-check, .files-check-space) { grid-area: check; margin-top: 2px; }
  :where(html:not(.ui-phone)) .files-list > .files-row > .files-name { grid-area: name; display: flex; align-items: flex-start; max-width: none; padding-left: 0; text-indent: 0; }
  :where(html:not(.ui-phone)) .files-list > .files-row > .files-name > .fi { margin: 1px 0 0; vertical-align: baseline; }
  :where(html:not(.ui-phone)) .files-list > .files-row .fname-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
  :where(html:not(.ui-phone)) .files-list > .files-row .fname-size { display: none; }
  :where(html:not(.ui-phone)) .files-list > .files-row > .files-size { grid-area: size; display: block; margin-left: 0; }
  :where(html:not(.ui-phone)) .files-list > .files-row > .files-date { grid-area: date; justify-self: end; text-align: right; }
}
/* Phones: the name wraps onto at most two lines in its own column (then "…"); on the right the size on the first line
   and the date on the second. */
:where(.ui-phone) .files-list > .files-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name size" "name date"; gap: 2px 10px; align-items: start; }
:where(.ui-phone) .files-list > .files-row > .files-name { grid-area: name; display: flex; align-items: flex-start; gap: 8px; max-width: none; padding-left: 0; text-indent: 0; }
:where(.ui-phone) .files-list > .files-row > .files-name > .fi { margin: 1px 0 0; vertical-align: baseline; }
:where(.ui-phone) .files-list > .files-row .fname-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
:where(.ui-phone) .files-list > .files-row .fname-size { display: none; }
:where(.ui-phone) .files-list > .files-row > .files-size { grid-area: size; display: block; margin-left: 0; }
:where(.ui-phone) .files-list > .files-row > .files-date { grid-area: date; justify-self: end; text-align: right; flex: none; padding-left: 0; }
:where(.ui-phone) .files-list > .files-row > .files-check { grid-area: check; }
:where(.ui-phone) .mod-page:has(.band-sel > :not([hidden])) .files-list > .files-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check name size" "check name date"; }
:where(.ui-phone) .mod-page:has(.band-sel > :not([hidden])) .files-list > .files-row > .files-name { max-width: none; }
/* Phones: holding a row checks it - the browser must not lift it for dragging, select its text or show its menu. */
:where(.ui-phone) :is(.files-row, .files-tile, .mail-row, .trash-row, .contact-row, .contact-card) { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* E-maily "S ukázkou": the row of "Seznam" with the beginning of the text under it in the list's grey (its line is kept
   while it loads, so the rows do not jump). A wide list keeps sender, subject, date and size on one line; a narrow one
   wraps them into two lines like "Seznam" does (Petr 2026-10-11). */
.mail-list.with-preview > .mail-row { grid-template-areas: "check from subject date size" "check preview preview preview preview"; row-gap: 2px; }
.mail-list.with-preview > .mail-row.mail-subfolder { grid-template-areas: "check from from date size"; }
@container list (max-width: 640px) {
  .mail-list.with-preview > .mail-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check from size" "check subject date" "check preview preview"; }
  .mail-list.with-preview > .mail-row.mail-subfolder { grid-template-areas: "check from size"; }
  .mail-list.with-preview > .mail-row.mail-subfolder > .mail-date { display: none; }
}
.mail-row > .mail-preview { grid-area: preview; min-width: 0; min-height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
:where(.ui-phone) .mail-page .mail-list.with-preview > .mail-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from size" "subject date" "preview preview"; }
:where(.ui-phone) .mail-page .mail-list.with-preview > .mail-row.mail-subfolder { grid-template-areas: "from size"; }
:where(.ui-phone) .mail-page:has(.band-sel > :not([hidden])) .mail-list.with-preview > .mail-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check from size" "check subject date" "check preview preview"; }
:where(.ui-phone) .mail-page:has(.band-sel > :not([hidden])) .mail-list.with-preview > .mail-row.mail-subfolder { grid-template-areas: "check from size"; }
.mail-list.with-preview > .mail-row > .mail-check { align-self: start; margin-top: 2px; }
/* The column captions stay at the top of the list while it scrolls, under the list's 14.4 px top padding: that strip
   above them is covered too, so no row shows through above the captions (Petr 2026-10-12). */
:is(.files-head, .mail-head, .contact-head)::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: var(--bg); pointer-events: none; }