: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);
  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-columns: 64px minmax(0, 1fr); min-height: 100vh; }
.brand { font-weight: 700; font-size: 18px; }
/* Icon rail (main menu) */
.rail { position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-logo { display: block; width: 40px; height: 40px; margin-bottom: 10px; cursor: default; user-select: none; }
.rail-item { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: none; border: 0; padding: 0; text-decoration: none; }
.rail-item:hover { background: var(--surface-2); color: var(--text); }
.rail-item.active { background: var(--accent); color: var(--accent-text); }
.rail .spacer { flex: 1; }
.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: 100vh; }
.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; }

@media (max-width: 760px) {
  /* Phones: the rail becomes a top bar, the second level a row of tabs. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--border); gap: 4px; }
  .rail-logo { margin: 0 8px 0 0; width: 34px; height: 34px; }
  .main { padding: 16px; }
  .section-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .subnav { border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 10px; }
  .subnav .pane-title { display: none; }
  .subnav .group-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .subnav .group-list a { flex: none; }
  .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 */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth .card { width: 100%; max-width: 420px; }
.auth .brand { padding: 0; margin-bottom: 4px; font-size: 22px; }
.qr { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 8px; }
.qr svg { width: 200px; height: 200px; }
.secret { font-family: ui-monospace, Consolas, monospace; word-break: break-all; font-size: 13px; }
.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: 100vh; }
.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); }
/* Contact list: one line per contact */
.contact-table-wrap { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 16px; }
/* Column captions stay in place while the rows scroll. */
.contact-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); box-shadow: inset 0 -1px 0 var(--border); }
.contact-table { table-layout: fixed; min-width: 760px; }
.contact-table th, .contact-table td { padding: 7px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-table .col-name { width: 26%; }
.contact-table .col-phone { width: 15%; }
.contact-table .col-email { width: 19%; }
.contact-table td a { color: var(--text); text-decoration: none; }
.contact-table td a:hover { color: var(--accent); text-decoration: underline; }
.contact-table tbody tr { cursor: pointer; }
.contact-table tbody tr:hover { background: var(--surface-2); }
.contact-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.contact-table tbody tr.active { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; }
.name-cell span { overflow: hidden; text-overflow: ellipsis; }
/* The list reacts to its own width (detail open or not, any monitor): phones and e-mails side by
   side while there is room, stacked (e-mail under phone) when the list gets narrow. */
.list-pane { container: list / inline-size; }
@media (min-width: 901px) {
  @container list (max-width: 900px) {
    .contact-table, .contact-table thead, .contact-table tbody { display: block; min-width: 0; }
    .contact-table thead { position: sticky; top: 0; z-index: 1; background: var(--bg); box-shadow: inset 0 -1px 0 var(--border); }
    .contact-table thead th { position: static; box-shadow: none; }
    .contact-table tr {
      display: grid;
      grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "check name phone-home phone-work" "check name email-home email-work";
      /* Fixed line heights: every row is equally tall whether the values are filled in or not. */
      grid-template-rows: 26px 26px;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid var(--border);
    }
    .contact-table tr > * { width: auto; border: 0; padding: 2px 8px; }
    .contact-table tr > .col-check { grid-area: check; }
    .contact-table tr > .col-name { grid-area: name; }
    .contact-table tr > .phone-home { grid-area: phone-home; }
    .contact-table tr > .phone-work { grid-area: phone-work; }
    .contact-table tr > .email-home { grid-area: email-home; }
    .contact-table tr > .email-work { grid-area: email-work; }
    .contact-table tr > .col-name { width: auto; }
    .contact-table tr > .col-phone, .contact-table tr > .col-email { width: auto; }
    .contact-table tbody tr > .col-email { font-size: 14px; }
  }
}
.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; }
.avatar.xs { width: 28px; height: 28px; font-size: 11px; }
.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: none; margin-bottom: 10px; }
.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 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 { display: block; }
}
@media (max-width: 900px) {
  .contacts-layout, .contacts-layout.with-detail { grid-template-columns: minmax(0, 1fr); }
  .groups-pane { display: none; }
}
@media (max-width: 760px) {
  .contacts-layout { height: auto; }
  .detail-pane { padding: 12px 16px; }
  .item-row { grid-template-columns: 1fr auto; }
  .item-row .dd { grid-column: 1 / -1; }
  .address-grid { grid-template-columns: 1fr; }
}
/* Contacts: the module menu like in Notes, Files, E-mail and Calendar. The left column (the groups) runs down the whole
   height and is as wide as dragged; the top bar (search | buttons) spans the list and the detail, which is always shown. */
.contacts-layout.contacts-page { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.contacts-layout.contacts-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr) minmax(380px, 460px); }
.contacts-page > .contacts-side { grid-column: 1; grid-row: 1 / -1; border-right: 0; padding-right: 4px; display: flex; flex-direction: column; gap: 10px; }
.contacts-page > .contacts-splitter { grid-column: 2; grid-row: 1 / -1; background: var(--surface); }
.contacts-page > .contacts-topbar { grid-column: 3 / -1; grid-row: 1; }
.contacts-page > .contacts-main { grid-column: 3; grid-row: 2; }
.contacts-page > .contacts-detail { grid-column: 4; grid-row: 2; }
/* The column keeps 10 px between its parts: the line above the trash as far from the groups as in Notes. */
.contacts-side > .notes-trash-link { margin-top: 2px; }
/* Every count looks like the group name next to it (like the count at the trash in Notes and the unread count in E-mail). */
.contacts-side .group-list a.cal-row .count { font-size: inherit; color: inherit; opacity: 1; font-variant-numeric: normal; }
.contacts-top-pick { display: none; }
@media (max-width: 1100px) {
  .contacts-layout.contacts-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); }
  .contacts-page > .contacts-detail { grid-column: 3; }
}
@media (max-width: 900px) {
  .contacts-layout.contacts-page, .contacts-layout.contacts-page.with-detail { grid-template-columns: minmax(0, 1fr); }
  .contacts-page > .contacts-side, .contacts-page > .contacts-splitter { display: none; }
  .contacts-page > .contacts-topbar, .contacts-page > .contacts-main, .contacts-page > .contacts-detail { grid-column: 1; }
  /* Phones: search on the first row, the group below it, then the buttons. */
  .contacts-top-pick { grid-column: 1 / -1; display: flex; }
  .contacts-top-pick .dd.group-filter { display: flex; flex: 1 1 100%; }
  .contacts-topbar .notes-top-right { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* Narrow screens: every contact is a card – name on top, filled-in values below with captions. */
  .contact-table-wrap { padding: 0 12px 16px; }
  .contact-table, .contact-table tbody { display: block; min-width: 0; }
  .contact-table thead { display: none; }
  .contact-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .contact-table tbody tr.active { box-shadow: inset 3px 0 0 var(--accent); }
  .contact-table tbody td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  /* Beat the column widths of the table layout. */
  .contact-table tbody td.col-name,
  .contact-table tbody td.col-phone,
  .contact-table tbody td.col-email { width: auto; }
  .contact-table td.col-check { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .contact-table td.col-name { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
  .contact-table td.col-phone, .contact-table td.col-email { grid-column: 1 / -1; display: flex; gap: 8px; font-size: 14px; }
  .contact-table td[data-label]::before { content: attr(data-label); flex: none; width: 110px; color: var(--muted); font-size: 13px; }
  .contact-table td:empty { display: none; }
  .contact-table .name-cell span { white-space: normal; }
}
.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; }
.trash-hint { margin: 10px 8px 0; }

/* ---- 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; }
@media (max-width: 760px) {
  .cal-wd-long { display: none; }
  .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); }

@media (max-width: 760px) {
  /* Month on a phone: dots instead of texts. */
  .cal-weeks { grid-auto-rows: minmax(64px, 1fr); }
  .cal-week { min-height: 64px; }
  .cal-item .cal-item-time, .cal-item .cal-item-title { display: none; }
  button.cal-item { height: 6px; padding: 0; border-left: 0; background: var(--cal-color); }
  button.cal-bar, .cal-week button.cal-bar, .cal-wk-allday button.cal-bar { height: 6px; min-height: 0; font-size: 0; padding: 0; }
  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; }

/* 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; }
.files-conns a.files-conn .storage-warn { 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; }
.files-search-head { margin: 4px 8px 8px; font-size: 14px; 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; }

.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); 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; }
.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; }
}
.files-conns a.files-conn.active .storage-warn { color: inherit; }

/* 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.files-page { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.contacts-layout.files-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr) minmax(380px, 460px); }
.files-page > .files-side { grid-column: 1; grid-row: 1 / -1; border-right: 0; padding-right: 4px; }
.files-page > .files-side-splitter { grid-column: 2; grid-row: 1 / -1; background: var(--surface); }
.files-page > .files-topbar { grid-column: 3 / -1; grid-row: 1; }
.files-page > .files-main { grid-column: 3; grid-row: 2; }
.files-page > .files-detail { grid-column: 4; grid-row: 2; }
.files-topbar[hidden] { display: none; }
/* A narrow list: the date above the size on the right (like the mail list), the name beside both. */
@container list (max-width: 640px) {
  .files-row, .files-row.with-where { grid-template-columns: 22px minmax(0, 1fr) var(--files-date-w); grid-template-areas: "check name date" "check name size"; row-gap: 2px; }
  .files-head, .files-head.with-where { grid-template-columns: 22px minmax(0, 1fr) var(--files-date-w); }
  .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-size { display: none; }
  .files-head .files-head-sub { display: inline; }
}
/* The bar for the checked items at the bottom of the list, with a line above it (as in E-mail). */
.files-page .files-selbar-host .files-selbar { margin: 0; border-width: 1px 0 0; border-radius: 0; padding: 8px 20px; }
@media (max-width: 760px) {
  .files-page .files-selbar-host .files-selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 12px; }
  .files-page:has(.files-selbar-host .files-selbar) .files-body { padding-bottom: 64px; }
}
/* The folder fills the area (files dropped anywhere on it are uploaded). */
.files-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. */
.files-page .files-conns a.files-conn { justify-content: flex-start; gap: 2px; padding: 4px; border-radius: 6px; font-size: 15px; }
.files-page .files-conns a.files-conn .storage-warn { margin-left: auto; }
.files-page .files-conns a.files-conn button.tree-toggle { color: var(--muted); }
.files-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; }
/* The page heading above the folder (like a page in Notes): the folder icon and name, or the connection's colour and name. */
.files-page-head .files-page-title { margin: 14px 20px 10px; overflow-wrap: anywhere; }
.files-page-icon { color: var(--conn-color, var(--muted)); }
.files-page-icon svg { stroke-width: 1.75; }
/* "Koš" of the storage Almanac: 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-note { margin: 0 0 8px; }
.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.files-page.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); }
  .files-page > .files-detail { grid-column: 3; }
}
@media (max-width: 900px) {
  .contacts-layout.files-page, .contacts-layout.files-page.with-detail { grid-template-columns: minmax(0, 1fr); }
  .files-page > .files-side-splitter { display: none; }
  .files-page > .files-topbar, .files-page > .files-main, .files-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-top-pick .dd.files-conn-select { display: flex; flex: 1 1 100%; }
  .files-topbar .notes-top-center, .files-topbar .notes-top-right { grid-column: 1 / -1; }
  .files-page-head .files-page-title { margin: 10px 12px 8px; font-size: 26px; }
}

/* Rail badge (unread mail) */
.rail-item { position: relative; }
.rail-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; pointer-events: none; }

/* E-mail */
.mail-tree .tree-toggle-space { flex: none; width: 20px; }
/* Folder icons as big as the Notes tree icons (15 px, normal stroke). */
.mail-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 mailbox. */
.mail-tree .mail-folder-icon { color: var(--acc-color, var(--muted)); }
a.tree-node.active .mail-folder-icon { color: inherit; }
a.tree-node.noselect { color: var(--muted); }
/* Unread count looks like the count at the Notes trash: the row's own text. */
.mail-tree .count.mail-unseen { margin-left: auto; padding-left: 6px; font-size: inherit; font-weight: 400; color: inherit; opacity: 1; }
.mail-folder-select { display: none; }
.mail-topbar .crumbs span.crumb:not(.current) { padding: 4px 6px; }
/* Dates with day and time ("st 30. 12. 2026 14:32", as big as the subject) get a fixed column, so the columns line up with the captions. */
.mail-body { --mail-date-w: 156px; --mail-size-w: 76px; }
.mail-list { display: flex; flex-direction: column; }
/* The page heading above the list (like a page in Notes): the folder icon and name. */
.mail-page-head .mail-page-title { margin: 14px 20px 10px; overflow-wrap: anywhere; }
/* The heading icon carries the colour of the open mailbox, like the folder icons in the tree. */
.mail-page-icon { color: var(--mail-acc, var(--muted)); }
.mail-page-icon svg { stroke-width: 1.75; }
/* Date headings in the list (Dnes, Včera, …), like the captions of the left column. */
.mail-group { padding: 14px 8px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.mail-row { display: grid; grid-template-columns: 22px 18px minmax(120px, 0.32fr) minmax(0, 1fr) var(--mail-date-w) var(--mail-size-w); align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); cursor: default; outline: none; }
.mail-row:hover { background: var(--surface-2); }
/* Column captions above the list (same columns as .mail-row), styled like the module title and the date headings. */
.mail-head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 22px 18px minmax(120px, 0.32fr) minmax(0, 1fr) var(--mail-date-w) var(--mail-size-w); align-items: center; gap: 8px; 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); }
.mail-head .mail-clip { justify-content: center; }
.mail-head-sub { display: none; }
/* Captions sort the list with the same look and arrows as the Files list (button.th-sort). */
.mail-head button.th-sort { padding: 0; }
.mail-row.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* The open message: a light tint and a bar; checked rows (the checkbox) 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 mailbox's colour, read ones quieter;
   the date and the size look like the subject. */
.mail-row .mail-from, .mail-row .mail-subject, .mail-row .mail-date, .mail-row .mail-size { color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
.mail-row.unread .mail-from, .mail-row.unread .mail-subject, .mail-row.unread .mail-date, .mail-row.unread .mail-size { color: var(--mail-acc, 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-folder-badge { margin-left: 8px; font-weight: 400; }
.mail-clip { display: inline-flex; color: var(--muted); }
.mail-date { color: var(--muted); white-space: nowrap; text-align: right; }
.mail-size { color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.mail-detail { display: none; }
.with-detail .mail-detail { display: flex; flex-direction: column; }
/* The buttons of an open message as close together as in the bar for checked messages. */
.mail-detail .detail-actions { gap: 6px 8px; }
h1.mail-detail-subject { font-size: 20px; overflow-wrap: anywhere; margin-bottom: 10px; }
.mail-headers { margin-bottom: 12px; }
.mail-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
a.mail-attachment { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; background: var(--surface); }
a.mail-attachment:hover { background: var(--surface-2); }
.mail-att-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-images-note { margin: -4px 0 10px; }
iframe.mail-frame { width: 100%; min-height: 120px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color-scheme: normal; flex: 1 0 auto; }
/* An open message: the header (subject, people, buttons, attachments) stays, only the text scrolls - with
   one scrollbar at the pane's edge (the text area reaches the pane's edges), and it fills the pane's height. */
.mail-layout:not(.composing) .mail-detail { overflow: hidden; }
.mail-layout:not(.composing) .mail-detail > * { flex-shrink: 0; }
.mail-detail > .mail-text-scroll { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; margin: 0 -28px -24px; padding: 0 28px 24px; }
@media (max-width: 760px) {
  /* Phones scroll the whole page. */
  .mail-layout:not(.composing) .mail-detail { overflow: visible; }
  .mail-detail > .mail-text-scroll { flex: none; overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 900px) {
  .mail-head { grid-template-columns: 22px 18px minmax(0, 1fr) var(--mail-date-w); }
  .mail-head > .mail-head-subject, .mail-head > .mail-size { display: none; }
  .mail-head .mail-head-sub { display: inline; }
  .mail-row { grid-template-columns: 22px 18px minmax(0, 1fr) var(--mail-date-w); grid-template-areas: "check clip from date" "check . subject size"; row-gap: 2px; }
  .mail-row > .mail-check { grid-area: check; }
  .mail-row > .mail-from { grid-area: from; }
  .mail-row > .mail-subject { grid-area: subject; }
  .mail-row > .mail-clip { grid-area: clip; }
  .mail-row > .mail-date { grid-area: date; }
  .mail-row > .mail-size { grid-area: size; }
}
@media (max-width: 1100px) {
  .mail-layout.with-detail .files-main { display: none; }
}
/* The list narrows when the message is open: sender above the subject. */
@container list (max-width: 640px) {
  .mail-head { grid-template-columns: 22px 18px minmax(0, 1fr) var(--mail-date-w); }
  .mail-head > .mail-head-subject, .mail-head > .mail-size { display: none; }
  .mail-head .mail-head-sub { display: inline; }
  .mail-row { grid-template-columns: 22px 18px minmax(0, 1fr) var(--mail-date-w); grid-template-areas: "check clip from date" "check . subject size"; row-gap: 2px; }
  .mail-row > .mail-check { grid-area: check; }
  .mail-row > .mail-from { grid-area: from; }
  .mail-row > .mail-subject { grid-area: subject; }
  .mail-row > .mail-clip { grid-area: clip; }
  .mail-row > .mail-date { grid-area: date; }
  .mail-row > .mail-size { grid-area: size; }
}
.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: 14px; }
.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; }
.rte-prose { min-height: 220px; padding: 12px 14px; outline: none; font-size: 15px; line-height: 1.55; 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; }

/* Composer (mail-compose.ts) */
.mail-layout.composing .mail-detail { padding-top: 12px; }
.compose { position: relative; display: flex; flex-direction: column; gap: 8px; 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-actions { flex-wrap: nowrap; }
.compose-from { display: flex; align-items: center; gap: 8px; flex-direction: row; }
.compose-from .dd { flex: 1; }
.compose-row { display: flex; flex-direction: column; gap: 6px; }
.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); }
.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 4px 2px 8px; 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); }
button.addr-x { border: 0; background: none; padding: 0 4px; color: var(--muted); font-size: 16px; line-height: 1; }
button.addr-x:hover { color: var(--danger); 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; }
input.compose-subject { width: 100%; font-weight: 500; }
.compose-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.compose-attachments:empty { display: none; }
.compose-att.pending { opacity: 0.7; }
.compose-att.error { border-color: var(--danger); }
.compose-editor { flex: 1; display: flex; flex-direction: column; min-height: 260px; }
.compose-editor > .rte { flex: 1; }
/* The save state sits under the editor in the pane's bottom padding, so the editor ends where the text of an open message does. */
.compose-status { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; min-height: 18px; }
@media (max-width: 760px) {
  /* Phones scroll the whole page: the save state stays under the editor. */
  .compose-status { position: static; margin-top: 0; }
}
@media (max-width: 760px) {
  .addr-caption { width: 64px; }
  .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; }
@media (max-width: 760px) {
  .fv-bar { padding: 6px 8px; }
  .fv-stage { padding: 0 8px 16px; }
  .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; }

/* E-mail: the message (or the message being written) gets 1.5× the usual detail width, at most 40 % of the window. */
/* The left column (mailboxes with the folders of the open one) is as wide as dragged. */
.contacts-layout.mail-layout { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
/* The left column runs down the whole height; the top bar spans the list and the message. */
.mail-layout > .mail-side { grid-column: 1; grid-row: 1 / -1; }
.mail-layout > .mail-splitter { grid-column: 2; grid-row: 1 / -1; }
.mail-layout > .mail-topbar { grid-column: 3 / -1; grid-row: 1; }
.mail-layout > .files-main { grid-column: 3; grid-row: 2; }
.mail-layout > .mail-detail { grid-column: 4; grid-row: 2; }
.mail-topbar[hidden] { display: none; }
.mail-top-pick { display: none; }
/* The mailbox page (like a notebook page in Notes) takes the whole main area: no message pane beside it. */
.mail-layout.home:not(.composing) > .mail-detail { display: none; }
.contacts-layout.mail-layout.with-detail.home:not(.composing) { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); }
.mail-home-heading { margin: 22px 6px 4px; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
/* The bar for the checked messages at the bottom of the list, with a line above it. */
.mail-selbar-host .files-selbar { margin: 0; border-width: 1px 0 0; border-radius: 0; padding: 8px 20px; }
@media (max-width: 760px) {
  /* Phones scroll the whole page: the bar stays at the bottom of the screen. */
  .mail-selbar-host .files-selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 12px; }
  .mail-layout:has(.mail-selbar-host .files-selbar) .files-body { padding-bottom: 64px; }
}
.contacts-layout.mail-layout.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr) min(690px, max(460px, 40vw)); }
.mail-layout .mail-side { border-right: 0; padding-right: 4px; }
.mail-splitter { background: var(--surface); }
/* Rows sized like the Notes tree (.nt-row): 15 px regular text, 28 px rows, 14 px per level. */
.mail-accounts a.mail-acc { justify-content: flex-start; gap: 2px; padding: 4px; border-radius: 6px; font-size: 15px; }
.files-conns a.files-conn.mail-acc.open:not(.active) { font-weight: 400; }
.mail-accounts a.mail-acc .storage-warn { margin-left: auto; }
.mail-accounts a.mail-acc button.tree-toggle { color: var(--muted); }
.mail-accounts a.mail-acc.active button.tree-toggle { color: inherit; }
.mail-tree a.tree-node { gap: 2px; padding: 4px; font-size: 15px; }
@media (max-width: 1100px) {
  .contacts-layout.mail-layout.with-detail { grid-template-columns: var(--side-w, 240px) 7px minmax(0, 1fr); }
  .mail-layout > .mail-detail { grid-column: 3; }
  .mail-layout.with-detail.home:not(.composing) > .files-main { display: flex; }
}
@media (max-width: 900px) {
  .contacts-layout.mail-layout, .contacts-layout.mail-layout.with-detail { grid-template-columns: minmax(0, 1fr); }
  .mail-splitter { display: none; }
  .mail-layout > .mail-topbar, .mail-layout > .files-main, .mail-layout > .mail-detail { grid-column: 1; }
  /* Phones: search on the first row, the mailbox and the folder below it (they say where one is, so no path), then the buttons. */
  .notes-topbar.mail-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .mail-top-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  .mail-top-pick .dd.files-conn-select, .mail-top-pick .dd.mail-folder-select { display: flex; flex: 1 1 100%; }
  .mail-topbar .notes-top-center { display: none; }
  .mail-page-head .mail-page-title { margin: 10px 12px 8px; font-size: 26px; }
  .mail-topbar .notes-top-right { grid-column: 1 / -1; }
}

/* 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: 100vh; }
.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: calc(100vh - 57px); }
  .notes-splitter { display: none; }
  .notes-layout.show-main .notes-side { display: none; }
  /* The menu with the search stays on top of the tree too. */
  .notes-main { order: -1; }
  .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 {
  .rail, .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: 100vh; }
.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: calc(100vh - 57px); }
  .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 at the bottom of the rail: calm grey while all is fine. */
.rail .sync-status { cursor: default; color: var(--muted); opacity: 0.75; }
.rail .sync-status:hover { background: none; }
.rail .sync-status[data-state="saving"], .rail .sync-status[data-state="connecting"] { opacity: 1; }
.rail .sync-status[data-state="saving"] svg, .rail .sync-status[data-state="connecting"] svg { animation: sync-spin 1.2s linear infinite; }
.rail .sync-status[data-state="offline"] { color: #b45309; opacity: 1; }
.rail .sync-status[data-state="error"] { color: var(--danger); opacity: 1; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rail .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: checkboxes for bulk actions (like E-mail) and the bar of the checked contacts under the list. */
.contact-table .col-check { width: 34px; padding-right: 0; text-overflow: clip; }
.contact-table th.col-check, .contact-table td.col-check { vertical-align: middle; }
.contact-table tbody tr.checked, .contact-card.checked { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.contacts-selbar-host .files-selbar { margin: 0; border-width: 1px 0 0; border-radius: 0; padding: 8px 20px; }
@media (max-width: 760px) {
  /* Phones scroll the whole page: the bar stays at the bottom of the screen. */
  .contacts-selbar-host .files-selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 12px; }
  .contacts-page:has(.contacts-selbar-host .files-selbar) .contact-table-wrap { padding-bottom: 64px; }
}
/* 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; }
/* The table hides its caption row on phones: "Vybrat vše" stands above it there. */
.contact-cards-all.phone-only { display: none; }
@media (max-width: 900px) {
  .contact-cards-all.phone-only { display: inline-flex; }
}