/* Shared tokens, dialog treatment and responsive layouts; loaded after page styles. */
:root {
  --text: #0f172a; --text-2: #334155; --text-3: #475569; --muted: #64748b; --faint: #94a3b8;
  --border-strong: #cbd5e1; --border: #e2e8f0;
  --surface: #fff; --surface-1: #f8fafc; --surface-2: #f1f5f9;
  --brand: #4f46e5; --brand-dark: #4338ca; --brand-ink: #3730a3; --brand-400: #818cf8; --brand-500: #6366f1;
  --brand-soft: #eef2ff; --brand-soft-2: #e0e7ff; --brand-border: #c7d2fe; --brand-focus: #a5b4fc;
  --danger: #b91c1c; --danger-500: #dc2626; --danger-soft: #fef2f2;
  --success: #166534; --success-soft: #dcfce7; --warning: #92400e; --warning-soft: #fef3c7;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --shadow-dialog: 0 24px 80px -16px rgb(15 23 42 / 35%);
}
body { overflow-wrap: anywhere; }
body:has(dialog[open]) { overflow: hidden; }
button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgb(99 102 241 / 12%);
}
.page, .row > *, .filters > *, .section-controls > *, .settings-panel > *, .kb-col > * { min-width: 0; }
.nav .links { min-width: 0; }
#login-screen { width: min(340px, calc(100% - 32px)); margin-bottom: 24px; }

dialog {
  --dialog-pad-y: 28px; --dialog-pad-x: 28px;
  width: min(520px, 94vw); color: var(--text);
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px);
  padding: 28px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow-dialog);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-gutter: stable; line-height: 1.5;
}
dialog::backdrop { background: rgb(15 23 42 / 48%); backdrop-filter: blur(4px); }
dialog h2 { font-size: 20px; line-height: 1.35; letter-spacing: -.025em; padding-right: 36px; margin: 0 0 22px; }
dialog .dialog-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 10px; font-size: 24px; line-height: 1;
}
dialog .dialog-close:hover { background: var(--border); color: var(--text); }
dialog label { font-weight: 500; margin-bottom: 16px; }
dialog :is(input, textarea, select, button.search-select) {
  border-radius: 10px; background: var(--surface); min-width: 0;
}
dialog :is(input:not([type=checkbox]):not([type=radio]), select, button.search-select) { min-height: 42px; }
dialog textarea { min-height: 100px; line-height: 1.5; }
dialog .row { gap: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; }
.dialog-actions .danger { margin-right: auto; }
.dialog-error { color: var(--danger); font-size: 13px; }
dialog .dialog-actions {
  gap: 8px; flex-wrap: wrap; padding-top: 18px; margin-top: 20px;
  border-top: 1px solid var(--border);
}
dialog .dialog-actions button { min-height: 40px; padding: 9px 16px; font-weight: 600; border-radius: 10px; }
dialog button.secondary { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
dialog button.secondary:hover { background: var(--border); }
dialog .dialog-error:not(:empty) { padding: 10px 12px; margin: 0 0 16px; border-radius: 8px; background: var(--danger-soft); }
dialog .dialog-error:empty { min-height: 0; margin: 0; }
dialog .entity-tab-list { margin-top: 0; gap: 6px; }
dialog .entity-tab-list button { min-height: 40px; }
.object-card, .doc-title, .chat-bubble, .msg { overflow-wrap: anywhere; min-width: 0; }
.dlg-list { grid-template-columns: minmax(0, 1fr); }
.dlg-row { min-width: 0; }
.rt-bot-connect { width: 460px; }
.rt-bot-connect p { font-size: 14px; color: var(--muted); }
.rt-bot-connect img { height: auto; }
dialog.rt-bot-history { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.finance-add { grid-template-columns: minmax(80px, 1fr) minmax(110px, 1fr) 40px; gap: 8px; padding: 12px; }
.finance-add input[name=comment] { grid-column: 1 / 3; grid-row: 2; }
.finance-add > button[type=submit] { grid-column: 3; grid-row: 1 / 3; }
.finance-add > select.search-select-native { grid-column: auto; }
.finance-add button.search-select { padding: 8px; font-size: 12px; }
.finance-heading { gap: 8px; flex-wrap: wrap; }
.finance-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
.peek { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: hidden; }
.thread-body { min-height: 100px; overscroll-behavior: contain; }
.msg audio { max-width: 100%; }

@media (min-width: 721px) and (max-width: 1280px) {
  .nav .links, .nav .toolbar { width: 100%; }
  .nav.open .links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .kb-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
  .kb-docs, .kb-chat, .kb-debug { width: 100%; min-width: 0; }
  .kb-chat { height: min(680px, 80dvh); }
  .kb-debug { height: auto; max-height: 70dvh; }
  .doc-list { max-height: 320px; }
}
@media (max-width: 720px) {
  .page { padding: 16px 12px 28px; }
  button { min-height: 40px; }
  input, textarea, select, button.search-select, .search-select__panel .search-select__search {
    font-size: 16px !important;
  }
  input:not([type=checkbox]):not([type=radio]), select, button.search-select { min-height: 44px; }
  .nav { padding: 10px 12px; }
  .nav-burger { min-width: 40px; }
  .nav .links a { min-height: 44px; display: flex; align-items: center; }
  .section-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .section-actions > button { flex: 1 1 auto; }
  .row { flex-wrap: wrap; }
  .row label { flex: 1 1 180px; min-width: 0; }
  .crm-head { gap: 12px; }
  .crm-search { flex: 1 1 100%; max-width: none; }
  .crm-filters { flex-wrap: wrap; width: 100%; gap: 6px; }
  .crm-filters button { flex: 1 1 auto; }
  .dlg-row { gap: 10px; padding: 12px; flex-wrap: wrap; }
  .dlg-name { flex-wrap: wrap; }
  .dlg-time { margin-left: 50px; }
  .week { grid-template-columns: minmax(0, 1fr); overflow: visible; gap: 14px; }
  .day { min-width: 0; min-height: 120px; padding: 12px; }
  .day-head strong { font-size: 15px; }
  .week-bar strong { flex-basis: 100%; margin: 4px 0; }
  .filters input, .filters :is(select, button.search-select) { min-width: 0; }
  [data-page=calendar] .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page=calendar] .filters input { grid-column: 1 / -1; width: 100%; }
  [data-page=calendar] .filters :is(select, button.search-select) { max-width: none; width: 100%; }
  [data-page=calendar] .filters .section-actions { grid-column: 1 / -1; }
  [data-page=cards] .filters label { flex: 1 1 calc(50% - 12px); min-width: 0; }
  [data-page=cards] .filters label:first-child { flex-basis: 100%; }
  .settings-layout { flex-direction: column; gap: 14px; }
  .settings-nav { width: 100%; }
  .settings-panel { width: 100%; padding: 18px 14px; }
  .inline-fields, .mode-choice { flex-wrap: wrap; }
  .inline-fields label, .mode-card { flex: 1 1 180px; min-width: 0; }
  .token-row { flex-wrap: wrap; }
  .token-row input { flex: 1 1 100%; min-width: 0; }
  .toggle-row { gap: 16px; }
  .routing-row { flex-wrap: wrap; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
  .routing-row input.category, .routing-row input.model { flex: 1 1 100%; }
  .user-row { flex-wrap: wrap; }
  .user-row .user-id { flex: 1 1 140px; }
  .kb-col { padding: 16px 12px; }
  .kb-docs-head { flex-wrap: wrap; }
  .viz-svg-wrap { flex-basis: 100%; min-width: 0; }
  .viz-legend { flex-basis: 100%; }
  .chat-bubble { max-width: 92%; }
  .chat-form { flex-wrap: wrap; }
  .chat-form input { flex: 1 1 180px; min-width: 0; }
  .debug-tag { max-width: 100%; }
  .debug-chunk-head, .debug-attempt-head { flex-wrap: wrap; gap: 6px; }
  dialog { --dialog-pad-y: 22px; --dialog-pad-x: 18px; padding: 22px 18px; border-radius: 16px; scrollbar-gutter: auto; }
  dialog .dialog-close { top: 12px; right: 12px; width: 36px; height: 36px; }
  dialog h2 { font-size: 19px; }
  dialog .row { gap: 0; }
  dialog .row label { flex-basis: 100%; }
  dialog .dialog-actions button { flex: 1 1 auto; min-height: 44px; }
  dialog .dialog-actions .danger { margin-right: 0; }
  .finance-columns { grid-template-columns: minmax(0, 1fr); }
  .finance-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .finance-table th:first-child { width: 82px; }
  .finance-table th:nth-child(2) { width: 74px; }
  .finance-table th, .finance-table td { padding: 8px 6px; font-size: 11px; }
  .type-actions { flex-wrap: wrap; }
  .type-actions .search-select { flex: 1 1 100%; }
  #thread-dialog { max-height: calc(100dvh - 24px); }
  .thread-head .thread-status { margin-left: 0; }
  .thread-reply { flex-wrap: wrap; }
  .thread-reply textarea { flex: 1 1 100%; min-width: 0; }
  .thread-reply button { margin-left: auto; }
  .msg { max-width: 92%; }
}
@media (max-width: 420px) {
  dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); padding: 20px 14px; --dialog-pad-y: 20px; --dialog-pad-x: 14px; }
  [data-page=finance] .filters { grid-template-columns: minmax(0, 1fr); }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .metric { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
  .metric-label { margin: 0; }
  .metric-value { font-size: 22px; }
  .card-photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Standalone help and invoice pages have their own typography and print styles. */
@media (max-width: 720px) {
  [data-page=howto] .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  [data-page=howto] .wrap { padding: 24px 12px 64px; }
  [data-page=howto] h1 { font-size: 24px; }
  [data-page=howto] h2 { font-size: 19px; }
  [data-page=howto] .card { padding: 16px 12px; }
  [data-page=howto] .mock-nav { overflow-x: auto; white-space: nowrap; }
  [data-page=howto] .mock-body { overflow-x: auto; }
  [data-page=howto] table.spec { display: block; overflow-x: auto; }
  [data-page=howto] .pstep { flex-basis: auto; }
  [data-page=howto] .m-settings { min-width: 400px; }
  [data-page=invoice] .toolbar { flex-wrap: wrap; }
  [data-page=invoice] .sheet { padding: 20px 12px; }
  [data-page=invoice] h1 { font-size: 21px; }
  [data-page=invoice] th, [data-page=invoice] td { padding: 8px 4px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
@media print { [data-page=invoice] .sheet { padding: 0; } }

/* Page actions share one location above filters on every screen. */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; min-width: 0;
}
.section-header :is(h1, h2) { margin: 0; font-size: 24px; line-height: 1.25; min-width: 0; }
.section-header .section-actions {
  width: auto; margin: 0; justify-content: flex-end; flex: 0 1 auto;
}
.section-header .section-actions button { flex: 0 1 auto; }
.settings-panel .section-header h2 { font-size: 18px; }
.section-header + .muted { margin-top: -8px; }
.nav a.brand { color: var(--text); text-decoration: none; border-radius: 8px; }
.topbar a.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 8px; }
.nav-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-account-avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--brand-soft-2); border-radius: 11px;
  font-size: 12px; font-weight: 700;
}
.nav-account-identity { min-width: 0; }
.nav-account-identity small, .nav [data-rt-bot] small { display: none; }
.nav .toolbar #current-user { display: block; font-size: 12px; color: var(--text-2); padding: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav [data-rt-bot] { display: inline-flex; align-items: center; gap: 8px; }
.nav-bot-icon { font-size: 19px; color: var(--brand-focus); }
.nav .logout-button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }

body.modal-open { position: fixed; left: 0; right: 0; overflow: hidden; }
/* dvh alone does not shrink with the keyboard in all mobile browsers. */
html body dialog[open] {
  position: fixed; inset: auto; left: 50%;
  top: calc(var(--viewport-top, 0px) + var(--viewport-height, 100dvh) / 2);
  transform: translate(-50%, -50%); margin: 0;
  max-height: calc(var(--viewport-height, 100dvh) - 24px) !important;
  scroll-padding: 16px; -webkit-overflow-scrolling: touch;
}
html body dialog.rt-bot-history[open] { height: calc(var(--viewport-height, 100dvh) - 24px); }
.search-select__panel { overscroll-behavior: contain; outline: none; }
.search-select__search-box { display: flex; align-items: center; gap: 8px; }
.search-select__panel .search-select__search { flex: 1; width: 0; }
.search-select__close {
  flex: none; width: 36px; height: 36px; padding: 0; background: var(--surface-2);
  color: var(--muted); border-radius: 8px; font-size: 22px;
}
@media (max-width: 1280px) {
  .nav .toolbar { gap: 12px; padding: 12px 0 2px; }
  .nav .toolbar [data-rt-bot] {
    width: 100%; min-height: 52px; padding: 10px 12px; background: var(--brand-soft); color: var(--brand-ink);
    text-align: left; border: 1px solid var(--brand-soft-2); border-radius: 12px;
  }
  .nav [data-rt-bot] small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
  .nav-bot-icon { width: 30px; color: var(--brand-500); text-align: center; }
  .nav-account { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
  .nav-account-identity { flex: 1; }
  .nav-account-identity small { display: block; color: var(--faint); font-size: 10px; margin-bottom: 2px; }
  .nav .toolbar #current-user { max-width: none; font-size: 13px; font-weight: 600; }
  .nav .logout-button { width: 40px; height: 40px; margin-left: auto; }
}
@media (max-width: 720px) {
  .section-header { gap: 12px; align-items: flex-start; }
  .section-header h1 { font-size: 22px; padding-top: 8px; }
  .section-header .section-actions { max-width: 65%; gap: 6px; }
  .section-header .section-actions button { padding: 9px 10px; font-size: 12px; }
  .search-select__panel { border-radius: 14px; box-shadow: 0 12px 50px rgb(15 23 42 / 30%); }
  .search-select__option { min-height: 44px; }
}

/* Compact entity lists keep column alignment on all screen sizes. */
.entity-list { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.entity-list:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.entity-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.clients-table { min-width: 960px; }
.cards-table { min-width: 840px; }
.entity-table th { position: relative; padding: 11px 16px; background: var(--surface-1); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.entity-table td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; max-width: 280px; }
.entity-table tbody tr { cursor: pointer; }
.entity-table tbody tr:hover, .entity-table tbody tr:focus-within { background: var(--surface-1); }
.entity-table .entity-name { font-weight: 600; color: var(--brand-dark); text-decoration: none; display: inline-block; min-width: 150px; }
.entity-table .entity-name:hover { text-decoration: underline; }
.entity-table .tag { display: inline-block; white-space: nowrap; }
.entity-table .count-cell { text-align: right; width: 90px; }
.entity-secondary { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.entity-facts { color: var(--muted); min-width: 220px; }
.entity-task-count { color: var(--muted); white-space: nowrap; }
.entity-row-actions { display: flex; gap: 4px; }
.entity-table .entity-empty { text-align: center; padding: 40px 16px; color: var(--muted); cursor: default; max-width: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  .entity-table th, .entity-table td { padding: 10px 12px; }
}

.nav-count { display:inline-flex;align-items:center;justify-content:center;min-width:20px;padding:1px 5px;margin-left:5px;border-radius:12px;background:var(--brand-soft-2);color:var(--brand-ink);font-size:11px;font-weight:700; }
.work-description {display:grid;gap:8px;margin:8px 0 14px}.work-description small{color:var(--muted)}
.dialog-client-tools {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}.dialog-client-tools p{flex-basis:100%}
[data-shift-planner] {margin:14px 0;border:1px solid var(--border-strong);border-radius:10px;padding:12px;}
.shift-weekdays,.shift-month-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:420px;}
.shift-weekdays label,.shift-month-grid label{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0;padding:5px 1px;font-size:11px;border-radius:6px;cursor:pointer;}
.shift-month-grid label{border:1px solid var(--border);background:var(--surface-1)}.shift-month-grid label:has(input:checked){background:var(--brand-soft-2);border-color:var(--brand-500)}
.shift-month-grid input,.shift-weekdays input,.shift-view-switch input{width:16px;height:16px;margin:0;min-height:0;accent-color:var(--brand)}
.shift-selection{font-size:12px;overflow-wrap:anywhere}.shift-view-switch{display:inline-flex;gap:7px;align-items:center;font-size:12px;margin:0}
.simple-shifts {display:grid;gap:5px;padding:8px}.simple-shift {white-space:normal;text-align:left;font-size:11px;background:var(--brand-soft);color:var(--brand-ink);padding:8px;border:1px solid var(--brand-border);border-radius:7px}

/* The native dialog remains the scroll container, so existing forms and overlays keep working. */
dialog > .dialog-sticky-header { position: sticky; top: calc(-1 * var(--dialog-pad-y)); z-index: 25; display: flex; align-items: center; gap: 16px; background: var(--surface); border-bottom: 1px solid var(--border); margin: calc(-1 * var(--dialog-pad-y)) calc(-1 * var(--dialog-pad-x)) 20px; padding: 18px var(--dialog-pad-x); }
dialog > .dialog-sticky-header .dialog-sticky-title { flex: 1; min-width: 0; margin: 0; padding: 0; font-size: 20px; overflow-wrap: anywhere; }
dialog > .dialog-sticky-header .dialog-close { position: static; flex: 0 0 34px; margin: 0; }
dialog .dialog-source-heading { display: none !important; }
dialog.rt-bot-history .rt-history-header { position: sticky; top: 0; z-index: 25; background: var(--surface); }

.linked-card-preview .linked-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.linked-card-preview .linked-card-heading strong { flex: 1; min-width: 0; }
.linked-card-preview .linked-card-heading button { flex: 0 0 auto; }

/* ---------- Status pills: one look for clients, tasks, bookings and dialogs ---------- */
.status-pill { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
:is(.status-pill, .ev-status):is([data-status=lead], [data-status=todo], [data-status=pending], [data-status=unknown]) { background: var(--brand-soft-2); color: var(--brand-ink); }
:is(.status-pill, .ev-status):is([data-status=active], [data-status=done], [data-status=confirmed], [data-status=available]) { background: var(--success-soft); color: var(--success); }
:is(.status-pill, .ev-status):is([data-status=paused], [data-status=in_progress], [data-status=missing]) { background: var(--warning-soft); color: var(--warning); }
:is(.status-pill, .ev-status):is([data-status=review]) { background: #dbeafe; color: #1e40af; }
:is(.status-pill, .ev-status):is([data-status=archived]) { background: var(--border); color: var(--text-3); }
:is(.status-pill, .ev-status):is([data-status=rejected]) { background: #fee2e2; color: #991b1b; }

/* ---------- Read-only blocks shared by entity views ---------- */
.ek-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.ek-fact { min-width: 0; }
.ek-fact dt { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.ek-fact dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ek-fact dd.is-empty { color: var(--faint); }
.ek-fact a, .ek-contact a { color: var(--brand-dark); }
.ek-notes { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-1); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ek-notes.is-empty, .ek-empty { color: var(--faint); }
.ek-empty { margin: 0; padding: 18px 0; font-size: 13px; }
.ek-contact { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); min-width: 0; }
.ek-contact-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-width: 0; }
.ek-contact-head strong { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.ek-contact-name { color: inherit !important; text-decoration: underline; text-decoration-color: var(--brand-focus); text-underline-offset: 3px; }
.ek-relations { display: grid; gap: 0; }
.ek-relation { display: flex; align-items: center; gap: 8px 12px; padding: 11px 0; border-bottom: 1px solid var(--surface-2); min-width: 0; }
.ek-relation:last-child { border-bottom: 0; }
.ek-relation-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ek-relation-title { width: fit-content; max-width: 100%; color: var(--brand-dark); font-size: 14px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.ek-relation-title:hover { text-decoration: underline; }
.ek-relation-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ek-relation-actions { display: flex; gap: 4px; }
.ek-relation-actions button { background: none; color: var(--muted); padding: 4px 8px; font-size: 12px; min-height: 0; }
.ek-relation-actions button:hover { background: var(--surface-2); color: var(--danger); }
.ek-add { justify-self: start; margin-bottom: 4px; background: none; color: var(--brand-dark); padding: 6px 0; font-weight: 600; }
.ek-add:hover { text-decoration: underline; }

/* ---------- Entity view: header, tabs, inline fields, footer ---------- */
dialog.entity-view { width: min(760px, 94vw); padding: 0; --dialog-pad-x: 28px; --dialog-pad-y: 0px; }
dialog.entity-view:focus { outline: none; }
.ev-header { position: sticky; top: 0; z-index: 20; padding: 18px var(--dialog-pad-x) 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ev-top { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.ev-eyebrow { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
dialog.entity-view .ev-top .dialog-close { position: static; margin-left: auto; flex: 0 0 34px; }
dialog.entity-view select.ev-status { width: auto; min-height: 0; margin: 0; padding: 4px 26px 4px 11px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
dialog.entity-view select.ev-status:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 2px; box-shadow: none; }
.ev-title { margin-top: 6px; }
.ev-title .ef-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
dialog.entity-view .ev-title .ef-input { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; padding: 4px 8px; margin-left: -9px; width: calc(100% + 9px); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.ev-meta:empty { display: none; }
.ev-meta a { color: var(--brand-dark); }
.ev-body { padding: 18px var(--dialog-pad-x) 22px; min-width: 0; }
dialog.entity-view .entity-tab-list { margin: 0 0 18px; }
.ev-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; }
.entity-tab-list > button[aria-selected=true] .ev-count { color: var(--brand-dark); }
.ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.ev-grid > .ef[data-type=textarea], .ev-grid > .ev-wide { grid-column: 1 / -1; }
.ev-section + .ev-section { margin-top: 22px; }
.ev-section > h3 { margin: 0 0 10px; color: var(--text-3); font-size: 13px; font-weight: 600; }
.ev-footer { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px var(--dialog-pad-x); background: var(--surface); border-top: 1px solid var(--border); }
.ev-actions { display: flex; gap: 8px; flex-wrap: wrap; }
dialog.entity-view .ev-actions button { min-height: 36px; padding: 7px 14px; font-weight: 600; border-radius: var(--radius); }
.ev-save-state { margin-left: auto; color: var(--faint); font-size: 12px; text-align: right; }
.ev-save-state.is-saving { color: var(--muted); }
.ev-save-state.is-error { color: var(--danger); }

/* Inline field: a real control that reads as text until hovered or focused. */
.ef { position: relative; min-width: 0; padding: 4px 0; }
dialog .ef-label, .ef-label { display: block; margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
.ef-control { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
dialog.entity-view .ef-input { flex: 1; width: 100%; min-width: 0; min-height: 36px; margin: 0; padding: 6px 8px; margin-left: -9px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 14px; line-height: 1.45; box-shadow: none; transition: background-color .12s, border-color .12s; }
dialog.entity-view textarea.ef-input { min-height: 36px; resize: none; overflow: hidden; }
dialog.entity-view .ef-input::placeholder { color: var(--faint); }
dialog.entity-view .ef:not(.is-readonly) .ef-input:hover { background: var(--surface-2); cursor: text; }
dialog.entity-view .ef:not(.is-readonly) :is(select, input[type=date], input[type=time]).ef-input:hover { cursor: pointer; }
dialog.entity-view .ef .ef-input:focus { background: var(--surface); border-color: var(--brand-400); box-shadow: 0 0 0 3px rgb(99 102 241 / 12%); }
dialog.entity-view .ef.is-error .ef-input { border-color: var(--danger-500); background: var(--danger-soft); }
dialog.entity-view .ef.is-readonly .ef-input { color: var(--text-3); opacity: 1; cursor: default; -webkit-text-fill-color: var(--text-3); }
.ef:not(.is-readonly):not(.ef-check) .ef-control:hover::after { content: '✎'; position: absolute; right: 8px; color: var(--faint); font-size: 13px; pointer-events: none; }
.ef .ef-control:focus-within::after, .ef[data-type=select] .ef-control::after, .ef[data-type=date] .ef-control::after, .ef[data-type=time] .ef-control::after { content: none !important; }
dialog.entity-view .ef button.search-select { min-height: 36px; margin: 0 0 0 -9px; padding: 6px 8px; border-color: transparent; background: transparent; box-shadow: none; font-size: 14px; }
dialog.entity-view .ef button.search-select:hover { background: var(--surface-2); }
dialog.entity-view .ef button.search-select[aria-expanded=true] { background: var(--surface); border-color: var(--brand-400); }
dialog.entity-view .ef.is-error button.search-select { border-color: var(--danger-500); }
.ef-link { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--brand-dark); text-decoration: none; font-size: 14px; }
.ef-link:hover { background: var(--brand-soft); }
.ef-state { display: block; min-height: 0; font-size: 11px; color: var(--muted); }
.ef-state:empty { display: none; }
.ef.is-saved .ef-state { color: var(--success); }
.ef.is-error .ef-state { color: var(--danger); }
.ef.ef-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ef.ef-check .ef-label { margin: 0; color: var(--text); font-size: 14px; }
dialog.entity-view .ef.ef-check .ef-input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--brand); }
.ef.ef-check .ef-state { flex-basis: 100%; }

@media (max-width: 720px) {
  dialog.entity-view { --dialog-pad-x: 16px; }
  .ev-grid, .ek-facts { grid-template-columns: minmax(0, 1fr); }
  dialog.entity-view .ev-title .ef-input { font-size: 20px !important; }
  dialog.entity-view .ef-input { min-height: 44px !important; }
  dialog.entity-view select.ev-status { min-height: 32px !important; font-size: 13px !important; }
  .ev-footer { flex-wrap: wrap; }
  .ev-save-state { flex-basis: 100%; text-align: left; margin-left: 0; }
  .ev-actions button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { dialog.entity-view .ef-input { transition: none; } }
.linked-card-preview + .linked-card-preview { margin-top: 10px; }
.linked-card-preview .linked-card-heading { margin-bottom: 12px; }
.ef-link[hidden] { display: none; }
.card-badge { display: block; width: fit-content; max-width: 100%; margin-top: 5px; color: var(--brand-dark); font-size: 11px; overflow-wrap: anywhere; }
/* Adding a related object: a searchable list plus an optional "create" button on one row. */
.ek-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 14px; }
.ek-picker > label { margin: 0; min-width: 0; }
.ek-picker > .ek-create { min-height: 42px; white-space: nowrap; }
.ek-picker > .dialog-error { grid-column: 1 / -1; margin: 0; }
.ek-picker > .dialog-error:empty { display: none; }
.ek-cards { display: grid; gap: 10px; }
.ev-section > .ek-add { display: inline-block; margin: 6px 0 12px; }
.ev-section > .ek-contact, .ev-section > .ek-empty { margin-top: 6px; }
@media (max-width: 720px) { .ek-picker { grid-template-columns: minmax(0, 1fr); } .ek-picker > .ek-create { width: 100%; } }