/* Additions of the real application on top of the click prototype. */
.placeholder-notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--accent); background: var(--accent-soft); font-size: 14px; }
.placeholder-notice strong { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.placeholder-phase { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 9px; background: var(--accent); color: var(--on-accent); white-space: nowrap; }
dialog .placeholder-notice { margin-bottom: 4px; }

.user { display: grid; gap: 6px; padding: 12px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 14px; }
.user-name { color: var(--muted); }
.user-name strong { color: var(--text); display: block; }
.user-links { display: flex; gap: 8px; flex-wrap: wrap; }
.user-links a, .user-links button { font: inherit; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: none; }
.user-links a:hover, .user-links button:hover { text-decoration: underline; }

/* Tooltips: data-tip="…" on the element. On desktop on hover/keyboard focus, on phones via a "?" button (.help). */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px;
  background: #1E2125; color: #fff; border: 1px solid #555B63; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font: 400 13px/1.35 var(--body-font); text-align: left; white-space: normal; text-transform: none; letter-spacing: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease .4s, visibility 0s linear .52s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transition-delay: .4s, 0s; }
.sidebar [data-tip]::after { left: calc(100% + 12px); bottom: auto; top: 50%; transform: translateY(-50%); }
.user [data-tip]::after { left: 0; transform: none; }
@media (hover: none) { [data-tip]:not(.help)::after { display: none; } }
.help { display: inline-grid; place-items: center; width: 24px; height: 24px; min-width: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); font: 700 13px/1 var(--body-font); cursor: help; vertical-align: middle; }
.help:focus::after { opacity: 1; visibility: visible; transition-delay: 0s; }
.help::after { left: auto; right: -8px; transform: none; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.back-link { color: var(--accent); text-decoration: none; }

/* Settings: "Integrations" card as a link */
.integrations-link { display: grid; gap: 6px; text-decoration: none; color: inherit; margin-bottom: 16px; }
.integrations-link:hover { box-shadow: inset 3px 0 0 var(--accent); }

/* Navigation items are links as well (they lead to /#view on other pages) */
a.nav, a.capture, a.command-button, .sidebar a.brand, .topbar a.brand { color: inherit; text-decoration: none; }
.bottom-nav a { text-decoration: none; }
a.capture { display: flex; align-items: center; justify-content: center; gap: 6px; }
.nav { position: relative; }
.app-main { min-width: 0; }
.user-links a, .user-links button { display: inline-flex; align-items: center; gap: 6px; }
.user-links a[aria-current] { font-weight: 600; }
.collapse-toggle { margin-top: 4px; color: var(--muted); font-size: 13px; min-height: 40px; }
.collapse-toggle svg { transition: transform .2s ease; }

/* Sidebar collapsed to an icon rail (like WordPress): toggled manually, remembered per browser, always visible */
@media (min-width: 1024px) {
  .sidebar-collapsed .app { grid-template-columns: 68px 1fr; }
  .sidebar-collapsed .sidebar { padding-left: 10px; padding-right: 10px; }
  .sidebar-collapsed .sidebar .label, .sidebar-collapsed .sidebar kbd, .sidebar-collapsed .user-name { display: none; }
  .sidebar-collapsed .sidebar .brand { margin-left: -10px; margin-right: -10px; padding: 0; justify-content: center; }
  .sidebar-collapsed .sidebar :is(.nav, .command-button, .capture) { justify-content: center; padding: 0; gap: 0; }
  .sidebar-collapsed .nav :is(.dot, .counter) { position: absolute; top: 4px; right: 4px; }
  .sidebar-collapsed .user { padding: 8px 0; justify-items: center; }
  .sidebar-collapsed .user-links { flex-direction: column; align-items: center; gap: 4px; }
  .sidebar-collapsed .user-links :is(a, button) { min-width: 44px; min-height: 36px; justify-content: center; }
  .sidebar-collapsed .collapse-toggle svg { transform: rotate(180deg); }
  .sidebar-collapsed .sidebar [data-tip]::after { left: calc(100% + 14px); }
}

/* Search button in the sidebar: one line, the label shortens if space is tight */
.command-button .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.command-button kbd { white-space: nowrap; }
.command-button svg { flex-shrink: 0; }

/* Links styled as buttons */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Inputs for third-party secrets: masked text field (not type=password, so password managers stay away) */
.secret-input { display: flex; gap: 6px; align-items: stretch; }
.secret-input .secret { flex: 1; min-width: 0; -webkit-text-security: disc; text-security: disc; font-family: ui-monospace, monospace; }
.secret-input .secret.revealed { -webkit-text-security: none; text-security: none; }
.secret-toggle { min-width: 44px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.secret-toggle[aria-pressed="true"] { color: var(--accent); }

/* Contacts: list rows and detail (loaded as fragments by public/js/contacts.js) */
.contact-rows { display: grid; padding: 0 10px 20px; align-content: start; }
.list-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; padding: 0 10px; font-size: 13px; color: var(--muted); }
.list-meta a { color: var(--accent); }
.list-empty { margin: 0; padding: 16px 10px; color: var(--muted); }
a.row { color: inherit; text-decoration: none; }
.contact-row { gap: 12px; }
.contact-row[aria-current] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.initials { display: grid; place-items: center; font: 700 14px/1 var(--heading-font); color: var(--muted); letter-spacing: .02em; }
.initials.kind-company, .initials.kind-location { border-radius: 10px; }
.initials.kind-location { border: 1px dashed var(--border); }
.avatar-large.initials { font-size: 24px; }
.row-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.row-title, .row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title { font-weight: 600; }
.row-sub { font-size: 13px; color: var(--muted); }
.badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: middle; }
.badge-phonebook { border-color: var(--accent); color: var(--accent); }
.badge-newsletter { border-color: #6fcf97; color: #6fcf97; }
.badge-blacklist { border-color: #eb5757; background: #eb5757; color: #fff; }
.blacklist-notice { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px solid #eb5757; background: rgba(235, 87, 87, .15); font-size: 14px; }
.blacklist-notice strong { color: #ff8a8a; }

.contact-detail { gap: 20px; }
.contact-detail[aria-busy="true"] { opacity: .6; transition: opacity .15s ease .15s; }
.detail-empty { display: grid; place-items: center; min-height: 40vh; }
.detail-title { display: grid; gap: 4px; min-width: 0; }
.detail-title h2 { margin: 0; font-family: var(--heading-font); font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.role-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; }
.role-chip { padding: 3px 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-size: 13px; font-weight: 600; }
.affiliation { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r); background: var(--list); border-left: 3px solid var(--accent); }
.affiliation p { margin: 0; }
.affiliation a, .link-list a, .facts a { color: var(--accent); text-decoration: none; }
.affiliation a:hover, .link-list a:hover, .facts a:hover { text-decoration: underline; }
.affiliation a { font-weight: 700; }
.muted-inline { color: var(--muted); }
.detail-section { display: grid; gap: 10px; }
.detail-section h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.facts { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 20px; margin: 0; }
.facts dt { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts a { display: inline-block; min-height: 24px; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.addresses > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.field-label { font-size: 13px; color: var(--muted); }
.notes { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.journal-entry { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.journal-meta { margin: 0; font-size: 13px; color: var(--muted); }
.journal-meta strong { color: var(--text); }
.journal-title { margin: 0; font-weight: 600; }
.small-print { font-size: 12px; }
@media (min-width: 1024px) {
  .contacts { height: 100dvh; min-height: 0; }
  .contacts .list, .contact-detail { overflow-y: auto; }
}
@media (max-width: 1023px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .facts a { min-height: 32px; display: inline-flex; align-items: center; }
  .detail-title h2 { font-size: 22px; }
}
@media (max-width: 1023px) {
  .list-head .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .list-head .chip { flex-shrink: 0; min-height: 36px; }
}
.chips-small { gap: 6px; margin-top: -6px; }
.chips-small .chip { min-height: 28px; padding: 0 10px; font-size: 12px; background: transparent; }
.chips-small .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text, var(--accent)); }
/* Tooltips in the list head open downwards (the list scrolls and would cut them off at the top) */
.list-head [data-tip]::after { bottom: auto; top: calc(100% + 8px); }
.contacts .list { overflow-x: hidden; }

/* Contacts list head: search box with icon, roles as a segmented switch with counts, kind chips with counts */
.search-box { position: relative; }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-box .search { height: 48px; padding-left: 42px; font-size: 16px; border-radius: 12px; }
.search-box .search:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.segmented { display: grid; grid-template-columns: repeat(var(--segments, 5), minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--dark, #2A2D31); }
.segmented button { display: grid; justify-items: center; gap: 1px; min-height: 48px; padding: 4px 2px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.segmented button:hover { background: rgba(255,255,255,.06); color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.segment-label { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.segment-count { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; min-height: 1em; }
.chip-count { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 2px; }
.chips-small { margin-top: 0; }
.list-meta { align-items: center; margin: 0; padding: 0 4px; }
.list-meta [data-total] { font-weight: 600; color: var(--text); }
.link-button { border: 0; background: none; padding: 4px 0; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; margin-right: auto; }
.link-button:hover { text-decoration: underline; }
.contact-row:focus-visible { outline-offset: -2px; }
.contact-sentinel { height: 1px; }
.list-head { gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 6px; }
@media (max-width: 1023px) {
  .segmented button { min-height: 52px; }
  .segment-label { font-size: 13px; }
}
.quiet-link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.quiet-link:hover { color: var(--accent); }

/* Contact detail, design draft: dashed = draft without function yet (data-planned) */
[data-planned] { outline: 1px dashed var(--border); outline-offset: 2px; }
button[data-planned], .btn[data-planned] { outline: 0; border-style: dashed; }
.legend-planned { border-bottom: 1px dashed var(--muted); }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; background: #1E2125; color: #fff; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 14px; animation: toast-in .15s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@media (min-width: 1024px) { .toast { bottom: 24px; } }

.contact-view { display: flex; flex-direction: column; gap: 20px; }
.detail-head { align-items: flex-start; }
.head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.avatar-button { position: relative; border: 0; cursor: pointer; font: inherit; }
.avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.menu { position: relative; }
.menu summary { list-style: none; min-width: 44px; display: grid; place-items: center; font-size: 20px; line-height: 1; }
.menu summary::-webkit-details-marker { display: none; }
.menu-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 270px; display: grid; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.menu-items > :is(button, a) { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu-items > :is(button, a):hover { background: var(--accent-soft); }
.menu-items .danger { color: var(--danger); }
.menu-items hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.menu-phase { font-size: 11px; color: var(--muted); white-space: nowrap; }

.status-check { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.status-check .muted-inline { font-size: 13px; margin-right: 4px; }

.quick-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.quick { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 76px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--list); color: var(--text); font: 600 14px/1.2 var(--body-font); text-decoration: none; cursor: pointer; text-align: center; }
.quick:hover:not(:disabled) { border-color: var(--accent); }
.quick:disabled { opacity: .45; cursor: default; }
.quick-icon { font-size: 20px; color: var(--accent); }
.quick small { font-weight: 400; font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.care-box { border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); padding: 12px 14px; display: grid; gap: 8px; }
.care-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.care-head h3 { margin: 0; font-size: 14px; color: var(--accent); }
.care-head-actions { display: flex; gap: 12px; align-items: center; }
.care-table { width: 100%; border-collapse: collapse; }
.care-table th, .care-table td { padding: 7px 8px 7px 0; border-top: 1px solid rgba(247,187,48,.25); vertical-align: middle; text-align: left; }
.care-table th.care-field { width: 34%; min-width: 130px; font-weight: 600; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; white-space: normal; }
.care-text { display: grid; gap: 2px; min-width: 0; }
.care-table td.care-actions { display: table-cell; white-space: nowrap; text-align: right; padding-right: 0; }
.care-table td.care-actions .btn + .btn { margin-left: 6px; }
.care-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
@media (max-width: 640px) {
  .care-table, .care-table tbody, .care-table tr, .care-table th, .care-table td { display: block; width: auto; }
  .care-table tr { border-top: 1px solid rgba(247,187,48,.25); padding: 8px 0; }
  .care-table th, .care-table td { border: 0; padding: 2px 0; }
  .care-table td.care-actions { display: block; text-align: left; white-space: normal; padding-top: 6px; }
}
.care-change { overflow-wrap: anywhere; }
.care-change del { color: var(--muted); }
.care-change ins { text-decoration: none; color: var(--success); font-weight: 600; }
.care-reason { font-size: 14px; }
.care-change { font-size: 13px; }
.btn.quiet { border-color: transparent; color: var(--muted); }

.care-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.care-strip > span { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--list); }
.care-strip small { font-size: 12px; color: var(--muted); }

.detail-tabs { position: sticky; top: 0; z-index: 2; background: var(--ground); }
.tab-count { font-size: 11px; color: var(--muted); margin-left: 4px; }
.tab-panel { display: grid; gap: 22px; align-content: start; }
.journal-add { display: flex; gap: 6px; flex-wrap: wrap; }
.facet-empty { color: var(--muted); font-style: italic; }
.documents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.document-tile { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--list); text-align: center; font-size: 14px; }
.document-tile.add { border-style: dashed; color: var(--muted); }
.doc-icon { font-size: 24px; }

/* Edit mode (design draft) */
.contact-edit { display: grid; gap: 18px; }
.contact-edit[hidden] { display: none; }
.edit-head h2 { margin: 0 0 4px; font-family: var(--heading-font); }
.edit-group { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; margin: 0; display: grid; gap: 12px; }
.edit-group legend { padding: 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.edit-grid .field.wide, .contact-edit .field.wide { grid-column: 1 / -1; }
.contact-edit .field span { font-size: 13px; color: var(--muted); }
.contact-edit select, .contact-edit input:not([type="checkbox"]):not([type="radio"]), .contact-edit textarea { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); width: 100%; min-width: 0; font: inherit; }
.edit-rows { display: grid; gap: 8px; }
.edit-row { display: grid; grid-template-columns: minmax(150px, 190px) 1fr 44px; gap: 8px; align-items: center; }
.edit-company { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.icon-button { min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r); background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.icon-button:hover { color: var(--danger); border-color: var(--danger); }
.add-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.add-chips .chip { background: transparent; border-style: dashed; min-height: 36px; }
.tiles-small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tiles-small .tile { min-height: 48px; padding: 8px 12px; }
.address-edit { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.edit-bar { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 0; background: var(--ground); border-top: 1px solid var(--line); }

/* Comparison in the AI dialog (E17, draft) */
.compare-draft { display: grid; gap: 4px; }
.compare-draft-head, .compare-draft-row { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 10px; align-items: center; }
.compare-draft-row { padding: 6px 0; border-top: 1px solid var(--line); }

/* Settings: plausibility checks */
.check-list { display: grid; gap: 4px; }
.check-setting { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 10px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.check-setting:first-child { border-top: 0; }
.check-setting input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 44px; height: 26px; border-radius: 13px; background: var(--skel); position: relative; transition: background .15s; margin-top: 2px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.check-setting input:checked + .switch { background: var(--success); }
.check-setting input:checked + .switch::after { transform: translateX(18px); }
.check-setting input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-text { display: grid; gap: 2px; }
.check-text .muted { font-size: 13px; }

@media (max-width: 1023px) {
  .quick-actions { gap: 6px; }
  .quick { min-height: 68px; font-size: 12px; }
  .quick small { display: none; }
  .head-actions .btn:not(summary) { display: none; }
  .edit-row { grid-template-columns: 1fr 44px; }
  .edit-row select { grid-column: 1 / -1; }
  .compare-draft-head, .compare-draft-row { grid-template-columns: 1fr 1fr; }
  .compare-draft-head > :first-child { display: none; }
  .compare-draft-row .field-label { grid-column: 1 / -1; }
  .detail-tabs { top: 64px; }
}

/* Edit form: letter salutation with suggestions, status line, remove address */
.letter-salutation { display: grid; gap: 8px; margin-top: 4px; }
.letter-salutation .add-chips .chip { border-style: solid; }
.edit-status { align-self: center; font-size: 14px; color: var(--muted); }
.edit-status.error { color: var(--danger); }
.remove-address { justify-self: start; align-self: end; }

/* Contact list: render only visible rows (all rows are in the DOM, so the scrollbar keeps its size) */
.contact-row { content-visibility: auto; contain-intrinsic-size: auto 62px; }

/* Choice dialog (public/js/choice.js): large tiles for decisions */
.choice-dialog { width: min(760px, calc(100vw - 24px)); }
/* The tiles share the whole width evenly (user, 2026-10-14): two 50:50, three a third each; empty columns collapse. */
.choice-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (min-width: 420px) { .choice-tiles[data-count="4"] { grid-template-columns: repeat(2, 1fr); } }
.choice-tile { min-height: 64px; }
.choice-tile.suggested { border-color: var(--accent); }
.choice-label { display: grid; gap: 2px; }
.choice-label small { font-size: 12px; font-weight: 400; color: var(--muted); }
.choice-more { display: grid; gap: 10px; }
.choice-more summary { list-style: none; justify-self: start; display: inline-flex; align-items: center; }
.choice-more summary::-webkit-details-marker { display: none; }
.choice-more[open] { display: grid; }
.choice-search { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); width: 100%; font: inherit; }
.choice-more-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); max-height: 40vh; overflow-y: auto; overflow-x: hidden; padding: 2px; }
.choice-more-list .tile { min-height: 48px; padding: 8px 12px; }
.choice-custom { display: grid; gap: 8px; }
.choice-custom-row { display: flex; gap: 8px; }
.choice-custom-row input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); font: inherit; }
.choice-foot-left, .choice-foot-right { display: flex; gap: 8px; align-items: center; }
.btn.small.primary { min-height: 32px; }

/* Change log (E20): in the journal of a contact on request, central page for archiving and deleting */
.log-toggle summary { list-style: none; display: inline-flex; align-items: center; }
.log-toggle summary::-webkit-details-marker { display: none; }
.log-toggle[open] summary { margin-bottom: 10px; }
.log-list { display: grid; gap: 10px; }
.log-entry { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--list); }
.log-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.log-who { color: var(--text); font-weight: 600; }
.log-contact { color: var(--accent); font-weight: 600; text-decoration: none; }
.log-undo-all { margin-left: auto; }
.log-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.log-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.log-item:first-child { border-top: 0; }
.log-text { overflow-wrap: anywhere; }
.log-meta { grid-column: 1; font-size: 12px; color: var(--muted); }
.log-item .btn { grid-column: 2; grid-row: 1 / span 2; }
.log-item.undone .log-text { text-decoration: line-through; color: var(--muted); }
.log-item.is-undo .log-text::before { content: "↺ "; color: var(--accent); }
.log-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.log-filter .search { flex: 1 1 220px; width: auto; }
.log-filter select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); }
.log-pages { display: flex; gap: 8px; justify-content: space-between; }
.postal-state { display: block; min-height: 1em; font-size: 12px; color: var(--muted); }
.choice-dialog .wizard-head .muted { white-space: pre-line; }

/* Settings → Lists */
.list-editor { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: row; }
.list-row { display: grid; grid-template-columns: 1fr repeat(3, 44px); gap: 6px; align-items: center; }
.list-row.pair { grid-template-columns: 1fr 1fr repeat(3, 44px); }
.list-row input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); font: inherit; min-width: 0; }
.list-head-row { grid-template-columns: 1fr 1fr 150px; font-size: 13px; color: var(--muted); }
.list-editor li:nth-child(12) { border-bottom: 2px dashed var(--accent); padding-bottom: 8px; margin-bottom: 4px; }
@media (max-width: 700px) {
  .list-row.pair { grid-template-columns: 1fr 1fr; }
  .list-row.pair .icon-button { min-height: 36px; }
  .list-head-row { display: none; }
}

/* Journal: emails with the contact from Gmail (E11, draft) */
.mail-history { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--list); }
.mail-history-head, .mail-history-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-history h4 { margin: 0; font-size: 14px; }
.mail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mail-list li { display: grid; grid-template-columns: 20px 90px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.mail-list li:first-child { border-top: 0; }
.mail-dir { color: var(--accent); font-weight: 700; }
.mail-date, .mail-open { color: var(--muted); }

/* Edit form: fixed rows for the person fields */
.edit-line { display: grid; gap: 10px 14px; }
.edit-line.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edit-line.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edit-group > .edit-line + .edit-line { margin-top: 2px; }
.letter-salutation .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.address-name { grid-column: 1 / -1; font-weight: 600; }
@media (max-width: 700px) {
  .edit-line.cols-3 { grid-template-columns: 1fr 1fr; }
  .edit-line.cols-3 > :first-child { grid-column: 1 / -1; }
}
.letter-group { font-size: 12px; color: var(--muted); align-self: center; margin-left: 4px; }
.list-label { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ground); }
.language-add { display: flex; gap: 8px; margin-top: 8px; }
.language-add input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); font: inherit; }
/* Place choices for a postal code with several places */
.place-choices { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.place-choices .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.salutation-line { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
.salutation-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.salutation-tiles .tile { min-height: 48px; padding: 8px 10px; }
@media (max-width: 700px) {
  .salutation-line { grid-template-columns: 1fr; }
  .salutation-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.salutation-tiles .tile { gap: 8px; line-height: 1.2; }
.salutation-tiles .tile input:is([type="radio"]) { width: 22px; height: 22px; min-width: 22px; }

/* Settings → Salutations */
.salutation-head, .salutation-row { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)) 150px; gap: 8px; align-items: start; }
.salutation-head { font-size: 13px; color: var(--muted); }
.salutation-row { padding: 6px 0; border-top: 1px solid var(--line); }
.salutation-row select, .salutation-variant input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: var(--text); font: inherit; min-width: 0; }
.salutation-variant { display: grid; gap: 2px; min-width: 0; }
.salutation-variant small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.salutation-buttons { display: flex; gap: 4px; }
.salutation-language .page-head h2 { margin: 0; }
code { font-family: ui-monospace, monospace; font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--ground); border: 1px solid var(--line); }
@media (max-width: 900px) {
  .salutation-head { display: none; }
  .salutation-row { grid-template-columns: 1fr; }
}
/* Tiles inside a form field: the general field rule (min-height 44px, padding) must not stretch the round markers */
.field .tile input:is([type="radio"], [type="checkbox"]) { min-height: 0; padding: 0; border-radius: 50%; }

/* Trash (E16), trade name (E18), duplicate hints in the search, data care lists */
.trash-notice { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: rgba(247,187,48,.14); border: 1px solid var(--accent); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trash-notice em { font-style: normal; color: var(--muted); }
.row-duplicate { display: block; margin-top: 2px; font-size: 12px; color: var(--accent); }
.trash-list { display: grid; gap: 0; padding: 0; }
.trash-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) 2fr auto auto auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.trash-row:last-child { border-bottom: 0; }
.trash-name { color: var(--accent); font-weight: 700; text-decoration: none; }
.trash-name:hover { text-decoration: underline; }
.trash-reason { font-size: 14px; }
.trash-recommendation { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 9px; border: 1px solid var(--border); white-space: nowrap; }
.trash-recommendation.rec-delete { border-color: var(--accent); color: var(--accent); }
.trash-recommendation.rec-keep { color: var(--muted); }
.trash-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tile small.muted-inline { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.detail-section h3 .btn.small { margin-left: 8px; vertical-align: middle; }
@media (max-width: 1023px) {
  .trash-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Contact directory (E6) */
.directory-page .card { margin-top: 12px; }
.directory-import summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.directory-upload { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 12px; }
.import-history { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.import-history li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.directory-filter { display: grid; gap: 10px; margin: 16px 0 8px; }
.directory-filter .chip { text-decoration: none; }
.directory-list { display: grid; gap: 6px; }
.dir-entry { border: 1px solid var(--border); border-radius: var(--r); background: var(--list); }
.dir-entry > summary { display: flex; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; min-height: 44px; }
.dir-entry > summary::-webkit-details-marker { display: none; }
.dir-entry[open] > summary { border-bottom: 1px solid var(--border); }
.dir-entry.status-irrelevant, .dir-entry.status-present, .dir-entry.status-imported { opacity: .75; }
.dir-body { padding: 12px 16px; display: grid; gap: 10px; }
.dir-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-match { margin: 0; }
.dir-match a { color: var(--accent); }
.badge-accent { border-color: var(--accent); color: var(--accent); }
.mapping-card { overflow-x: auto; }
.mapping-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mapping-table th, .mapping-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mapping-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.mapping-table .samples { color: var(--muted); max-width: 420px; }
.mapping-table .filled { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mapping-table select { min-height: 40px; min-width: 220px; }
.mapping-table tr.to-notes select { border-color: var(--accent); }
.mapping-table tr.ignored { opacity: .6; }
.empty-columns { margin-top: 10px; }
.empty-columns summary { cursor: pointer; color: var(--muted); }
.preview-stats { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.preview-stats strong { display: inline-block; min-width: 56px; text-align: right; margin-right: 8px; color: var(--accent); font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.dir-entry.dir-done { opacity: .45; }
.dir-entry.dir-done > summary { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }

/* Contact directory as a work stack: open cards, the current one highlighted, decided ones slide out */
.directory-list { gap: 10px; }
.dir-card { border: 1px solid var(--border); border-radius: var(--r); background: var(--list); padding: 12px 16px; display: grid; gap: 8px; overflow: hidden; transition: height .2s ease, opacity .2s ease, margin .2s ease, padding .2s ease, border-color .12s; outline: none; }
.dir-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dir-card.leaving { opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: -10px; border-width: 0; }
.dir-card-head { display: flex; gap: 12px; align-items: center; }
.dir-card-title h3 { margin: 0; font-size: 17px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dir-card-title p { margin: 2px 0 0; font-size: 14px; }
.dir-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; margin: 0; }
.dir-facts div { display: flex; gap: 8px; min-width: 0; }
.dir-facts dt { color: var(--muted); font-size: 13px; min-width: 64px; }
.dir-facts dd { margin: 0; overflow-wrap: anywhere; }
.dir-facts a { color: var(--accent); text-decoration: none; }
.dir-notes { margin: 0; font-size: 13px; color: var(--muted); max-height: 7.5em; overflow: auto; white-space: pre-line; }
.dir-card .dir-actions .btn { min-height: 44px; }
.dir-card kbd { font-size: 11px; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .6; margin-left: 4px; }
@media (max-width: 1023px) { .dir-card kbd { display: none; } }
@media (max-width: 700px) {
  /* Phone: one button per line, full width (wish of the user) */
  .dir-card .dir-actions { flex-direction: column; }
  .dir-card .dir-actions .btn { width: 100%; }
  .dir-duplicate .btn, .dir-match .btn { display: block; width: 100%; min-height: 44px; margin: 8px 0 0; }
  /* Comparison dialog: buttons stacked, "take over" first */
  .compare-dialog .wizard-foot { flex-direction: column-reverse; }
  .compare-dialog .wizard-foot .btn { width: 100%; }
}
.dir-edit-dialog { width: min(820px, calc(100vw - 24px)); }
.dir-edit-form { display: grid; gap: 10px; }
.dir-edit-form .field.needed input { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dir-edit-form .field.needed > span { color: var(--accent); font-weight: 600; }
@media (max-width: 700px) { .dir-edit-form .edit-line { grid-template-columns: 1fr; } }

/* Comparison dialog (E17): left stays, right is the other one; per field keep / take / both / clear */
.compare-dialog { width: min(1000px, calc(100vw - 24px)); }
.compare-dialog form { display: grid; gap: 6px; }
.compare-row { display: grid; grid-template-columns: 130px 1fr 1fr minmax(210px, auto); gap: 8px; align-items: stretch; padding: 6px 0; border-bottom: 1px solid var(--border); }
.compare-head { border-bottom: 2px solid var(--border); font-size: 13px; }
.compare-label { font-size: 13px; color: var(--muted); padding-top: 8px; }
.compare-value { white-space: pre-line; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--list); cursor: pointer; overflow-wrap: anywhere; min-height: 40px; }
.compare-value.empty { color: var(--muted); font-style: italic; }
.compare-value.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.compare-value.cleared { text-decoration: line-through; opacity: .6; }
.compare-options { display: flex; flex-wrap: wrap; gap: 4px; align-content: center; }
.compare-option { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; min-height: 36px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; }
.compare-option:has(input:checked) { border-color: var(--accent); background: rgba(247,187,48,.14); }
.compare-row.equal .compare-value { opacity: .85; }
.compare-equal > summary { cursor: pointer; color: var(--muted); padding: 8px 0; }
.dir-duplicate { margin: 0; font-size: 14px; }
.dir-duplicate strong { color: var(--accent); }
.dir-duplicate .btn, .dir-match .btn { margin-left: 6px; vertical-align: middle; }
@media (max-width: 800px) {
  .compare-row { grid-template-columns: 1fr 1fr; }
  .compare-label { grid-column: 1 / -1; padding-top: 0; }
  .compare-options { grid-column: 1 / -1; }
  .compare-head span { display: none; }
}
.dupe-names { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.dupe-eq { color: var(--accent); font-weight: 700; }

/* Sidebar groups (e.g. "Contacts"): sub items show while one of them is current; collapsed rail: flyout on hover */
.nav-parent > svg:last-child { margin-left: auto; transition: transform .15s; color: var(--muted); }
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.nav-sub .nav { padding-left: 24px; min-height: 40px; }
html:not(.sidebar-collapsed) .nav-group:not(.closed):has(.nav-sub [aria-current]) .nav-sub { display: flex; }
.nav-group:has(.nav-sub [aria-current]) .nav-parent { color: var(--accent); }
.nav-group:has(.nav-sub [aria-current]) .nav-parent > svg:first-child { color: var(--accent); }
.nav-group:not(.closed):has(.nav-sub [aria-current]) .nav-parent > svg:last-child { transform: rotate(90deg); }
@media (min-width: 1024px) {
  .sidebar-collapsed .nav-parent > svg:last-child { display: none; }
  .sidebar-collapsed .nav-group { position: relative; }
  .sidebar-collapsed .sidebar .nav-group .nav-sub { display: none; }
  .sidebar-collapsed .nav-group:is(:hover, :focus-within) .nav-sub { display: flex; position: absolute; left: 100%; top: 0; z-index: 20; min-width: 220px; padding: 6px; margin: 0; background: var(--sidebar); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
  .sidebar-collapsed .nav-group .nav-sub .label { display: inline; }
  .sidebar-collapsed .nav-group .nav-sub .nav { justify-content: flex-start; padding: 0 12px; gap: 12px; }
  .sidebar-collapsed .nav-group .nav-sub [data-tip]::after { display: none; }
}
/* Phone "More" dialog: the "Contacts" group as a heading with its items indented, like the sidebar */
.more-group { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 0 12px; min-height: 36px; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.more .more-sub { padding-left: 28px; }
.more .nav[aria-current] { color: var(--accent); }

/* Close button in the top right corner of a dialog (e.g. the search) */
.commands { position: relative; }
.dialog-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; z-index: 1; }
.dialog-close:hover { background: rgba(255,255,255,.06); color: inherit; }
.commands .command-input { padding-right: 52px; }

/* Capture contact and inbox (E2, phase 4) */
.capture-dialog { width: min(620px, calc(100vw - 24px)); position: relative; }
.capture-photo { position: relative; min-height: 110px; padding: 12px; text-align: center; }
.capture-photo-text { display: grid; gap: 4px; }
.capture-photo-text small { color: var(--muted); font-size: 13px; }
.capture-preview { max-width: 100%; max-height: 220px; border-radius: 8px; object-fit: contain; }
.capture-photo-remove { justify-self: start; margin-top: -8px; }
.capture-error { margin: 0; color: #FF8A80; font-weight: 600; }
.inbox-list { display: grid; gap: 12px; margin-top: 16px; }
.inbox-card-body { display: flex; gap: 16px; align-items: flex-start; }
.inbox-card-main { display: grid; gap: 6px; min-width: 0; flex: 1; }
.inbox-card-main h3 { margin: 0; font-size: 17px; }
.inbox-photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.inbox-text { margin: 0; font-size: 14px; white-space: pre-line; max-height: 12em; overflow: auto; }
@media (max-width: 700px) {
  .capture-form .edit-line, .inbox-edit-form .edit-line { grid-template-columns: 1fr; }
  .inbox-card-body { flex-direction: column; }
  .inbox-photo img { width: 100%; height: auto; max-height: 260px; }
  .inbox-page .dir-actions { flex-direction: column; }
  .inbox-page .dir-actions .btn { width: 100%; }
}

.inbox-photo-details a { color: var(--accent); }

/* Settings → Classification: status rows carry the "no automatic mails" switch */
.classification-settings .list-row:has(.no-mail) { grid-template-columns: 1fr auto repeat(3, 44px); }
.classification-settings .no-mail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; min-height: 44px; }
.classification-settings .list-editor li:nth-child(12) { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
@media (max-width: 700px) { .classification-settings .list-row:has(.no-mail) { grid-template-columns: 1fr repeat(3, 44px); } .classification-settings .no-mail { grid-column: 1 / -1; order: 5; } }

/* Classification tab (E14): chosen values as chips, a tap on the row changes that facet */
.facet-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.facet-edit:hover, .facet-edit:focus-visible { background: rgba(255,255,255,.05); }
.facet-chip { pointer-events: none; }
.facet-change { margin-left: auto; font-size: 13px; color: var(--accent); }
.qualification-list { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }

/* Settings → Classification: number of contacts per value */
.classification-settings .list-row { grid-template-columns: 1fr 44px repeat(3, 44px); }
.classification-settings .list-row:has(.no-mail) { grid-template-columns: 1fr 44px auto repeat(3, 44px); }
.usage-count { text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .classification-settings .list-row:has(.no-mail) { grid-template-columns: 1fr 44px repeat(3, 44px); } }

/* Classification filter of the contact list (E14): dialog with one group of chips per facet, active filters below */
.class-filter-dialog { width: min(760px, calc(100vw - 24px)); position: relative; }
.class-filter-groups { display: grid; gap: 14px; margin: 8px 0 12px; }
.class-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.class-group legend { font-family: var(--font-head, inherit); font-weight: 600; color: var(--accent-text, var(--accent)); margin-bottom: 6px; padding: 0; }
.class-group .chips { flex-wrap: wrap; gap: 6px; }
.class-group .chip { min-height: 36px; white-space: normal; text-align: left; line-height: 1.25; padding: 6px 12px; }
.class-group .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.class-group .chip:disabled { opacity: .4; cursor: default; }
.class-group .chip-none { border-style: dashed; }
.class-active { flex-wrap: wrap; }
.class-active .chip { white-space: normal; text-align: left; }
.chip-x { font-size: 15px; line-height: 1; margin-left: 2px; opacity: .8; }
@media (max-width: 1023px) {
  .class-filter-dialog .wizard-foot { flex-direction: column-reverse; }
  .class-filter-dialog .wizard-foot .btn { width: 100%; }
}

/* Inbox: completing an entry with photo and note of the capture next to the form */
.inbox-edit-dialog { width: min(1100px, calc(100vw - 24px)); }
.inbox-edit-grid { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 16px; align-items: start; }
.inbox-edit-source { display: grid; gap: 10px; position: sticky; top: 0; }
.inbox-edit-photo img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: var(--list); display: block; }
.inbox-edit-fields { display: grid; gap: 10px; min-width: 0; }
.inbox-done { margin-top: 20px; }
.inbox-done summary { cursor: pointer; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.inbox-done ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.inbox-done a { color: var(--accent); }
@media (max-width: 1023px) {
  .inbox-edit-grid { grid-template-columns: 1fr; }
  .inbox-edit-source { position: static; }
  .inbox-edit-photo img { max-height: 220px; }
  .inbox-edit-dialog .wizard-foot, .inbox-edit-dialog .choice-foot-right { flex-direction: column-reverse; width: 100%; }
  .inbox-edit-dialog .wizard-foot .btn { width: 100%; }
}

/* Pictures of contacts: own photo, Gravatar or favicon over the initials (list and detail head) */
.avatar, .avatar-large { position: relative; overflow: hidden; }
.avatar-button { overflow: visible; }
.avatar img, .avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #fff; }
.avatar-button .avatar-image { border-radius: inherit; }
.avatar-button.has-image .avatar-initials { visibility: hidden; }
.avatar-button[aria-busy="true"] { opacity: .5; }

/* Inbox: photo as button, photo view in a dialog, crop dialog (public/js/crop.js) */
.inbox-photo { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.inbox-photo-badge { position: absolute; left: 6px; bottom: 6px; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; }
.inbox-edit-photo { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.photo-view { width: min(1100px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 12px; }
.photo-view img { display: block; max-width: 100%; max-height: calc(100dvh - 120px); margin: 0 auto; object-fit: contain; border-radius: 8px; }
.photo-view-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.photo-view-actions .btn { min-height: 44px; }
.crop-dialog { width: min(1100px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 12px 16px; }
.crop-dialog h2 { margin: 0 0 4px; }
.crop-dialog .muted { margin: 0 0 8px; font-size: 14px; }
.crop-stage { position: relative; display: block; width: fit-content; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; border-radius: 6px; }
.crop-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 250px); pointer-events: none; -webkit-user-drag: none; }
.crop-box { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; touch-action: none; }
.crop-box::before, .crop-box::after { content: ""; position: absolute; border: 0 dashed rgba(255,255,255,.45); pointer-events: none; }
.crop-box::before { left: 33.3%; right: 33.3%; top: 0; bottom: 0; border-left-width: 1px; border-right-width: 1px; }
.crop-box::after { top: 33.3%; bottom: 33.3%; left: 0; right: 0; border-top-width: 1px; border-bottom-width: 1px; }
.crop-handle { position: absolute; width: 44px; height: 44px; touch-action: none; z-index: 1; }
.crop-handle::after { content: ""; position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.crop-handle[data-h="nw"] { left: -22px; top: -22px; cursor: nwse-resize; }
.crop-handle[data-h="ne"] { right: -22px; top: -22px; cursor: nesw-resize; }
.crop-handle[data-h="sw"] { left: -22px; bottom: -22px; cursor: nesw-resize; }
.crop-handle[data-h="se"] { right: -22px; bottom: -22px; cursor: nwse-resize; }
.crop-tools { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; }
@media (max-width: 1023px) {
  .photo-view-actions .btn, .crop-dialog .wizard-foot .btn { flex: 1 1 100%; }
  .crop-dialog .wizard-foot { flex-direction: column-reverse; }
}

/* Global search (Ctrl/Cmd + K, public/js/search.js) */
.commands { width: min(720px, calc(100vw - 16px)); max-height: calc(100dvh - 32px); flex-direction: column; }
.commands[open] { display: flex; }
.search-results { overflow-y: auto; margin-top: 8px; display: grid; gap: 2px; align-content: start; }
.search-empty { color: var(--muted); margin: 8px 4px; font-size: 14px; }
.search-item { display: grid; }
.search-hit { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; min-height: 48px; }
.search-hit:hover, .search-hit.active, .commands .command.active { background: var(--accent-soft); }
.search-hit .avatar { width: 34px; height: 34px; flex-shrink: 0; font-size: 13px; }
.search-hit .avatar.square { border-radius: 8px; }
.hit-text { display: grid; min-width: 0; flex: 1; }
.hit-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item .duplicate-hint { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 0 10px 6px 54px; font-size: 13px; color: var(--accent-text, var(--accent)); }
.commands .command.more { color: var(--accent); }
.inbox-card:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Data care → classification incomplete */
.incomplete-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
@media (max-width: 1023px) { .incomplete-head .btn { width: 100%; min-height: 44px; } }

/* Data care → character errors */
.characters-row { align-items: start; }
.characters-items { display: grid; gap: 4px; font-size: 14px; min-width: 0; }
.characters-item { overflow-wrap: anywhere; }
.characters-item del { color: var(--muted); }
.characters-item ins { text-decoration: none; color: var(--accent-text, var(--accent)); }

/* Settings → Classification: trade skills in two columns (trade, name); on phones the trade gets its own line */
.classification-settings .skill-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px repeat(3, 44px); }
.skill-row select { min-height: 44px; min-width: 0; width: 100%; }
@media (max-width: 600px) {
  .classification-settings .skill-row { grid-template-columns: minmax(0, 1fr) 44px repeat(3, 44px); }
  .skill-row select { grid-column: 1 / -1; }
}

/* Settings start page: topics with tiles; subpage navigation of the classification */
.settings-group { margin-top: 20px; }
.settings-group h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.settings-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.settings-tile { display: grid; gap: 4px; align-content: start; padding: 14px 16px; min-height: 88px; border: 1px solid var(--border); border-radius: var(--r, 10px); background: var(--list); color: inherit; text-decoration: none; }
a.settings-tile:hover, a.settings-tile:focus-visible { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.settings-tile strong { font-size: 16px; }
.settings-tile .muted { font-size: 14px; }
.settings-count { font-size: 13px; color: var(--accent-text, var(--accent)); }
.settings-tile[data-planned] { opacity: .75; outline: 0; border-style: dashed; cursor: default; }
.settings-subnav { flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.settings-subnav .chip { text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.settings-subnav .chip[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text, var(--accent)); }

/* Data care → categories */
.categories-row code { font-size: 12px; color: var(--muted); }
.categories-status { font-size: 13px; }

/* "i" buttons and the info window (wish of the user, 2026-09-30) */
.info-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-left: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font: italic 700 15px/1 var(--heading-font); cursor: pointer; vertical-align: middle; transition: background .15s, color .15s; }
.info-btn::before { content: ''; position: absolute; inset: -9px; }
.info-btn:hover, .info-btn:focus-visible { background: var(--accent); color: var(--on-accent); outline: none; }
.list-meta .info-btn { margin-left: 0; }
.info-dialog { width: min(460px, calc(100vw - 32px)); padding: 24px 24px 20px; }
.info-dialog::backdrop { background: rgba(0,0,0,.45); }
.info-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.info-badge { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: italic 700 18px/1 var(--heading-font); }
.info-head h2 { font-size: 20px; }
.info-text { margin: 14px 0 18px; line-height: 1.55; }
.info-text p { margin: 0 0 10px; }
.info-ok { width: 100%; min-height: 44px; }
@media (max-width: 700px) {
  .info-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); max-height: 85dvh; overflow: auto; }
}

/* Work lists at the contact */
.work-lists { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.work-lists .chip { min-height: 32px; font-size: 13px; }
.work-list-chip { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.work-lists .chip-add { border-style: dashed; color: var(--muted); }

/* Completeness points as a traffic light */
.score { display: inline-grid; place-items: center; flex: none; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 11px; font: 700 12px/1 var(--body-font); color: #1f2226; }
.score-green { background: #6fbf73; }
.score-yellow { background: #f7bb30; }
.score-red { background: #e0695f; }
.contact-row .score { margin-left: auto; align-self: center; }
.detail-title .score { margin-right: 6px; vertical-align: 1px; }

/* Comparison dialog: source of a found value, below it and apart from it */
.compare-right-col { display: grid; gap: 4px; align-content: start; min-width: 0; }
.compare-source { font-size: 12px; color: var(--muted); padding: 0 4px; overflow-wrap: anywhere; }
.compare-source a { color: var(--muted); text-decoration: underline dotted; }
.compare-source a:hover { color: var(--accent); }

/* Confirmation with two buttons; AI state on inbox cards */
.confirm-dialog { width: min(420px, calc(100vw - 32px)); }
.confirm-dialog h2 { font-size: 20px; margin-bottom: 8px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.confirm-actions .btn { min-width: 120px; }
.btn.danger { background: #c9534a; border-color: #c9534a; color: #fff; }
.btn.danger:hover { background: #b3453d; }
.inbox-ai-state { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inbox-ai-state[hidden] { display: none; }
.inbox-ai-actions { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.inbox-ai-q { display: block; width: 100%; }
.inbox-ai-question { padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; }

/* Tooltip layer on devices with a mouse (workspace.js): always in the foreground, above right of the pointer */
html.js-tips [data-tip]::after { display: none; }
.tip-layer { position: fixed; inset: auto; margin: 0; z-index: 2147483647; max-width: 280px; width: max-content; padding: 8px 10px; border-radius: 8px;
  background: #1E2125; color: #fff; border: 1px solid #555B63; box-shadow: 0 8px 24px rgba(0,0,0,.45); font: 400 13px/1.35 var(--body-font);
  text-align: left; white-space: normal; pointer-events: none; overflow: visible; }
.tip-layer[hidden] { display: none; }

/* Progress bar of an AI job */
.ai-progress { height: 6px; border-radius: 3px; background: var(--line, #555B63); overflow: hidden; margin: 8px 0; }
.ai-progress[hidden] { display: none; }
.ai-progress > span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .2s linear; }
.ai-progress.done > span { transition: width .3s ease-out; }

/* Outbox and writing a mail */
.outbox-list { padding: 0; }
.outbox-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.outbox-item:last-child { border-bottom: 0; }
.outbox-main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.outbox-subject { overflow-wrap: anywhere; }
.outbox-when { font-size: 13px; color: var(--muted); }
.error-text { color: #e0695f; }
.outbox-body summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.outbox-body pre { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 6px 0 0; padding: 10px; background: var(--list); border-radius: 8px; }
.outbox-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.outbox-empty { padding: 14px; margin: 0; }
.outbox-settings { margin-top: 16px; }
.outbox-settings summary { cursor: pointer; font-weight: 600; }
.outbox-settings form { display: grid; gap: 10px; margin-top: 10px; max-width: 360px; }
.compose-dialog { width: min(720px, calc(100vw - 24px)); }
.compose-dialog textarea { min-height: 220px; font: inherit; }
.compose-when { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.compose-when legend { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.compose-option { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; }
@media (max-width: 700px) { .outbox-item { flex-direction: column; } .outbox-actions { justify-content: flex-start; } }

/* Tabs as links (outbox: not sent / sent) look like the button tabs */
.tabs a[role="tab"] { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.tabs a[role="tab"][aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Test mail next to "Check connection" */
.test-mail-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.test-mail-form input { min-width: 220px; flex: 1; }

/* Actions of an integration: buttons of the same size next to each other */
.inline-forms { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.inline-forms form, .inline-forms .btn { width: 100%; }
@media (max-width: 560px) { .inline-forms { grid-auto-flow: row; } }

/* Duplicate entries: descriptions in the list, profiles in the comparison dialog */
.dupe-names { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.dupe-side { display: grid; gap: 2px; min-width: 0; }
.dupe-side small { font-size: 12px; overflow-wrap: anywhere; }
.compare-profile-row { border-bottom: 0; padding-bottom: 0; }
.compare-profile { list-style: none; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--list); font-size: 13px; color: var(--muted); display: grid; gap: 2px; }

/* Picker instead of a tab row (data care): with more than 5 sections with open items, and always on phones */
.tabs-picker { display: none; position: relative; }
.tabs-picker.active { display: flex; }
.tabs-picker.active + .tabs { display: none; }
.tabs-picker-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.tabs-picker-button .counter { margin-left: 0; }
.tabs-picker-arrow { color: var(--accent); }
.tabs-picker-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; display: grid; gap: 2px; min-width: 300px; max-height: 70vh; overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-large); background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.tabs-picker-menu[hidden] { display: none; }
.tabs-picker-group { margin: 8px 8px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tabs-picker-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.tabs-picker-item:hover, .tabs-picker-item:focus-visible { background: var(--accent-soft); }
.tabs-picker-item[aria-current] { color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.tabs-picker-item .counter { margin-left: 0; }
.tabs-picker-done > summary { min-height: 44px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); cursor: pointer; }
.tabs-picker-done .tabs-picker-item { color: var(--muted); }
.tabs .tab-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--muted); text-decoration: none; font-size: 14px; }
.tabs .tab-link:hover { color: var(--accent); }
.tabs-next { margin: 0; }
@media (max-width: 1023px) {
  .tabs-picker { display: flex; }
  .tabs-picker + .tabs { display: none; }
  .tabs-picker-menu { right: 0; min-width: 0; }
}
/* Optional "also put on a work list" above the buttons of data care dialogs */
.worklist-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.worklist-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--muted); font-size: 14px; }
.worklist-select, .worklist-name { min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; }
.worklist-name { flex: 1 1 200px; }
/* Role filter: five segments in one row; on narrow phones in two rows */
@media (max-width: 479px) { .segmented { grid-template-columns: repeat(min(3, var(--segments, 5)), minmax(0, 1fr)); } }

/* Role filter labels a little smaller when the list column is narrow (small laptops) */
.segmented { container-type: inline-size; }
@container (max-width: 460px) { .segment-label { font-size: 13px; } .segmented button { padding-inline: 1px; } }

/* A "?" button as text (contact view: what is still missing for 100 %); the tooltip keeps its line breaks */
.help.help-text { display: inline; width: auto; height: auto; min-width: 0; border: 0; border-radius: 0; color: var(--accent); font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.help.help-text::after { left: 0; right: auto; white-space: pre-line; }
.tip-layer { white-space: pre-line; }
/* Contact persons of a company: "Remove link" at the end of the line */
.link-list [data-people="remove"] { margin-left: 8px; }

/* Link button in a choice step (e.g. "Open in Telegram") */
.choice-link { margin: 12px 0 4px; }
.choice-link .btn { display: inline-flex; align-items: center; text-decoration: none; }

/* Choice dialog: search and list with some air (the content of <details> does not take part in its grid in every
 browser), the focus ring of the search fully visible, long words wrap inside the tile instead of running over it */
.choice-more > .choice-search { display: block; margin: 12px 0 10px; }
.choice-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.choice-search-hint { margin: 0 0 6px; }
.choice-more-list { margin-top: 4px; padding: 4px; }
.choice-tile { min-width: 0; }
.choice-label { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

/* "Check messengers": one column per messenger, stacked on phones */
.messenger-check { width: min(920px, calc(100vw - 32px)); }
.messenger-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 4px; }
.messenger-check-column { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-large); }
.messenger-check-column h3 { margin: 0; }
.messenger-check-column .btn { justify-self: start; text-decoration: none; }
.messenger-check-answers { grid-template-columns: 1fr; gap: 8px; }
.messenger-check-answers .tile { min-height: 48px; padding: 8px 12px; }
@media (max-width: 719px) { .messenger-check-grid { grid-template-columns: 1fr; } }
/* Contact list: the third row of buttons; employees indented under their company */
.list-actions { margin-top: -2px; }
.segmented button[hidden] { display: none; }
.contact-row.row-child { padding-left: 34px; position: relative; }
.contact-row.row-child::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 50%; width: 8px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); border-bottom-left-radius: 4px; }
.contact-row.row-child .avatar { transform: scale(.85); }
/* Sort selection right of the (i) in the list head */
.list-sort { min-height: 32px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }

/* List head meta line stays one line (user, 2026-09-30): the sort selection on the right, "as of …" gives way first */
.list-meta { flex-wrap: nowrap; gap: 8px; }
.list-meta [data-synced] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-meta [data-total], .list-meta [data-reset] { white-space: nowrap; }
.list-meta .list-sort-btn { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--muted); cursor: pointer; }
.list-meta .list-sort-btn:hover, .list-meta .list-sort-btn:focus-visible { color: var(--accent); border-color: var(--accent); }

/* Labelled fields in the choice dialog (intake wizard: name, contact details, address) */
.choice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 12px 0; }
.choice-fields .field { display: grid; gap: 4px; min-width: 0; }
.choice-fields .field.wide { grid-column: 1 / -1; }
.choice-fields .field > span { font-size: 13px; color: var(--muted); }
.choice-fields input, .choice-fields select, .choice-fields textarea { width: 100%; min-height: 44px; box-sizing: border-box; }
.choice-segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-segmented label { position: relative; }
.choice-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.choice-segmented span { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.choice-segmented input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.choice-segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .choice-fields { grid-template-columns: minmax(0, 1fr); } }
.qualification-expired { color: #ff8a8a; }
.qualification-soon { color: var(--accent); }
.choice-fields .field-hint { font-size: 12px; color: var(--muted); }
/* Bookmarklet: the card on the inbox page and its small capture window */
.bookmarklet-button { cursor: grab; }
.bookmarklet-dialog { width: min(520px, calc(100vw - 32px)); }
.bookmarklet-dialog h2 { padding-right: 44px; margin-bottom: 10px; }
.bookmarklet-dialog p { margin: 0 0 12px; }
.bookmarklet-drag { display: flex; justify-content: center; padding: 8px 0; }
.capture-photo-use .choice-segmented { margin-top: 4px; }
body.capture-web { background: var(--bg, #3F444B); min-height: 100dvh; }
.capture-web-main { max-width: 620px; margin: 0 auto; padding: 16px; }
.capture-web-form, .capture-web-done { display: grid; gap: 12px; }
.capture-web-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; }
.capture-web-title img { width: 28px; height: 28px; }
.capture-web-page { margin: 0; overflow-wrap: anywhere; }
.capture-web-pictures { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 4px; }
.capture-web-picture { position: relative; display: grid; gap: 2px; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--list, #42474E); }
.capture-web-thumb { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.capture-web-thumb img { width: 100%; height: 100%; object-fit: cover; }
.capture-web-none { padding: 6px; text-align: center; font-size: 13px; color: var(--muted); }
.capture-web-size { padding: 0 4px 4px; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; }
.capture-web-picture:has(input:checked) .capture-web-size { color: var(--accent); font-weight: 600; }
.capture-web-picture input { position: absolute; opacity: 0; pointer-events: none; }
.capture-web-picture:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.capture-web-picture:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.capture-web-actions { display: grid; gap: 8px; }
/* The contact photo large: small pictures (e.g. 200 px from LinkedIn) are shown at a size one recognises the person. */
.photo-view > img { width: min(100%, 560px); height: auto; margin: 0 auto; display: block; border-radius: 8px; }
/* Bookmarklet window: compact, it opens as a small window */
.capture-web-main { padding: 12px; }
.capture-web-form { gap: 10px; }
.capture-web-pictures { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.capture-web-done { margin: 40px 0; text-align: center; font-size: 20px; font-weight: 600; }
/* Pull down to reload (home-screen app): the arrow that follows the finger */
.pull-refresh { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; z-index: 1000; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface, #4A4F57); border: 2px solid var(--border); color: var(--text); font-size: 20px; opacity: 0; transform: translate(-50%, -50px); pointer-events: none; transition: opacity .15s; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.pull-refresh.ready { border-color: var(--accent); color: var(--accent); }
.pull-refresh.loading { opacity: 1; transform: translate(-50%, 40px); animation: pull-refresh-spin .8s linear infinite; }
@keyframes pull-refresh-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* Follow-ups (phase 2): lists on "Follow-ups", "Today" and in the contact view */
.follow-up-group { margin: 14px 0 6px; font-size: 15px; }
.follow-up-group.is-overdue { color: var(--danger, #e5736b); }
.follow-up-list { list-style: none; margin: 0; padding: 0; }
.follow-up { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.follow-up:last-child { border-bottom: 0; }
.follow-up-main { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; color: inherit; text-decoration: none; }
.follow-up-main small { color: var(--muted); }
.follow-up.is-overdue .follow-up-main small { color: var(--danger, #e5736b); }
.follow-up-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.follow-up-state { color: var(--muted); }
.follow-up-state.is-open { color: var(--accent); }

/* Templates (phase 6, first version) */
.templates .template-list { display: grid; align-content: start; }
.template-row { display: grid; gap: 2px; border-radius: 8px; color: inherit; text-decoration: none; }
.template-row small { color: var(--muted); }
.template-row:hover { background: var(--accent-soft); }
.template-row.is-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.templates .editor { display: grid; }
.templates .editor-head { grid-template-columns: 2fr 1fr auto; align-items: end; }
.template-kind { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.field-label { font-size: 13px; color: var(--muted); }
.template-audience { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px 14px; display: grid; gap: 10px; }
.template-audience legend { padding: 0 6px; font-weight: 600; }
.template-facet summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; }
.template-facet .chips { padding: 6px 0 4px; }
.chip-check { display: inline-flex; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; cursor: pointer; }
.chip-check input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.template-body textarea { min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.template-body .placeholder-btn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.template-body [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.template-preview { min-height: 320px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); line-height: 1.55; }
.template-preview .placeholder { padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.templates .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.templates .actions [data-template-delete] { margin-left: auto; color: var(--danger); }
@media (max-width: 1023px) {
  .templates { grid-template-columns: 1fr; }
  .templates .editor-head { grid-template-columns: 1fr; }
}

/* Template editor (TipTap, WYSIWYG) */
.template-body .toolbar { position: relative; }
.toolbar-end { margin-left: auto; }
.placeholder-bar { gap: 6px; }
.template-editor .ProseMirror { min-height: 320px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); line-height: 1.55; outline: none; }
.template-editor .ProseMirror:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.template-editor .ProseMirror p { margin: 0 0 .8em; }
.template-editor .ProseMirror h2 { font-size: 1.3em; margin: .6em 0 .4em; }
.template-editor .ProseMirror ul, .template-editor .ProseMirror ol { padding-left: 1.4em; margin: 0 0 .8em; }
.template-editor .ProseMirror blockquote { margin: 0 0 .8em; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }
.template-editor .ProseMirror a { color: var(--accent); text-decoration: underline; }
.template-editor .placeholder { display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; line-height: 1.5; user-select: all; }
.template-editor .placeholder.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.template-source { min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.template-body .toolbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.template-body .toolbar button:disabled { opacity: .4; cursor: default; }

/* Sections for Sie and du in templates: their markers in their own colours */
.template-editor .placeholder[data-placeholder="formal"], .template-editor .placeholder[data-placeholder="/formal"] { background: rgba(120, 170, 255, .16); color: #8fb6ff; }
.template-editor .placeholder[data-placeholder="informal"], .template-editor .placeholder[data-placeholder="/informal"] { background: rgba(110, 200, 140, .16); color: #86d39f; }
.placeholder-bar .form-btn[data-section="formal"] { color: #8fb6ff; }
.placeholder-bar .form-btn[data-section="informal"] { color: #86d39f; }

/* Under the name of a customer: offers (blue), orders (bright green), invoices (orange) from the job index */
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.job-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; font: 700 12px/1 var(--body-font); color: #1f2226; }
.job-offers { background: #5b9cff; }
.job-orders { background: #39ff6e; }
.job-invoices { background: #ff9a2e; }
.job-count.is-zero { opacity: .35; }

/* Possible duplicates: counters of offers, orders, invoices under the names, "stays" at the one with jobs */
.dupe-jobs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.badge-stays { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }

/* Letterhead editor: HTML source and live preview side by side (below each other on the phone) */
.letterhead-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.letterhead-split .template-source { min-height: 480px; }
.letterhead-preview { width: 100%; min-height: 480px; border: 1px solid var(--border); border-radius: var(--r); background: #ffffff; }
@media (max-width: 1023px) { .letterhead-split { grid-template-columns: 1fr; } }

/* Writing a mail: template and letterhead above the subject, editor for the text */
.compose-template { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.compose-letterhead { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.compose-letterhead select { min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--ground); color: inherit; }
.compose-editor .ProseMirror { min-height: 220px; }
.is-busy { opacity: .5; pointer-events: none; }

/* Passkey assistant (app/profile.blade.php, taken over from Videoworkers) */
.pkw-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pkw-tiles .tile small { margin-top: 2px; display: block; }
.pkw-tips { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }

/* Collecting mailbox (phase 8): mails in the inbox */
.inbox-mail-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-inbox { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.mail-inbox h3 { margin: 0; }
.mail-inbox-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.mail-inbox-form .field { min-width: 220px; }

/* Choice dialog: excerpt of a longer text (e.g. the captured mail in the intake wizard), at most 10 lines, scrollable */
.choice-excerpt { display: grid; gap: 4px; margin-top: 6px; }
.choice-excerpt-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.choice-excerpt-text { max-height: calc(10 * 1.45em); overflow-y: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ground); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.choice-excerpt-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Choice dialog: overview of what is there (intake wizard, start step) */
.choice-facts { display: grid; gap: 2px; margin: 10px 0 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ground); }
.choice-fact { display: grid; grid-template-columns: 22px minmax(110px, 160px) minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 14px; padding: 2px 0; }
.choice-fact::before { content: "✓"; color: var(--success); font-weight: 700; }
.choice-fact.missing::before { content: "–"; color: var(--muted); }
.choice-fact.soft::before { content: "~"; color: var(--muted); }
.choice-fact.warn::before { content: "!"; color: var(--accent); }
.choice-fact dt { color: var(--muted); }
.choice-fact dd { margin: 0; overflow-wrap: anywhere; }
.choice-fact.missing dd { color: var(--muted); }
@media (max-width: 520px) { .choice-fact { grid-template-columns: 22px minmax(0, 1fr); } .choice-fact dd { grid-column: 2; } }

/* My profile: the Eventworx user profile (display only) */
.ew-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ew-profile-head h2 { margin: 0; }
.ew-profile h3 { margin: 20px 0 8px; font-size: 15px; color: var(--accent); }
.ew-signature summary { cursor: pointer; color: var(--accent); min-height: 32px; display: inline-flex; align-items: center; }
.ew-signature iframe { display: block; width: 100%; min-height: 260px; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ew-profile-meta { margin-top: 18px; font-size: 13px; }
/* Data care: "Complete with AI" in the table (start or hide) */
.care-text .care-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Classification values (user, 2026-10-14): one line per value with a separator; the switch ("no automatic mails")
   sits before the arrows, however many buttons a row has (merge only for some facets). */
.classification-settings .list-row:not(.skill-row),
.classification-settings .list-row:not(.skill-row):has(.no-mail) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.classification-settings .list-row:not(.skill-row) > input[data-field="label"] { flex: 1 1 220px; }
.classification-settings .list-row:not(.skill-row) > .usage-count,
.classification-settings .list-row:not(.skill-row) > .icon-button { flex: 0 0 44px; }
.classification-settings .list-row:not(.skill-row) > .no-mail { flex: 0 0 auto; padding: 0 6px; }
.classification-settings .list-editor > li + li { border-top: 1px solid var(--line); padding-top: 6px; }
@media (max-width: 700px) {
  .classification-settings .list-row:not(.skill-row) > .no-mail { order: 5; flex-basis: 100%; min-height: 32px; }
}

/* Widgets on "Today" (user, 2026-10-14) */
.widgets { margin-top: 24px; }
.widgets-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.widgets-head .section-title { margin: 0; }
.widgets-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.widget { margin: 0; display: grid; gap: 8px; }
.widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.widget-head .widget-edit { flex: none; min-width: 32px; min-height: 32px; font-size: 15px; }
.widget-head h2 { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.widget-head h2 a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; color: var(--accent); text-decoration: none; }
.widget-head h2 a:hover { text-decoration: underline; }
.widget-tools { display: flex; justify-content: center; gap: 8px; }
.widget-tools .icon-button { min-width: 34px; min-height: 34px; font-size: 16px; }
.widget-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.widget-empty { grid-column: 1 / -1; }
@media (hover: hover) {
  .widget .widget-tools { opacity: .35; transition: opacity .15s; }
  .widget:hover .widget-tools, .widget:focus-within .widget-tools { opacity: 1; }
}.add-circle { flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 28px/1 var(--heading-font); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .15s; }
.add-circle:hover, .add-circle:focus-visible { transform: scale(1.06); }/* Dragging widgets like on iOS: long press (touch) or drag (mouse); the others wiggle and make room. */
.widget { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.widget.dragging { cursor: grabbing; z-index: 20; position: relative; box-shadow: 0 12px 28px rgba(0,0,0,.45); opacity: .95; transition: none; }
.widgets-grid.sorting .widget:not(.dragging) { animation: widget-wiggle .28s ease-in-out infinite alternate; }
.widgets-grid.sorting .widget:nth-child(2n):not(.dragging) { animation-delay: -.14s; }
@keyframes widget-wiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .widgets-grid.sorting .widget:not(.dragging) { animation: none; } }/* Built-in widget "follow-ups due" takes two columns where there is room; link titles fill the width. */
.widget-link .widget-head h2 a.fitted { flex-wrap: nowrap; align-items: center; }
.widget-link .widget-head h2 a.fitted .widget-title { white-space: nowrap; line-height: 1.05; }
.widget a, .widget img { -webkit-user-drag: none; }/* Widgets in columns (user, 2026-10-14): js/widgets.js builds as many columns as fit (at most 4); an empty column
   is a drop target while sorting. */
.widgets-grid.in-columns { display: flex; align-items: flex-start; gap: 12px; }
.widgets-col { flex: 1 1 0; min-width: 0; display: grid; gap: 12px; align-content: start; min-height: 60px; border-radius: var(--r); }
.widgets-grid.sorting .widgets-col { outline: 2px dashed var(--border); outline-offset: 4px; }
.widgets-col > .widget-empty { margin: 0; }/* Link widgets: title and note centred, no arrow (user, 2026-10-14). */
.widget-link .widget-head h2 a, .widget-link .widget-head h2 a.fitted { justify-content: center; text-align: center; }
.widget-link .widget-body { text-align: center; }/* While dragging: the dashed slot shows where the widget lands; the widget floats above everything. */
.widget-slot { border: 2px dashed var(--accent); border-radius: var(--r); background: var(--accent-soft); }
.widget.dragging { z-index: 1000; pointer-events: none; }/* Note widgets as post-its (user, 2026-10-14): paper colour, dark writing, a slight tilt and a shadow. */
.widget.postit { --postit: #FFE97A; --postit-edge: #F2D54A; background: linear-gradient(180deg, var(--postit-edge) 0 18px, var(--postit) 18px); color: #2B2A26; border: 0; border-radius: 2px 2px 14px 2px; box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 -10px 18px rgba(0,0,0,.04); padding-top: 26px; transform: rotate(-.6deg); }
.widget.postit:nth-child(2n) { transform: rotate(.5deg); }
.widget.postit-green { --postit: #C5EFA4; --postit-edge: #A9DE82; }
.widget.postit-pink { --postit: #FFC2D4; --postit-edge: #F7A3BC; }
.widget.postit .widget-head h2 { color: #2B2A26; text-transform: none; letter-spacing: 0; font-size: 18px; }
.widget.postit .widget-body { color: #2B2A26; font-size: 15px; line-height: 1.45; }
.widget.postit .icon-button { color: rgba(43,42,38,.7); border-color: rgba(43,42,38,.25); }
.widget.postit .icon-button:hover { color: #9B1C1C; border-color: #9B1C1C; }
.widgets-grid.sorting .widget.postit:not(.dragging) { animation: widget-wiggle .28s ease-in-out infinite alternate; }
.widget.postit.dragging { transform: none; }
/* Colour choice in the editor: a swatch before each label. */
.choice-segmented input[value="yellow"] + span::before, .choice-segmented input[value="green"] + span::before, .choice-segmented input[value="pink"] + span::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; }
.choice-segmented input[value="yellow"] + span::before { background: #FFE97A; }
.choice-segmented input[value="green"] + span::before { background: #C5EFA4; }
.choice-segmented input[value="pink"] + span::before { background: #FFC2D4; }/* The edit button at the top right (user, 2026-10-14); on post-its in the colour of the writing. */
@media (hover: hover) { .widget .widget-edit { opacity: .4; transition: opacity .15s; } .widget:hover .widget-edit, .widget:focus-within .widget-edit { opacity: 1; } }
.widget.postit .widget-edit { color: rgba(43,42,38,.7); border-color: rgba(43,42,38,.25); }
.widget-link .widget-head h2 { text-align: center; }
/* Follow-ups due: paging */
.fu-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; }
.fu-pager .icon-button { min-width: 36px; min-height: 36px; }
.fu-pager .icon-button:disabled { opacity: .35; cursor: default; }
.fu-pager a { color: var(--accent); }.widget .widget-edit:hover { color: var(--accent); border-color: var(--accent); }
/* Settings → salutations: "only without first name" under the group (user, 2026-10-14). */
.salutation-group { display: grid; gap: 4px; align-content: start; }
.salutation-scope { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
/* Link widgets only on some devices (user, 2026-10-14): computer, phone, iPhone, Android (js/widgets.js sets the platform). */
html[data-platform="desktop"] .widget:is([data-show="mobile"], [data-show="ios"], [data-show="android"]),
html[data-platform="ios"] .widget:is([data-show="desktop"], [data-show="android"]),
html[data-platform="android"] .widget:is([data-show="desktop"], [data-show="ios"]) { display: none; }
/* iPhone web app (user, 2026-10-14): dialogs must never make the page wider or zoom it, otherwise the page stays
   shifted or zoomed after closing and the fixed bar at the bottom moves with it.
   1. Fields with less than 16 px make iOS zoom in on tapping them – on touch devices they get 16 px.
   2. Nothing in a dialog may stick out sideways; the dialog scrolls in itself instead of the page.
   3. The page itself never scrolls sideways. */
@media (pointer: coarse) {
  input, select, textarea, [contenteditable="true"], .ProseMirror { font-size: 16px !important; }
}
dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
/* The content grids of dialogs are never wider than the dialog (a long address would widen the column otherwise). */
dialog form, dialog .wizard-head { grid-template-columns: minmax(0, 1fr); min-width: 0; }
dialog .tiles { min-width: 0; }
dialog :is(input, select, textarea, img, table, pre) { max-width: 100%; }
html, body { overflow-x: clip; }
/* Who a dialog is about (user, 2026-10-14), above the step and the title. */
.choice-subject { margin: 2px 0 4px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.choice-subject::before { content: '👤 '; }
/* "Today" uses the whole width (user, 2026-10-14): on full HD four columns already fill it; above, js/widgets.js zooms. */
.page[data-view="today"] { max-width: none; }
/* Suggestions for data care hidden for this contact (user, 2026-10-14). */
.care-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.care-head-actions button.quiet-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* Addresses in notes are links (user, 2026-10-14). */
.widget-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.widget-body a:hover { color: var(--accent); }
.widget.postit .widget-body a:hover { color: #9B1C1C; }
/* Product name: the brand "Arideo" bold, the product lighter (user, 2026-10-17). */
.brand-product { font-weight: 400; opacity: .8; }

/* Choice of the mail sending (Settings → Integrations): two large radio tiles. */
.transport-choice { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.transport-choice legend { margin-bottom: 8px; font-weight: 600; }
.radio-tile { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-height: 44px; }
.radio-tile:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(247,187,48,.14)); }
.radio-tile input { margin-top: 4px; accent-color: var(--accent); }
.settings-tile.draft { border-style: dashed; opacity: .75; }

/* ---- Filing cabinet (phase 1, D6) ---- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.level-label { font-size: 14px; font-weight: 400; display: block; }
.sync-state { font-size: 13px; }
.cabinet-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.cabinet-tile { display: grid; gap: 6px; padding: 22px 18px; min-height: 110px; border-radius: 12px; background: var(--list); border: 1px solid var(--border); color: inherit; text-decoration: none; box-shadow: inset 0 -6px 0 var(--dark); }
.cabinet-tile:hover, .cabinet-tile:focus-visible { border-color: var(--accent); }
.cabinet-tile-name { font-family: var(--heading-font); font-size: 20px; font-weight: 700; }

/* Binders as spines on a shelf. */
.shelf { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 18px 16px 0; margin: 16px 0 24px; border-bottom: 10px solid var(--dark); border-radius: 4px; min-height: 280px; }
.spine { position: relative; width: 74px; height: 260px; border-radius: 6px 6px 2px 2px; background: var(--spine, var(--accent)); color: var(--on-accent); text-decoration: none; display: flex; flex-direction: column; align-items: center; box-shadow: inset -8px 0 0 rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.35); transition: transform .15s; }
.spine:hover, .spine:focus-visible { transform: translateY(-8px); }
.spine-label { margin-top: 16px; padding: 10px 6px; width: 54px; height: 150px; background: #F4F1E8; color: #2A2D31; border-radius: 3px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--heading-font); font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; }
.spine-hole { margin-top: auto; margin-bottom: 22px; width: 26px; height: 26px; border-radius: 50%; border: 4px solid rgba(0,0,0,.25); background: rgba(255,255,255,.18); }
@media (max-width: 600px) { .spine { width: 60px; height: 220px; } .spine-label { width: 44px; height: 130px; font-size: 13px; } .shelf { min-height: 240px; } }

/* Dividers as coloured tabs. */
.divider-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 16px 0 24px; }
.divider-tab { display: grid; gap: 4px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); border-left: 10px solid var(--tab, var(--accent)); background: var(--list); color: inherit; text-decoration: none; min-height: 64px; }
.divider-tab:hover, .divider-tab:focus-visible { border-color: var(--accent); border-left-color: var(--tab, var(--accent)); }

/* Documents. */
.doc-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.doc-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--list); border: 1px solid var(--line); }
.doc-icon { display: grid; place-items: center; height: 40px; border-radius: 6px; background: var(--dark); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.doc-icon.doc-pdf { color: #FF8A80; }
.doc-icon.doc-image { color: #4CC7C0; }
.doc-name { min-width: 0; display: grid; }
.doc-name a { color: inherit; text-decoration: none; overflow-wrap: anywhere; font-weight: 600; }
.doc-name a:hover { color: var(--accent); }
.doc-description { font-size: 14px; }
.doc-meta { font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) { .doc-row { grid-template-columns: 40px minmax(0, 1fr); } .doc-meta { grid-column: 2; white-space: normal; } }

/* Page view like a paper binder (D11). */
.binder-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 12px 16px 16px; box-sizing: border-box; }
.binder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.binder-position { font-size: 13px; }
.binder { flex: 1; min-height: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.binder-nav { height: 100%; max-height: 240px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 36px; cursor: pointer; }
.binder-nav:hover { background: var(--list); color: var(--accent); }
.binder-spread { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.binder-spread.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet { margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
.sheet-paper { min-height: 0; display: grid; place-items: center; overflow: hidden; }
.binder-spread.two .sheet:first-child .sheet-paper { justify-items: end; }
.binder-spread.two .sheet:last-child .sheet-paper { justify-items: start; }
.sheet-paper canvas, .sheet-paper img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45); user-select: none; }
.sheet-loading { color: var(--muted); }
.sheet-other { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 32px 24px; background: #F4F1E8; color: #2A2D31; border-radius: 4px; width: min(100%, 360px); aspect-ratio: 1 / 1.414; align-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.sheet-other .muted { color: #555B63; }
.sheet-divider .sheet-paper { width: 100%; height: 100%; }
.divider-sheet-tab { display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 1 / 1.414; background: var(--accent); color: var(--on-accent); font-family: var(--heading-font); font-size: 26px; font-weight: 700; border-radius: 4px 18px 18px 4px; box-shadow: 0 2px 10px rgba(0,0,0,.45); padding: 20px; text-align: center; }
.sheet-footer { justify-self: center; max-width: 100%; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 8px; border-radius: 6px; }
.sheet-footer:hover { color: var(--accent); background: var(--list); }
@media (max-width: 1023px) { .binder-page { height: calc(100dvh - 64px - 56px); padding: 8px; } .binder { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 4px; } .binder-nav { font-size: 28px; } }

/* Folder picker for the base folder (Settings → Nextcloud). */
.folder-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.folder-picker { width: min(560px, calc(100vw - 16px)); }
.folder-picker .breadcrumb button { min-height: 32px; }
.folder-list { list-style: none; margin: 8px 0; padding: 0; max-height: 45vh; overflow-y: auto; display: grid; gap: 4px; }
.folder-item { width: 100%; text-align: left; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--list); color: inherit; font: inherit; cursor: pointer; }
.folder-item::before { content: "📁 "; }
.folder-item:hover, .folder-item:focus-visible { border-color: var(--accent); }
.folder-new { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 12px 0; }
.folder-picker .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.link-button { border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; padding: 4px; text-decoration: underline; }
.link-button:hover { color: var(--accent); }

/* Folder structure (Settings): cabinet › binder › divider as a tree. */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 22px; border-left: 1px dashed var(--border); margin-left: 10px; }
.tree-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 4px; min-height: 44px; }
.tree-row a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.tree-row a:hover { color: var(--accent); }
.tree-row .muted { font-size: 13px; }
.tree-kind { font-size: 12px; color: var(--muted); margin-right: 4px; }
.tree-row.level-1 a { font-weight: 700; font-size: 17px; }
.structure > .btn.primary { margin-top: 12px; }
@media (max-width: 600px) { .tree-row { grid-template-columns: minmax(0, 1fr) auto; } .tree-row .muted { grid-column: 1; } }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Office symbols (D6): next to text they sit on the line, in buttons and the breadcrumb in a muted tone. */
.breadcrumb a, .btn, .section-title, .level-label, .divider-tab strong, .tree-row a { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb svg, .level-label svg, .section-title svg { color: var(--accent); flex-shrink: 0; }
.tree-kind { display: inline-flex; color: var(--accent); margin-right: 2px; }
.divider-tab strong svg { color: var(--tab, var(--accent)); flex-shrink: 0; }
.cabinet-tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.cabinet-tile .muted { grid-column: 2; }
.cabinet-tile-icon { grid-row: span 2; color: var(--accent); display: flex; }
.settings-tile strong { display: inline-flex; align-items: center; gap: 8px; }
.settings-tile strong svg { color: var(--accent); }

.app-version { margin-top: 32px; font-size: 13px; }