/* Work › Clients — two-column: list (left) + detail/form (right). */
.clients {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 900px) { .clients { grid-template-columns: 1fr; } }

/* Left: list pane */
.clients__list-pane {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.clients__toolbar {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.clients__order {
  flex: 1; min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.btn-sm { padding: var(--sp-2) var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.btn-sm svg { width: 1rem; height: 1rem; }

.client-list { display: flex; flex-direction: column; max-height: 72vh; overflow-y: auto; }
.client-row { display: flex; align-items: center; border-bottom: 1px solid var(--c-border); }
.client-row.is-active { background: var(--c-accent-wash); }
.client-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); text-align: left; }
.client-row__swatch { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.client-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.client-row.is-active .client-row__name { color: var(--c-accent-ink); }
.client-row__actions { display: flex; gap: 2px; padding-right: var(--sp-2); }
.client-row__actions button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); color: var(--c-ink-soft); }
.client-row__actions button:hover { background: var(--c-surface-2); color: var(--c-ink); }
.client-row__actions svg { width: 1.05rem; height: 1.05rem; }
.clients-empty { padding: var(--sp-5); text-align: center; color: var(--c-ink-faint); }

/* Right: detail / form pane */
.clients__detail-pane {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  min-height: 380px;
}
.detail-empty { display: grid; place-items: center; min-height: 320px; color: var(--c-ink-faint); text-align: center; }

.client-view__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.client-view__id { display: flex; align-items: center; gap: var(--sp-4); }
.client-view__logo, .client-view__swatch { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: var(--r-md); object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.client-view__name { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.client-view__color { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); color: var(--c-ink-soft); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.client-view__color .dot { width: 0.85rem; height: 0.85rem; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.client-view__actions { display: flex; gap: var(--sp-2); }

.client-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.client-meta dt { margin-bottom: 2px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
.client-meta dd { font-weight: var(--fw-medium); word-break: break-word; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; }
.stat { padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); }
.stat__num { display: block; font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.stat__label { font-size: var(--fs-sm); color: var(--c-ink-soft); }

.client-projects__title { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.proj-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.proj-link { width: 100%; padding: var(--sp-3); text-align: left; font-weight: var(--fw-medium); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); transition: background var(--dur) var(--ease); }
.proj-link:hover { background: var(--c-surface-2); }

/* Form / confirm */
.client-form, .confirm { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 520px; }
.form-title { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.req { color: var(--c-accent-ink); }
.color-field { display: flex; align-items: center; gap: var(--sp-3); }
.color-field input[type="color"] { width: 3rem; height: 2.5rem; padding: 0; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: none; cursor: pointer; }
.color-field output { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.logo-field { display: flex; align-items: center; gap: var(--sp-4); }
.logo-preview { width: 3rem; height: 3rem; border-radius: var(--r-md); object-fit: cover; border: 1px solid var(--c-border); }
.logo-preview.is-empty { background: var(--c-surface-2); }
.form-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

.btn-ghost { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font-weight: var(--fw-medium); }
.btn-ghost:hover { background: var(--c-surface-2); }
.btn-danger { padding: var(--sp-3) var(--sp-4); background: var(--c-ink); color: #fff; border-radius: var(--r-md); font-weight: var(--fw-semibold); }
.btn-danger:hover { filter: brightness(1.2); }

/* ---- Shared additions (Clients + Projects) ---- */
.btn-block { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); width: 100%; }
/* Constrain button icons — an unsized SVG would expand to the button width. */
.btn-primary svg, .btn-block svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.section-title { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }

/* list row: name + small meta line */
.client-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.client-row__meta { font-size: var(--fs-xs); color: var(--c-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* toolbar filter (Projects) */
.clients__filter { flex: 1; min-width: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); }

/* rich-text notes (Clients) */
.rte { border: 1px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; }
.rte:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.rte__toolbar { display: flex; gap: 2px; padding: var(--sp-1); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.rte__btn { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm); color: var(--c-ink); }
.rte__btn:hover { background: var(--c-surface); }
.rte__area { min-height: 5rem; padding: var(--sp-3); outline: none; }
.notes-body { color: var(--c-ink); }
.notes-body:empty::before { content: "—"; color: var(--c-ink-faint); }

/* client/project sub line */
.client-view__sub { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* importance pills — severity encoded by LIGHTNESS (dark = higher), never hue,
   and always shown as text, so it reads under colour-vision deficiency. */
.imp { display: inline-block; padding: 1px var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.imp--critical { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.imp--urgent { background: #3a3f4a; color: #fff; border-color: #3a3f4a; }
.imp--high { background: var(--c-ink-soft); color: #fff; border-color: var(--c-ink-soft); }
.imp--regular { background: var(--c-surface-2); color: var(--c-ink); }
.imp--low { background: var(--c-surface); color: var(--c-ink-soft); }
.imp--someday { background: var(--c-surface); color: var(--c-ink-faint); }

/* budget progress + overdue */
.progress { height: 0.5rem; margin-top: var(--sp-2); background: var(--c-surface-2); border-radius: var(--r-full); overflow: hidden; }
.progress__bar { height: 100%; background: var(--c-accent-ink); }
.progress__caption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.tag-overdue { display: inline-block; margin-left: var(--sp-2); padding: 1px var(--sp-2); border: 1px solid var(--c-ink); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

/* form: two columns + textarea */
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 520px) { .form-grid2 { grid-template-columns: 1fr; } }
.field textarea { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; resize: vertical; }
.field textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-accent); }


/* ---- Spacing fixes ---- */
/* Breathing room between the stacked sections of a detail view
   (Description, Associated tasks/files/projects, Notes). */
.client-view > section { margin-top: var(--sp-6); }
.client-view > .stat-row { margin-top: var(--sp-5); }

/* Inline clickable text (e.g. client name inside a project). */
.link-inline { color: var(--c-accent-ink); font-weight: inherit; }
.link-inline:hover { text-decoration: underline; }

/* ---- Tasks ---- */
.budget-head { padding: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.budget-head__row { display: flex; justify-content: space-between; margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.budget-head__label { color: var(--c-ink-soft); }
.budget-head__val { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.budget-head__free { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-ink-faint); }
.progress__bar.is-over { background: var(--c-ink); } /* over budget: ink, not colour */

/* status dot (decorative; status is always shown as text too) */
.task-dot { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: var(--r-full); background: var(--c-border-strong); }
.task-dot--in-progress { background: var(--c-accent); }
.task-dot--done { background: var(--c-ink-faint); }

/* status pill */
.pill { display: inline-block; padding: 1px var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-soft); }
.pill--done { background: var(--c-surface-2); color: var(--c-ink-faint); }
.pill--in-progress { background: var(--c-accent-wash); color: var(--c-accent-ink); border-color: transparent; }

/* sub-tasks */
.subtask-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.subtask { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.subtask__name { margin-right: auto; font-weight: var(--fw-medium); }
.subtask__budget { font-variant-numeric: tabular-nums; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.subtask__del { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm); color: var(--c-ink-soft); }
.subtask__del:hover { background: var(--c-surface-2); color: var(--c-ink); }
.subtask__del svg { width: 1rem; height: 1rem; }

.subtask-add { display: flex; gap: var(--sp-2); align-items: center; }
.subtask-add input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; }
.subtask-add__name { flex: 1; min-width: 0; }
.subtask-add__budget { width: 5rem; flex: 0 0 auto; }
.subtask-hint { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-faint); }
.subtask-hint.is-error { color: var(--c-ink); font-weight: var(--fw-medium); }

.field-hint { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* ---- Tasks page: 50/50 columns + filters ---- */
.clients--tasks { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .clients--tasks { grid-template-columns: 1fr; } }
.clients__toolbar--wrap { flex-wrap: wrap; }
.clients__toolbar--wrap .clients__filter { flex: 1 1 40%; }

/* sub-task rows in the left list (indented) */
.client-row--sub .client-row__main { padding-left: var(--sp-6); }
.client-row--sub .client-row__name { font-weight: var(--fw-regular); }
.client-row--sub .task-dot { margin-left: var(--sp-2); }

/* selectable sub-task in the detail list */
.subtask__open { flex: 1; min-width: 0; text-align: left; font-weight: var(--fw-medium); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtask__open:hover { color: var(--c-accent-ink); text-decoration: underline; }

.task-sub-meta { margin-bottom: var(--sp-5); color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* attach-file control */
.file-attach { cursor: pointer; display: inline-flex; align-items: center; }

/* extra status pills + dots (severity/meaning via text; colour secondary) */
.pill--waiting { background: var(--c-surface-2); }
.pill--blocked { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.pill--review { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-accent); }
.pill--cancelled { background: var(--c-surface-2); color: var(--c-ink-faint); text-decoration: line-through; }
.pill--pending { background: var(--c-surface); }
.task-dot--blocked { background: var(--c-ink); }
.task-dot--review { background: var(--c-accent-ink); }
.task-dot--waiting { background: var(--c-ink-faint); }
.task-dot--cancelled { background: var(--c-border); }

/* ---- Tasks: toolbar + list/board toggle ---- */
.tasks-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.tasks-toolbar .clients__filter { flex: 1 1 28%; min-width: 150px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); }
.view-toggle { display: inline-flex; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; }
.view-toggle__btn { padding: var(--sp-2) var(--sp-4); font-weight: var(--fw-medium); color: var(--c-ink-soft); }
.view-toggle__btn.is-active { background: var(--c-ink); color: #fff; }
.view-toggle__btn:not(.is-active):hover { background: var(--c-surface-2); }

/* completion / generic meter */
.meter { margin-top: var(--sp-4); }
.meter__row { display: flex; justify-content: space-between; margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* quick status change (select styled as a pill) */
.status-quick { padding: 2px var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; }
.tag-overdue--xs { margin-left: var(--sp-1); padding: 0 var(--sp-1); font-size: 0.65rem; }

/* checklist */
.check-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); }
.check-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-sm); }
.check-item:hover { background: var(--c-surface-2); }
.check-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--c-ink-soft); }
.check-toggle svg { width: 1.25rem; height: 1.25rem; }
.check-item.is-done .check-toggle { color: var(--c-accent-ink); }
.check-text { flex: 1; min-width: 0; }
.check-item.is-done .check-text { text-decoration: line-through; color: var(--c-ink-faint); }
.check-add { display: flex; gap: var(--sp-2); }
.check-add__input { flex: 1; min-width: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; }

/* kanban board */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); }
.kanban__col { display: flex; flex-direction: column; min-height: 220px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.kanban__col-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--c-border); }
.kanban__count { margin-left: auto; color: var(--c-ink-faint); font-weight: var(--fw-regular); }
.kanban__col-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); }
.kanban__col-body.is-drop { background: var(--c-accent-wash); outline: 2px dashed var(--c-accent); outline-offset: -4px; }
.kanban__empty { padding: var(--sp-4) 0; text-align: center; font-size: var(--fs-xs); color: var(--c-ink-faint); }
.kanban__card { padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); cursor: grab; }
.kanban__card.is-dragging { opacity: 0.5; }
.kanban__card-name { width: 100%; text-align: left; font-weight: var(--fw-medium); }
.kanban__card-name:hover { color: var(--c-accent-ink); }
.kanban__card-meta { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* ---- Collapsible sections (dropdowns) ---- */
.dd { margin-top: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.dd__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.dd__summary::-webkit-details-marker { display: none; }
.dd__summary::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--c-ink-soft); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dur) var(--ease); }
.dd[open] .dd__summary::before { transform: rotate(90deg); }
.dd__summary:hover { background: var(--c-surface-2); }
.dd__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--c-border); }

/* bigger checklist checkbox */
.check-toggle { width: 2rem; height: 2rem; }
.check-toggle svg { width: 1.6rem; height: 1.6rem; }

/* file chips inside lists */
.subtask__file { display: flex; align-items: center; gap: var(--sp-2); }
.file-mini { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); object-fit: contain; background: var(--c-surface-2); }
.file-ext { display: inline-grid; place-items: center; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--c-ink-soft); background: var(--c-surface-2); border-radius: var(--r-sm); }
.file-ext--mini { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; font-size: 0.6rem; }
.file-origin { font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* ---- Files page ---- */
.files-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.files-ctl { height: 2.5rem; padding: 0 var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; box-sizing: border-box; }
.files-search { flex: 1 1 220px; min-width: 0; }
.files-count { margin-left: auto; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
.file-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-3); text-align: left; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); transition: box-shadow var(--dur) var(--ease); }
.file-card:hover { box-shadow: var(--shadow-md); }
.file-card__thumb { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--c-surface-2); border-radius: var(--r-md); }
.file-card__thumb .file-ext { width: 100%; height: 100%; font-size: var(--fs-lg); }
.file-card__img { width: 100%; height: 100%; object-fit: contain; }
.file-card__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); word-break: break-word; }
.file-card__meta { font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* ---- Lightbox modal ---- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--sp-5); }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(20, 21, 26, 0.6); }
.lightbox__panel { position: relative; display: flex; flex-direction: column; max-width: min(900px, 92vw); max-height: 88vh; overflow: hidden; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.lightbox__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.lightbox__name { margin-right: auto; font-weight: var(--fw-semibold); word-break: break-word; }
.lightbox__actions { display: flex; align-items: center; gap: var(--sp-2); }
.lightbox__close { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); color: var(--c-ink-soft); }
.lightbox__close:hover { background: var(--c-surface-2); color: var(--c-ink); }
.lightbox__body { display: grid; place-items: center; padding: var(--sp-4); overflow: auto; background: var(--c-bg); }
.lightbox__media { max-width: 100%; max-height: 70vh; }
.lightbox__media--svg { width: min(360px, 60vw); padding: var(--sp-4); background: #fff; border-radius: var(--r-md); }
.lightbox__note { padding: var(--sp-6); color: var(--c-ink-soft); }

/* ---- Timer ---- */
.tracker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-5); margin-bottom: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tracker__fields { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tracker__sel { height: 2.75rem; padding: 0 var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; box-sizing: border-box; }
.tracker__note { flex: 1; min-width: 180px; height: 2.75rem; padding: 0 var(--sp-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; box-sizing: border-box; }
.tracker__right { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.tracker__clock { min-width: 5.5ch; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.tracker__btn { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-full); background: var(--c-accent-ink); color: #fff; box-shadow: var(--shadow-sm); transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tracker__btn:hover { filter: brightness(1.08); }
.tracker__btn:active { transform: scale(0.96); }
.tracker__btn svg { width: 1.75rem; height: 1.75rem; }
.tracker.is-running .tracker__btn { background: var(--c-ink); }
.tracker.is-running .tracker__clock { color: var(--c-accent-ink); }

.log { display: flex; flex-direction: column; gap: var(--sp-3); }
.day { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.day__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.day__summary::-webkit-details-marker { display: none; }
.day__summary::before { content: ""; flex: 0 0 auto; width: 0; height: 0; border-left: 6px solid var(--c-ink-soft); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform var(--dur) var(--ease); }
.day[open] .day__summary::before { transform: rotate(90deg); }
.day__summary:hover { background: var(--c-surface-2); }
.day__label { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.day__meta { margin-left: auto; color: var(--c-ink-soft); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.day__body { border-top: 1px solid var(--c-border); }

.entry { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--c-border); }
.entry:first-child { border-top: 0; }
.entry__time { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.entry__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entry__note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.entry__ctx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.entry__dur { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.entry__value { min-width: 6ch; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-accent-ink); font-weight: var(--fw-semibold); }
/* Editable billed hours per entry. The boxed input signals it is editable,
   distinct from the plain worked duration beside it; focus ring is the accent. */
.entry__billed { flex: 0 0 auto; display: inline-flex; }
.entry__billed input { width: 4.75ch; padding: 3px 5px; text-align: right; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--c-ink); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.entry__billed input:hover { border-color: var(--c-ink-soft); }
.entry__billed input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); background: var(--c-surface); }
.entry__actions { flex: 0 0 auto; display: flex; gap: 2px; }
.entry__actions button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); color: var(--c-ink-soft); }
.entry__actions button:hover { background: var(--c-surface-2); color: var(--c-ink); }
.entry__actions svg { width: 1.05rem; height: 1.05rem; }

.entry-edit { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.entry-edit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.ee-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-soft); }
.ee-field input, .ee-field select { height: 2.5rem; padding: 0 var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); box-sizing: border-box; }
.ee-field--wide { grid-column: 1 / -1; }
.entry-edit__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

@media (max-width: 640px) {
  .entry { flex-wrap: wrap; }
  .entry__body { flex: 1 1 60%; }
}

.day__totals { color: var(--c-accent-ink); font-weight: var(--fw-semibold); }

/* ---- Billing (worked vs billed vs profit) ---- */
.billing { margin-top: var(--sp-4); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.billing__row { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-sm); }
.billing__k { color: var(--c-ink-soft); }
.billing__v { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.billing__row--profit { padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.billing__row--profit .billing__k { color: var(--c-ink); font-weight: var(--fw-semibold); }
.billing__profit { font-weight: var(--fw-bold); }
.billing__profit.is-pos { color: var(--c-accent-ink); }
.billing__profit.is-neg { color: var(--c-ink); }

/* ---- Task card chips ---- */
.tchips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.tchip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.tchip svg { flex: 0 0 auto; width: 0.9rem; height: 0.9rem; }
/* align the status dot to the task name when chips make the card taller */
.clients--tasks .client-row__main { align-items: flex-start; }
.clients--tasks .client-row .task-dot { margin-top: 0.35rem; }

/* project's associated-tasks mini cards */
.task-mini + .task-mini { margin-top: var(--sp-2); }
.task-mini__btn { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; padding: var(--sp-3); text-align: left; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); transition: background var(--dur) var(--ease); }
.task-mini__btn:hover { background: var(--c-surface-2); }
.task-mini__name { font-weight: var(--fw-medium); }

/* ---- Comments ---- */
.comment-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.comment { padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.comment__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); font-size: var(--fs-xs); color: var(--c-ink-faint); }
.comment__del { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.comment__del:hover { background: var(--c-surface-2); color: var(--c-ink); }
.comment__del svg { width: 0.9rem; height: 0.9rem; }
.comment__body { font-size: var(--fs-sm); word-break: break-word; }
.comment__body a { color: var(--c-accent-ink); }
.comment-add__actions { margin-top: var(--sp-2); }
.rte__area[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--c-ink-faint); pointer-events: none; }

/* ---- Reports ---- */
.reports-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.rep-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-soft); }
/* Worked/Billed segmented toggle. Active segment fills with accent-ink and white
   text (~6.9:1 contrast, AA); the label text carries meaning, not colour alone. */
.rep-toggle { display: inline-flex; height: 2.5rem; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.rep-toggle__btn { padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); background: var(--c-surface); border: 0; cursor: pointer; }
.rep-toggle__btn + .rep-toggle__btn { border-left: 1px solid var(--c-border); }
.rep-toggle__btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
.rep-toggle__btn.is-on { background: var(--c-accent-ink); color: #fff; }
.rep-toggle__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.report { margin-bottom: var(--sp-5); }
.report__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.report__client { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.report__period { margin-top: var(--sp-1); color: var(--c-ink-soft); font-size: var(--fs-sm); }
.report__grand { text-align: right; }
.report__grand-h { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.report__grand-v { color: var(--c-accent-ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.report__proj { margin-top: var(--sp-5); }
.report__proj-name { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.report__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.report__table th, .report__table td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-border); }
.report__table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.report__table td.num, .report__table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report__table tfoot td { font-weight: var(--fw-bold); border-bottom: 0; border-top: 2px solid var(--c-border-strong); }

/* ============================ Invoices ============================ */
/* Status pills — distinguished by fill/lightness + a text label, never hue.
   draft = outline (lightest) · sent = accent wash (mid) · paid = ink fill. */
.pill--inv-draft { background: var(--c-surface); color: var(--c-ink-soft); border-color: var(--c-border-strong); }
.pill--inv-sent { background: var(--c-accent-wash); color: var(--c-accent-ink); border-color: transparent; }
.pill--inv-paid { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* list row */
.inv-row__num { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--c-ink); }
.invoices .client-row__main { align-items: center; gap: var(--sp-3); }
.invoices .client-row__text { flex: 1; }

/* action bar above the sheet */
.invoice-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

/* ---- the invoice sheet (print-ready) ---- */
.invoice-sheet { max-width: 720px; margin: 0 auto; padding: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-ink); }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.inv-brand { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: 0.12em; }
.inv-from { text-align: right; font-size: var(--fs-sm); color: var(--c-ink-soft); display: flex; flex-direction: column; gap: 1px; }
.inv-from strong { color: var(--c-ink); font-size: var(--fs-base); }
.inv-title { margin: var(--sp-5) 0; text-align: center; font-size: var(--fs-2xl); letter-spacing: 0.18em; font-weight: var(--fw-semibold); color: var(--c-ink-soft); }

.inv-metarow { display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.inv-label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.inv-billto { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.inv-billto strong { color: var(--c-ink); font-size: var(--fs-lg); }
.inv-meta { display: grid; grid-template-columns: auto auto; gap: 2px var(--sp-4); align-content: start; font-size: var(--fs-sm); }
.inv-meta > div { display: contents; }
.inv-meta dt { color: var(--c-ink-soft); font-weight: var(--fw-semibold); }
.inv-meta dd { text-align: right; font-variant-numeric: tabular-nums; }

.inv-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.inv-table thead th { padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
.inv-table td { padding: var(--sp-3); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.inv-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-desc { line-height: var(--lh-snug); }
.inv-desc__sub { display: block; color: var(--c-ink-soft); font-size: var(--fs-xs); }
.inv-empty-row { text-align: center; color: var(--c-ink-faint); padding: var(--sp-5); }

.inv-foot { display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.inv-pay { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); color: var(--c-ink-soft); max-width: 42ch; }
.inv-totals { min-width: 240px; margin-left: auto; font-size: var(--fs-sm); }
.inv-totals > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; }
.inv-totals dt { color: var(--c-ink-soft); }
.inv-totals dd { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.inv-totals__grand { border-top: 1px solid var(--c-border); font-weight: var(--fw-bold); }
.inv-totals__grand dt, .inv-totals__grand dd { color: var(--c-ink); font-weight: var(--fw-bold); }
.inv-totals__due { border-top: 2px solid var(--c-border-strong); }
.inv-totals__due dt, .inv-totals__due dd { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-accent-ink); }

/* ---- invoice form ---- */
.inv-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.inv-form__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.inv-form__num { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--c-ink-soft); }
.files-ctl:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-accent); }

.inv-gen { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); background: var(--c-bg); }
.inv-gen legend { padding: 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.inv-gen__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-top: var(--sp-2); }

.inv-items__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.inv-item { display: grid; grid-template-columns: 1fr 5.5rem 6.5rem 7rem 2rem; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; }
.inv-item--head { padding: 0 0 var(--sp-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); border-bottom: 1px solid var(--c-border); }
.inv-item--head span:nth-child(2), .inv-item--head span:nth-child(3), .inv-item--head span:nth-child(4) { text-align: right; }
.inv-item__desc { padding: var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); resize: vertical; }
.inv-item__qty, .inv-item__rate { padding: var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.inv-item__amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.inv-item__del { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.inv-item__del:hover { background: var(--c-surface-2); color: var(--c-ink); }
.inv-item__del svg { width: 1rem; height: 1rem; }
.inv-items-empty { padding: var(--sp-4); color: var(--c-ink-faint); font-size: var(--fs-sm); }

.inv-form-totals { margin-left: auto; min-width: 260px; padding: var(--sp-3) var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.inv-form-totals__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-1) 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.inv-form-totals__grand { border-top: 1px solid var(--c-border); margin-top: var(--sp-1); padding-top: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-base); }

/* ============================ Overview (masonry) ============================ */
/* Pure CSS multi-column masonry: cards flow and pack by height. break-inside
   keeps a card whole. Reuses chart/hbar/progress/pill primitives from dashboard.css. */
.ov-masonry { columns: 3 340px; column-gap: var(--sp-5); }
.ov-card { break-inside: avoid; margin: 0 0 var(--sp-5); padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.ov-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ov-card__title { font-size: var(--fs-lg); }
.ov-card__note { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); white-space: nowrap; }

/* alerts — severity by left-border weight + a text tag, never hue */
.ov-alerts { display: flex; flex-direction: column; gap: var(--sp-2); }
.ov-alert { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-3); border: 1px solid var(--c-border); border-left-width: 3px; border-radius: var(--r-md); background: var(--c-surface); transition: background var(--dur) var(--ease); }
.ov-alert:hover { background: var(--c-surface-2); }
.ov-alert--high { border-left-color: var(--c-ink); }
.ov-alert--warn { border-left-color: var(--c-border-strong); }
.ov-alert__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ov-alert__label { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-alert__meta { font-size: var(--fs-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ov-alert__tag { flex: 0 0 auto; padding: 1px var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-soft); white-space: nowrap; }
.ov-alert--high .ov-alert__tag { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* clickable rows */
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); background: none; }
.ov-row:first-of-type { border-top: 0; }
.ov-row__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ov-row__title { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-row:hover .ov-row__title { color: var(--c-accent-ink); }
.ov-row__sub { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.ov-row__meta { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--c-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

/* clickable progress rows (budget watch, project progress) */
.ov-prog { display: flex; flex-direction: column; gap: var(--sp-4); }
.ov-progrow { display: block; width: 100%; text-align: left; background: none; }
.ov-progrow:hover .hbar__name { color: var(--c-accent-ink); }
.ov-total { margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ov-total strong { color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* segmented status bar — segments differ by lightness + labelled counts */
.ov-seg { display: flex; height: 0.75rem; border-radius: var(--r-full); overflow: hidden; background: var(--c-surface-2); margin-bottom: var(--sp-3); }
.ov-seg__part--draft { background: var(--c-border-strong); }
.ov-seg__part--sent { background: var(--c-accent); }
.ov-seg__part--paid { background: var(--c-ink); }
.ov-seg-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ov-seg-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ov-seg-legend__dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; }

/* currency rates — direction shown by arrow glyph + sign, never colour */
.ov-fx { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }
.ov-fx__row { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--c-border); }
.ov-fx__row:first-child { border-top: 0; }
.ov-fx__pair { font-weight: var(--fw-medium); }
.ov-fx__rate { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.ov-fx__delta { flex: 0 0 auto; min-width: 6ch; text-align: right; font-size: var(--fs-sm); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ov-fx__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* mini FX converter */
.ov-fx__conv { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.ov-fx__conv-fields { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.ov-fx__amt { flex: 1 1 6ch; min-width: 6ch; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; font-variant-numeric: tabular-nums; }
.ov-fx__cur { flex: 0 0 auto; padding: var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font: inherit; font-weight: var(--fw-semibold); }
.ov-fx__amt:focus-visible, .ov-fx__cur:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.ov-fx__arrow { flex: 0 0 auto; color: var(--c-ink-faint); }
.ov-fx__conv-out { margin-top: var(--sp-3); font-size: var(--fs-lg); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ov-fx__conv-out strong { color: var(--c-accent-ink); font-weight: var(--fw-bold); }

/* ---- Weekly target meter (Overview) ---- */
.ov-target { display: flex; flex-direction: column; gap: var(--sp-2); }
.ov-target__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.ov-target__worked { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ov-target__of { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-ink-soft); }
.ov-target__pct { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ov-target__state { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ov-target__edit { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.ov-target__edit-lbl { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); }
.ov-target__field { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ov-target__input { width: 4.5rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font: inherit; font-weight: var(--fw-semibold); text-align: right; font-variant-numeric: tabular-nums; }
.ov-target__input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.ov-target__unit { font-size: var(--fs-sm); color: var(--c-ink-soft); }