:root {
  color-scheme: light;
  --bg: #faf8f5;
  --bg-deep: #ece7de;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-muted: #faf8f5;
  --text: #1d1d1f;
  --text-soft: #424245;
  --muted: #6e6e73;
  --muted-light: #98989d;
  --line: #ece7de;
  --line-strong: #d9d2c6;
  --sidebar-bg: #EFEBE3;
  --sidebar-text: #2b2924;
  --sidebar-muted: #6b6a63;
  --brand: #E2122F;
  --brand-dark: #BD0A23;
  --brand-soft: #FDF1F3;
  --brand-faint: rgba(226, 18, 47, 0.08);
  /* Level 1: shared background/text color families. */
  --color-neutral-bg: #eef0f3;
  --color-neutral-text: #55555a;
  --color-info-bg: #e6f0fb;
  --color-info-text: #0b5fae;
  --color-success-bg: #e3f4e9;
  --color-success-text: #1c7a4d;
  --color-warning-bg: #fff3d6;
  --color-warning-text: #8a5a00;
  --color-urgent-bg: #ffe8dc;
  --color-urgent-text: #b34a1f;
  /* Level 2: semantic roles; components consume roles, not literal colors. */
  --status-backlog-bg: var(--color-neutral-bg);
  --status-backlog-text: var(--color-neutral-text);
  --status-planned-bg: var(--color-info-bg);
  --status-planned-text: var(--color-info-text);
  --status-in-progress-bg: var(--color-info-bg);
  --status-in-progress-text: var(--color-info-text);
  --status-blocked-bg: var(--color-warning-bg);
  --status-blocked-text: var(--color-warning-text);
  --status-done-bg: var(--color-success-bg);
  --status-done-text: var(--color-success-text);
  --priority-low-bg: var(--color-neutral-bg);
  --priority-low-text: var(--color-neutral-text);
  --priority-medium-bg: var(--color-info-bg);
  --priority-medium-text: var(--color-info-text);
  --priority-high-bg: var(--color-warning-bg);
  --priority-high-text: var(--color-warning-text);
  --priority-critical-bg: var(--color-urgent-bg);
  --priority-critical-text: var(--color-urgent-text);
  --order-pending-bg: var(--color-info-bg);
  --order-pending-text: var(--color-info-text);
  --order-confirmed-bg: var(--color-success-bg);
  --order-confirmed-text: var(--color-success-text);
  --order-closed-bg: var(--color-neutral-bg);
  --order-closed-text: var(--color-neutral-text);
  --badge-neutral-bg: var(--color-neutral-bg);
  --badge-neutral-text: var(--color-neutral-text);
  --badge-info-bg: var(--color-info-bg);
  --badge-info-text: var(--color-info-text);
  --badge-success-bg: var(--color-success-bg);
  --badge-success-text: var(--color-success-text);
  --badge-warning-bg: var(--color-warning-bg);
  --badge-warning-text: var(--color-warning-text);
  --badge-urgent-bg: var(--color-urgent-bg);
  --badge-urgent-text: var(--color-urgent-text);
  --success: var(--color-success-text);
  --warning: var(--color-warning-text);
  --danger: var(--color-urgent-text);
  /* Spacing scale and reusable content insets. Dense navigation/chart geometry stays local. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --panel-padding-xs: var(--space-3);
  --panel-padding-sm: var(--space-4);
  --panel-padding: var(--space-5);
  --panel-padding-lg: var(--space-6);
  --label-gap: var(--space-2);
  --form-gap: var(--space-4);
  --dialog-inset: var(--panel-padding-lg);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.16);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 72% -15%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 34rem),
    var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text); }
h1 {
  margin-bottom: 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 720;
}
h2 {
  margin-bottom: 4px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
h3 { letter-spacing: -0.015em; }
::selection { background: rgba(226, 18, 47, 0.16); }

.hidden { display: none !important; }

/* Application frame */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  background: var(--bg);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 26px 20px 20px;
  color: var(--sidebar-text);
  background: var(--sidebar-bg);
  border-right: 1px solid #ded8cc;
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-size: 17px;
  letter-spacing: -0.025em;
}
.sidebar > .brand { flex: 0 0 auto; margin-bottom: 18px; }
.brand-logo { display: block; width: min(190px, 100%); height: auto; max-height: 42px; object-fit: contain; object-position: left center; }
.sidebar .brand-logo { width: min(228px, 100%); max-height: 56px; }
.login-brand .brand-logo { width: min(230px, 100%); max-height: 51px; }
nav { display: grid; gap: 5px; }
.nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--sidebar-muted);
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 620;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.sidebar .nav-icon { color: inherit; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-organization-nav { display: none; }
.nav-item:hover { background: rgba(43,41,36,.07); color: var(--sidebar-text); }
.nav-item.active {
  color: #fff;
  background: var(--brand);
}
.nav-item.active .nav-icon { color: #fff; }
.nav-item.active .nav-badge { color: var(--badge-info-text); background: var(--badge-info-bg); box-shadow: none; }
.nav-badge {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
  font-size: 10px;
  font-weight: 760;
  box-shadow: 0 4px 12px var(--color-info-bg);
}
.sidebar-scroll-region {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 2px;
}
.sidebar-scroll-region > nav { margin: 14px 0 12px; }
.sidebar-section { min-height: 0; display: flex; flex: 0 0 auto; flex-direction: column; }
.projects-sidebar-section { padding-bottom: 2px; }
.projects-sidebar-heading {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 4px 12px;
}
.sidebar .projects-sidebar-heading .section-title { margin: 0; }
.sidebar-projects-toggle { 
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 8px;
  padding: 3px 6px;
  color: var(--sidebar-muted);
  background: transparent;
  font-size: 10px;
  font-weight: 680;
  line-height: 1;
  cursor: pointer;
}
.sidebar-projects-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-projects-toggle:hover { color: var(--sidebar-text); background: rgba(43,41,36,.07); }
.sidebar-projects-toggle[aria-pressed="true"] { color: var(--brand); background: var(--brand-faint); }
.sidebar-projects-toggle:focus-visible { outline: 3px solid rgba(226,18,47,.20); outline-offset: 2px; }
.section-title, .eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .105em;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 760;
}
.sidebar .section-title { margin: 0 12px 10px; color: var(--sidebar-muted); }
.sidebar-toggle { margin: 0 12px 10px; }
.project-list {
  min-height: 0;
  display: grid;
  align-content: start;
  max-height: min(280px, 32vh);
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 2px;
}
.project-button {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 9px 11px 9px 27px;
  min-height: 38px;
  line-height: 1.35;
  color: var(--sidebar-muted);
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 12.5px;
  font-weight: 590;
  transition: color .18s ease, background .18s ease;
}
.project-button::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7c7cc;
  transform: translateY(-50%);
}
.project-button:hover { color: var(--sidebar-text); background: rgba(43,41,36,.06); }
.project-button.active { color: var(--sidebar-text); background: #faf8f5; box-shadow: inset 0 0 0 1px #ece7de, var(--shadow-sm); }
.project-button.active::before { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-faint); }
.project-button.archived { opacity: 1; }
.sidebar-footer {
  display: grid;
  align-content: start;
  grid-template-rows: auto auto;
  gap: 6px;
  padding-top: 10px;
  color: var(--sidebar-muted);
  border-top: 1px solid #ded8cc;
  font-size: 12px;
  flex: 0 0 auto;
  margin-top: 10px;
}
.sidebar-user-name {
  min-width: 0;
  padding: 0 2px;
  overflow: hidden;
  color: var(--sidebar-text);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.sidebar-user-name {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 4px 6px;
  text-align: left;
  border-radius: 8px;
}

button.sidebar-user-name:hover,
button.sidebar-user-name:focus-visible {
  background: rgba(255, 255, 255, 0.48);
  outline: none;
}

.account-dialog { width: min(820px, calc(100vw - 32px)); }
.external-calendar-connect-dialog,
.external-calendar-event-dialog { width: min(620px, calc(100vw - 32px)); }
.external-calendar-account-section { display: grid; gap: 18px; }
.external-calendar-provider-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.external-calendar-connections { display: grid; gap: 14px; }
.external-calendar-connection {
  display: grid;
  gap: 12px;
  padding: var(--panel-padding-sm);
  border: 1px solid #ece7de;
  border-radius: 14px;
  background: #faf8f5;
}
.external-calendar-connection-header,
.external-calendar-connection-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.external-calendar-sources { display: grid; gap: 8px; }
.external-calendar-source { display: flex; align-items: center; gap: 9px; }
.external-calendar-source-color { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
.external-calendar-status { font-size: 0.8rem; color: var(--color-neutral-text); }
.external-calendar-readonly-notice {
  border: 1px solid var(--color-info-bg);
  border-left: 4px solid var(--color-info-text);
  border-radius: 10px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  padding: var(--panel-padding-xs);
  line-height: 1.5;
}
.external-calendar-readonly-notice::before { content: "ⓘ"; color: var(--color-info-text); font-weight: 700; margin-right: 7px; }
.notification-preferences-form {
  display: grid;
  gap: var(--form-gap);
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.notification-delivery-settings {
  overflow: hidden;
  border: 1px solid #ded8ce;
  border-radius: 18px;
  background: #faf8f5;
  box-shadow: 0 8px 24px rgba(43, 41, 36, 0.06);
}

.notification-delivery-section {
  min-width: 0;
  margin: 0;
  padding: var(--panel-padding);
  border: 0;
}

.notification-delivery-section + .notification-delivery-section {
  border-top: 1px solid #ded8ce;
}

.notification-delivery-section legend {
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.notification-delivery-section > .form-help {
  max-width: 48rem;
  margin: 6px 0 0;
}

.notification-preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.notification-preference-option {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  min-height: 82px;
  padding: var(--panel-padding-sm);
  border: 1px solid #e2ddd4;
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.notification-preference-option:hover {
  border-color: #c9c0b4;
  box-shadow: 0 4px 14px rgba(43, 41, 36, 0.08);
  transform: translateY(-1px);
}

.notification-preference-option.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand-faint);
}

.notification-preference-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.notification-checkbox {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid #9c978e;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.notification-checkbox::after {
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
  transition: opacity 120ms ease, transform 120ms ease;
}

.notification-preference-option input:checked + .notification-checkbox {
  border-color: var(--brand);
  background: var(--brand);
}

.notification-preference-option input:checked + .notification-checkbox::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.notification-preference-option input:focus-visible + .notification-checkbox {
  outline: 3px solid rgba(226, 18, 47, 0.25);
  outline-offset: 3px;
}

.notification-preference-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.notification-preference-copy strong {
  color: #2b2924;
  font-size: 0.9rem;
  line-height: 1.35;
}

.notification-preference-copy small {
  color: #6b6a63;
  font-size: 0.78rem;
  line-height: 1.45;
}

.summary-email-section {
  background: #f4f0ea;
}

.summary-email-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  align-items: end;
  gap: var(--form-gap) var(--space-6);
  margin-top: 6px;
}

.summary-email-layout .form-help {
  margin: 0;
}

.digest-frequency-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.digest-frequency-field > span {
  color: #2b2924;
  font-size: 0.78rem;
  font-weight: 750;
}

.digest-frequency-field select {
  width: 100%;
  background-color: #fff;
}

@media (max-width: 820px) {
  .notification-preference-grid,
  .summary-email-layout {
    grid-template-columns: 1fr;
  }

  .summary-email-layout {
    align-items: stretch;
  }

  .digest-frequency-field {
    max-width: none;
  }
}

@media (max-width: 460px) {
  .notification-delivery-section {
    padding: var(--panel-padding-sm);
  }

  .notification-preference-option {
    min-height: 0;
    padding: var(--panel-padding-sm);
  }
}
.calendar-external-toggle { display: inline-flex; align-items: center; gap: var(--label-gap); white-space: nowrap; font-size: 0.86rem; color: var(--muted); }
.calendar-external-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border-left: 3px solid var(--external-calendar-color, #6B6A63) !important;
  background: color-mix(in srgb, var(--external-calendar-color, #6B6A63) 10%, white) !important;
  color: #2b2924 !important;
}
.calendar-external-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 5px;
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.calendar-external-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.external-calendar-event-details { display: grid; grid-template-columns: minmax(100px, auto) 1fr; gap: 8px 14px; }
.external-calendar-event-details dt { color: var(--muted); }
.external-calendar-event-details dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .external-calendar-provider-actions,
  .external-calendar-connection-actions { align-items: stretch; flex-direction: column; }
  .external-calendar-provider-actions button,
  .external-calendar-connection-actions button { width: 100%; }
  .calendar-external-toggle { width: 100%; }
}
.sidebar-footer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-language-compact {
  position: relative;
  display: block;
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}
.sidebar-language-select {
  width: 100%;
  min-width: 58px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 24px 0 9px;
  color: var(--sidebar-muted);
  background-color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 720;
  line-height: 1;
}
.sidebar-language-select:hover { border-color: var(--line-strong); color: var(--brand); background-color: #fff; }
.sidebar-language-select:focus-visible,
.sidebar-icon-button:focus-visible { outline: 3px solid rgba(226,18,47,.20); outline-offset: 2px; }
.sidebar-icon-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0;
  color: var(--sidebar-muted);
  background: rgba(255,255,255,.65);
}
.sidebar-icon-button:hover { border-color: var(--line-strong); color: var(--brand); background: #fff; }
.sidebar-icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-help-symbol { font-size: 16px; font-weight: 760; line-height: 1; }
.organization-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.organization-manage-button {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0;
  color: var(--sidebar-muted);
  background: transparent;
}
.organization-manage-button:hover { border-color: var(--line); color: var(--brand); background: #fff; }
.organization-manage-button:focus-visible { outline: 3px solid rgba(226,18,47,.20); outline-offset: 2px; }
.organization-manage-button:disabled { opacity: .45; cursor: not-allowed; }
.organization-manage-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.project-files-action { width: 100%; margin-top: 10px; }

main {
  min-width: 0;
  width: 100%;
  max-width: 1760px;
  padding: 52px clamp(26px, 4vw, 68px) 80px;
}
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy utility"
    "actions actions";
  align-items: flex-start;
  gap: 18px 16px;
  min-width: 0;
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--brand);
  margin-bottom: var(--space-7);
}
.topbar-copy { grid-area: copy; min-width: 0; width: 100%; max-width: none; }
#project-title, #project-description { max-width: none; overflow-wrap: anywhere; }
#project-description { width: 100%; margin-bottom: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.role-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 670;
}
.role-label:not(:empty)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-neutral-text);
}
.topbar-utility { grid-area: utility; }
.topbar-actions {
  grid-area: actions;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: none;
}
.project-action-menu { position: relative; }
.project-menu-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.project-menu-caret { margin-top: -2px; color: var(--muted); font-size: 15px; line-height: 1; transition: transform .16s ease; }
.project-menu-button[aria-expanded="true"] .project-menu-caret { transform: rotate(180deg); }
.project-menu-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  width: max-content;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 40px rgba(0,0,0,.13);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.project-menu-item {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--text-soft);
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 640;
}
.project-menu-item:hover, .project-menu-item:focus-visible { color: var(--text); background: rgba(29,29,31,.055); }
.project-menu-item.danger { color: var(--danger); background: transparent; }
.project-menu-item.danger:hover, .project-menu-item.danger:focus-visible { color: var(--color-urgent-text); background: var(--color-urgent-bg); }
.project-menu-item.tertiary { min-height: 36px; border-radius: 9px; padding: 8px 10px; }

.project-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 8px 0 24px;
  padding: 28px 30px;
  border: 1px solid rgba(226,18,47,.13);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), var(--brand-faint));
  box-shadow: var(--shadow-sm);
}
.project-empty-state h2 { margin: 5px 0 7px; font-size: 22px; }
.project-empty-state p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.project-empty-state.hidden { display: none; }

/* Controls */
.primary, .secondary, .tertiary, .danger {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 980px;
  padding: 9px 17px;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.2;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.primary {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(226,18,47,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
.primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(226,18,47,.24); }
.primary:active { transform: translateY(0); box-shadow: 0 5px 12px rgba(226,18,47,.18); }
.secondary { color: var(--text); background: rgba(255,255,255,.82); border-color: var(--line); box-shadow: 0 1px 1px rgba(0,0,0,.025); }
.secondary:hover { background: #fff; border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.tertiary { color: var(--text-soft); background: transparent; border-color: transparent; }
.tertiary:hover { color: var(--text); background: rgba(29,29,31,.055); border-color: rgba(29,29,31,.04); }
.danger { color: var(--color-urgent-text); background: var(--color-urgent-bg); border-color: var(--color-urgent-bg); box-shadow: none; }
.danger:hover { color: var(--color-urgent-text); background: var(--color-urgent-bg); border-color: var(--color-urgent-text); }
button:disabled { cursor: not-allowed; opacity: .46; box-shadow: none; transform: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(226, 18, 47, 0.20);
  outline-offset: 2px;
}
.text-link, .text-button {
  color: var(--brand);
  font-weight: 650;
  text-decoration: none;
}
.text-link { text-align: center; }
.text-link:hover, .text-button:hover { text-decoration: underline; }
.text-button { border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit; }
.full-width { width: 100%; margin-top: 10px; }
.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(29,29,31,.05);
  font-size: 23px;
  line-height: 1;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.icon-button:hover { color: var(--text); background: rgba(29,29,31,.09); transform: scale(1.03); }

label { display: grid; gap: var(--label-gap); margin: var(--space-4) 0; color: var(--text-soft); font-size: 12px; font-weight: 680; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--text);
  background: rgba(255,255,255,.88);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: rgba(29,29,31,.24); }
input:focus, select:focus, textarea:focus { border-color: rgba(226,18,47,.5); background: #fff; box-shadow: 0 0 0 4px rgba(226,18,47,.08); outline: 0; }
textarea { resize: vertical; line-height: 1.5; }
input[type="checkbox"] { accent-color: var(--brand); }
input[type="file"] { padding: 7px; color: var(--muted); font-size: 12px; }
input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--text);
  background: #ededf0;
  font-weight: 650;
  cursor: pointer;
}
.compact-toggle { display: inline-flex; align-items: center; gap: var(--label-gap); margin: 0; color: var(--muted); font-size: 11px; font-weight: 650; }
.compact-toggle input { width: auto; margin: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.filters select { min-width: 190px; }

/* Metrics and sections */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 34px;
}
.metric {
  position: relative;
  min-height: 128px;
  overflow: hidden;
  padding: var(--panel-padding);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.metric strong { position: relative; z-index: 1; display: block; margin-top: 15px; font-size: 36px; line-height: 1; letter-spacing: -.055em; font-weight: 710; }
.metric:nth-child(3) strong { color: var(--brand); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 16px; }
.section-heading h2 { margin-bottom: 4px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; }

/* Compact project overview previews */
.overview-preview-panel {
  margin: 0 0 16px;
  padding: var(--panel-padding-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.overview-preview-heading { align-items: center; gap: 14px; }
.overview-preview-heading h2 { font-size: clamp(19px, 1.6vw, 24px); }
.overview-timeline-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.overview-scope-toggle { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.overview-scope-toggle button { min-height: 34px; padding: 7px 11px; font-size: 11px; white-space: nowrap; }
.overview-scope-toggle button.active { border-color: rgba(226,18,47,.2); color: var(--brand-dark); background: var(--brand-faint); }
.overview-task-list {
  display: grid;
  gap: 6px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.overview-task-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255,255,255,.76);
  text-align: left;
}
.overview-task-row:hover { border-color: var(--line-strong); background: #fff; }
.overview-task-copy { min-width: 0; display: grid; gap: 2px; }
.overview-task-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.overview-task-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.overview-task-row .badge { justify-self: end; }
.overview-timeline-preview { min-width: 0; overflow-x: hidden; }
.overview-timeline-axis { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 7px; color: var(--muted); font-size: 10px; }
.overview-timeline-list { display: grid; gap: 7px; }
.overview-timeline-row { display: grid; grid-template-columns: minmax(120px, 32%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.overview-timeline-label { min-width: 0; border: 0; padding: 0; background: transparent; text-align: left; color: var(--text); }
.overview-timeline-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.overview-timeline-label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: var(--muted); font-size: 10px; }
.overview-timeline-track { position: relative; height: 24px; min-width: 0; overflow: hidden; border-radius: 8px; background: linear-gradient(to right, rgba(29,29,31,.055) 1px, transparent 1px), var(--surface-muted); background-size: 12.5% 100%; }
.overview-timeline-bar { position: absolute; top: 5px; height: 14px; min-width: 8px; border: 0; border-radius: 999px; background: var(--status-planned-bg); }
.overview-timeline-bar.status-in_progress { background: var(--status-in-progress-bg); }
.overview-timeline-bar.status-blocked { background: var(--status-blocked-bg); }
.overview-timeline-bar.status-done { background: var(--status-done-bg); }
.overview-timeline-bar.status-backlog { background: var(--status-backlog-bg); }
.overview-timeline-bar.overdue { outline: 1px solid var(--color-urgent-text); outline-offset: 1px; }
.overview-timeline-milestone { position: absolute; top: 7px; width: 10px; height: 10px; border: 0; border-radius: 2px; background: var(--status-planned-text); transform: rotate(45deg); }
.overview-timeline-milestone.status-in_progress { background: var(--status-in-progress-text); }
.overview-timeline-milestone.status-blocked { background: var(--status-blocked-text); }
.overview-timeline-milestone.status-done { background: var(--status-done-text); }
.overview-timeline-milestone.status-backlog { background: var(--status-backlog-text); }
.overview-timeline-milestone.overdue { box-shadow: 0 0 0 2px var(--color-urgent-text); }
.overview-preview-more { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.compact-overview-action { flex: 0 0 auto; min-height: 34px; padding: 7px 11px; font-size: 11px; }
@media (max-width: 700px) {
  .overview-timeline-heading-actions { width:100%; justify-content:space-between; }
  .overview-timeline-range-toggle { flex-wrap:nowrap; }
  .overview-timeline-row { grid-template-columns:minmax(96px, 40%) minmax(0, 1fr); gap:8px; }
}

/* Board */
.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(238px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: #c7c7cc transparent;
}
.column {
  position: relative;
  min-height: 430px;
  padding: 13px;
  border: 1px solid rgba(29,29,31,.055);
  border-radius: 20px;
  background: var(--color-neutral-bg);
}
.column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--status-backlog-text);
}
.column.status-planned::before { background: var(--status-planned-text); }
.column.status-in_progress::before { background: var(--status-in-progress-text); }
.column.status-blocked::before { background: var(--status-blocked-text); }
.column.status-done::before { background: var(--status-done-text); }
.column-title { display: flex; justify-content: space-between; align-items: center; padding: 5px 4px 13px; color: var(--text-soft); font-size: 12px; font-weight: 730; letter-spacing: -.005em; }
.column-title span {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--badge-neutral-text);
  background: var(--badge-neutral-bg);
  font-size: 10px;
}
.task-list { display: grid; align-content: start; gap: 10px; }
.task-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(29,29,31,.075);
  border-radius: 16px;
  padding: 15px;
  color: var(--text);
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 1px rgba(0,0,0,.025), 0 6px 18px rgba(0,0,0,.035);
  text-align: left;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.task-card:hover { z-index: 1; border-color: rgba(29,29,31,.13); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.09); }
.task-card h3 { margin: 13px 0 14px; font-size: 14px; line-height: 1.4; font-weight: 660; }
.task-card.archived { opacity: .58; }
.task-card[draggable="true"] { cursor: grab; }
.task-card.dragging { opacity: .48; transform: scale(.985); cursor: grabbing; }
.column.drag-over { border-color: rgba(226,18,47,.35); background: var(--brand-faint); box-shadow: inset 0 0 0 2px rgba(226,18,47,.08); }
.column.drag-over::before { height: 3px; background: var(--brand); }
.task-label-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: -4px 0 12px; }
.label-chip, .label-chip-more { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 720; line-height: 1; }
.label-chip { color: var(--badge-neutral-text); background: var(--badge-neutral-bg); border: 1px solid rgba(29,29,31,.08); }
.label-color-dot { width: 7px; height: 7px; flex: 0 0 7px; }
.label-chip-more { color: var(--badge-neutral-text); background: var(--badge-neutral-bg); }
.label-chip-remove { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border: 0; border-radius: 50%; padding: 0; color: inherit; background: transparent; font-size: 13px; line-height: 1; }
.label-chip-remove:hover { background: rgba(0,0,0,.07); }
.checklist-progress { display: block; margin-top: 11px; color: var(--muted); font-size: 10px; font-weight: 650; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.badge, .archive-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.badge { color: var(--priority-low-text); background: var(--priority-low-bg); }
.badge.medium { color: var(--priority-medium-text); background: var(--priority-medium-bg); }
.badge.high { color: var(--priority-high-text); background: var(--priority-high-bg); }
.badge.critical { color: var(--priority-critical-text); background: var(--priority-critical-bg); }
.archive-label { margin-left: 6px; color: var(--badge-neutral-text); background: var(--badge-neutral-bg); }
.avatar-stack { display: flex; justify-content: flex-end; }
.avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: var(--text-soft);
  background: linear-gradient(145deg, #f2f2f5, #dedee3);
  font-size: 9px;
  font-weight: 760;
}
.avatar:first-child { margin-left: 0; }
.empty { padding: 34px 8px; color: var(--muted); text-align: center; font-size: 12px; }
.column .empty { padding: 34px 6px; border: 1px dashed rgba(29,29,31,.12); border-radius: 14px; }

/* Panels, attachments, search and feed */
.attachment-panel, .search-form, .reminder-settings-form {
  border: 1px solid rgba(29,29,31,.075);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.attachment-panel { margin: 0 0 34px; padding: var(--panel-padding); }
.attachment-upload-form { display: flex; align-items: center; gap: 9px; margin: 0; }
.attachment-upload-form input[type="file"] { max-width: 340px; }
.attachment-list { display: grid; gap: 8px; margin-top: 14px; }
.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--panel-padding-xs);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248,248,250,.82);
}
.attachment-item strong, .attachment-item span { display: block; overflow-wrap: anywhere; }
.attachment-item strong { font-size: 12px; }
.attachment-item span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.attachment-download { white-space: nowrap; text-decoration: none; }
.attachment-scan-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 10px; color: var(--badge-neutral-text); background: var(--badge-neutral-bg); font-size: 10px; font-weight: 700; }
.attachment-scan-status.pending { color: var(--badge-warning-text); background: var(--badge-warning-bg); }
.attachment-scan-status.infected { color: var(--badge-urgent-text); background: var(--badge-urgent-bg); }

.search-form { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: var(--space-3) var(--form-gap); padding: var(--panel-padding); }
.search-form label { margin: 0; }
.search-query { grid-column: span 2; }
.search-submit { align-self: end; }
.search-summary { margin: 18px 2px 10px; color: var(--muted); font-size: 12px; font-weight: 650; }
.search-results, .notification-list, .activity-list { display: grid; gap: 10px; }
.search-result, .notification-item, .activity-item {
  border: 1px solid rgba(29,29,31,.075);
  border-radius: 17px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 2px 12px rgba(0,0,0,.025);
}
.search-result {
  position: relative;
  width: 100%;
  display: grid;
  gap: 5px;
  padding: var(--panel-padding-sm) var(--panel-padding);
  color: var(--text);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.search-result:hover { border-color: rgba(226,18,47,.22); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.search-result-type { color: var(--brand); font-size: 9px; font-weight: 790; text-transform: uppercase; letter-spacing: .08em; }
.search-result-project { color: var(--muted); font-size: 11px; }
.search-result p { margin: 5px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.search-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 12px; }

.notification-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: var(--panel-padding-sm) var(--panel-padding);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.notification-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.notification-item.unread { border-color: var(--brand); }
.notification-item h3 { margin: 4px 0 5px; font-size: 15px; }
.notification-item p { margin: 0; color: var(--text-soft); font-size: 12px; }
.notification-meta { min-width: 150px; display: grid; justify-items: end; align-content: space-between; color: var(--muted); font-size: 10px; }
.activity-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: var(--panel-padding-sm); color: var(--text-soft); font-size: 12px; }
.activity-item time { color: var(--muted); font-size: 10px; }
.notice, .error { padding: var(--panel-padding-xs); border-radius: 12px; line-height: 1.5; overflow-wrap: anywhere; font-size: 12px; }
.notice { color: var(--badge-success-text); background: var(--badge-success-bg); border: 1px solid var(--color-success-bg); }
.notice code { user-select: all; font-weight: 800; }
.error { color: var(--badge-urgent-text); background: var(--badge-urgent-bg); border: 1px solid var(--color-urgent-bg); }

/* Dialogs and task drawer */
dialog {
  width: min(700px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dialog-scroll {
  width: 100%;
  max-height: calc(100vh - 34px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: var(--dialog-inset);
}
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.dialog-header h2 { margin-top: 5px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--form-gap); }
fieldset { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; }
legend { padding: 0 7px; color: var(--text-soft); font-size: 12px; font-weight: 690; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: 4px; }
.check-grid label { display: flex; align-items: center; gap: var(--label-gap); margin: 0; padding: 8px; border-radius: 10px; font-weight: 520; }
.check-grid label:hover { background: var(--surface-muted); }
.check-grid input { width: auto; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: 24px; }
.drawer {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(570px, 100vw);
  overflow-y: auto;
  background: rgba(255,255,255,.97);
  box-shadow: -24px 0 70px rgba(0,0,0,.15);
  transform: translateX(105%);
  transition: transform .30s cubic-bezier(.22,.61,.36,1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  --drawer-inset: var(--panel-padding-lg);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding:var(--space-3) var(--drawer-inset);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
#task-detail, .chat-panel { padding:var(--drawer-inset); }
.drawer-error { margin:0 var(--drawer-inset); }
.detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-bottom: 14px; }
.task-detail-heading { padding-right: 8px; }
.task-title-row { display: flex; align-items: center; gap: 6px; }
.detail-title { margin: 9px 0 7px; font-size: 30px; line-height: 1.08; letter-spacing: -.045em; }
.detail-description { margin-bottom: 0; color: var(--muted); white-space: pre-wrap; line-height: 1.55; }
.detail-description.is-empty { color: var(--muted-light); font-style: italic; }
.task-quick-meta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; margin: 17px 0 12px; }
.task-status-control, .task-quick-item { min-height: 50px; margin: 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(248,248,250,.82); }
.task-status-control { min-width: 142px; display: grid; gap: 3px; padding: 7px 9px; }
.task-status-control > span, .task-quick-item > span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
.task-status-control select { min-width: 122px; border: 0; padding: 2px 20px 2px 0; background: transparent; box-shadow: none; font-size: 12px; font-weight: 710; }
.task-status-control select:focus { box-shadow: none; }
.task-quick-item { min-width: 118px; display: grid; align-content: center; gap: 3px; padding: 8px 11px; }
.task-quick-item strong { overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.task-visible-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 8px 0 12px; }
.form-hint { margin: -4px 0 8px; padding: 9px 11px; border-radius: 10px; background: rgba(29,29,31,.04); color: var(--text-soft); font-size: 12px; line-height: 1.45; }
.task-meta-details { margin-top: 7px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.58); }
.task-meta-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--text-soft); cursor: pointer; font-size: 11px; font-weight: 720; list-style: none; }
.task-meta-details > summary::-webkit-details-marker { display: none; }
.task-meta-details > summary::after { content: "+"; width: 20px; height: 20px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; color: var(--muted); background: rgba(29,29,31,.05); font-size: 14px; font-weight: 500; }
.task-meta-details[open] > summary::after { content: "−"; }
.task-meta-details > summary small { color: var(--muted); font-size: 9px; font-weight: 560; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; padding: 0 11px 11px; }
.detail-box { min-width: 0; padding: 10px 11px; border: 1px solid rgba(29,29,31,.065); border-radius: 11px; background: var(--surface-muted); }
.detail-box span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; }
.detail-box strong { display: block; overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.detail-box.is-empty { border-color: transparent; background: rgba(248,248,250,.48); }
.detail-box.is-empty span, .detail-box.is-empty strong { color: var(--muted-light); }
.task-feature-panel, .task-attachment-panel { padding:var(--drawer-inset); border-top: 1px solid var(--line); }
.task-feature-panel h3, .task-attachment-panel h3 { margin: 5px 0 0; }
.feature-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.feature-progress { color: var(--muted); font-size: 10px; font-weight: 680; }
.checklist-list { display: grid; gap: 7px; }
.checklist-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.checklist-item.done .checklist-text { color: var(--muted); text-decoration: line-through; }
.checklist-toggle { width: 18px; height: 18px; margin: 0; }
.checklist-text { margin: 0; padding: 7px 8px; border-color: transparent; background: transparent; box-shadow: none; }
.checklist-text:focus { background: #fff; }
.checklist-actions { display: flex; gap: 3px; }
.compact-icon { width: 28px; height: 28px; font-size: 14px; }
.danger-icon { color: var(--color-urgent-text); }
.inline-feature-form, .label-create-form { display: flex; align-items: center; gap: var(--space-2); margin-top: 11px; }
.inline-feature-form input, .inline-feature-form select, .label-create-form input { margin: 0; }
.inline-feature-form button, .label-create-form button { white-space: nowrap; }
.label-create-form { display: grid; grid-template-columns: minmax(0,1fr) 48px auto; }
.label-create-form input[type="color"] { height: 42px; padding: 5px; }
.detail-labels { margin: 0 0 10px; }
.task-attachment-panel { }
.task-attachment-panel h3, .chat-panel h3 { margin: 5px 0 0; }
.chat-panel { border-top: 1px solid var(--line); }
.comment-list { display: grid; gap: 13px; margin: 16px 0 0; }
.comment-form-first { margin-bottom: 8px; }
.comment { display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: 10px; }
.comment .avatar { width: 36px; height: 36px; margin: 0; }
.bubble { padding: 11px 13px; border-radius: 5px 15px 15px; background: #f0f0f3; }
.bubble strong { font-size: 11px; }
.bubble p { margin: 6px 0 0; color: var(--text-soft); white-space: pre-wrap; font-size: 12px; }
.comment-time { margin-left: 5px; color: var(--muted); font-size: 9px; font-weight: 400; }
.comment-form { display: grid; gap: 9px; }
.comment-form button { justify-self: end; }
.scrim { position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* Authentication */
.login-view {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background:
    radial-gradient(circle at 18% 12%, rgba(226,18,47,.11), transparent 29rem),
    radial-gradient(circle at 82% 85%, rgba(255,255,255,.92), transparent 30rem),
    linear-gradient(150deg, #f2f2f4 0%, #fafafa 52%, #ededf0 100%);
}
.login-view::before, .login-view::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
}
.login-view::before { width: 430px; height: 430px; top: -230px; right: -100px; border: 1px solid rgba(226,18,47,.12); box-shadow: inset 0 0 100px rgba(226,18,47,.04); }
.login-view::after { width: 280px; height: 280px; bottom: -180px; left: -70px; background: rgba(226,18,47,.05); }
.login-card {
  width: min(460px, 100%);
  padding: 34px 36px 32px;
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 30px 80px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
}
.login-brand { margin-bottom: 34px; color: var(--text); }
.login-card h1 { margin: 8px 0 10px; font-size: clamp(34px, 8vw, 46px); }
.login-card p { color: var(--muted); line-height: 1.55; }
.login-card .primary { width: 100%; margin-top: 8px; }
.login-hint { margin: 17px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

/* Responsive */
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .sidebar { padding-inline: 16px; }
  main { padding-inline: 28px; }
  .board { grid-template-columns: repeat(5, minmax(228px, 1fr)); }
}
@media (min-width: 901px) and (max-height: 820px) {
  .sidebar { padding-top: 18px; padding-bottom: 14px; }
  .sidebar > .brand { margin-bottom: 14px; }
  .organization-switcher { padding-top: 8px; padding-bottom: 8px; }
  .organization-select { margin: 4px 0 5px; padding-block: 8px; }
  .sidebar-scroll-region > nav { gap: 3px; margin: 10px 0 9px; }
  .sidebar-scroll-region > nav .nav-item { padding-top: 6px; padding-bottom: 6px; }
  .project-list { max-height: min(200px, 26vh); }
  .sidebar-footer { gap: 4px; margin-top: 8px; padding-top: 8px; }
  .sidebar-user-name { font-size: 11px; }
  .sidebar-language-select, .sidebar-icon-button { height: 30px; }
  .sidebar-icon-button { width: 30px; flex-basis: 30px; }
}
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar > .brand { margin-bottom: 0; }
  .sidebar .brand-logo { width: min(180px, 100%); max-height: 42px; }
  .sidebar-scroll-region { display: contents; }
  .sidebar-scroll-region > nav { margin: 0; }
  nav { display: flex; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; }
  .nav-item { width: 58px; min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 6px 4px; font-size: 8px; text-align: center; }
  .compact-organization-nav { display: grid; }
  .nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .nav-icon svg { width: 17px; height: 17px; }
  .nav-label { width: 100%; text-overflow: ellipsis; }
  .nav-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 8px; }
  .sidebar-section { display: none; }
  .sidebar-footer { display: flex; align-items: center; gap: 0; margin-top: 0; padding: 0; border: 0; }
  .sidebar-user-name { display: none; }
  .sidebar-footer-tools { gap: 5px; }
  .sidebar-language-compact { flex: 0 0 56px; }
  .sidebar-language-select { width: 56px; min-width: 56px; height: 34px; }
  .sidebar-icon-button { width: 34px; height: 34px; flex-basis: 34px; }
  main { padding: 34px 20px 62px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-form { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 620px) {
  h1 { font-size: 38px; }
  .sidebar { grid-template-columns: auto 1fr; }
  .sidebar .brand-logo { width: min(144px, 100%); max-height: 34px; }
  nav { justify-content: flex-end; }
  .nav-item { min-width: 38px; padding: 8px; }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sidebar-footer { display:flex; grid-column:1 / -1; justify-content:flex-start; }
  main { padding: 28px 14px 54px; }
  .topbar { gap: 18px 12px; padding-bottom: var(--space-5); }
  .topbar-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .project-empty-state { align-items: stretch; flex-direction: column; padding: 22px; }
  .project-empty-state .primary { width: 100%; }
  .topbar-actions .primary { grid-column: 1 / -1; }
  .project-action-menu { min-width: 0; }
  .project-menu-button { width: 100%; }
  .project-menu-popover { right: 0; min-width: min(240px, calc(100vw - 28px)); }
  .metrics { gap: 10px; margin: 24px 0 28px; }
  .overview-preview-panel { padding: var(--panel-padding-sm); }
  .overview-preview-heading { align-items: stretch; }
  .overview-scope-toggle { justify-content: flex-start; }
  .metric { min-height: 108px; padding: var(--panel-padding-sm); border-radius: 20px; }
  .metric strong { font-size: 31px; }
  .section-heading { display: grid; align-items: start; }
  .filters { justify-content: stretch; }
  .filters select { width: 100%; }
  .attachment-panel { padding: var(--panel-padding-sm); border-radius: 20px; }
  .attachment-upload-form, .attachment-item { align-items: stretch; flex-direction: column; }
  .attachment-upload-form input[type="file"] { max-width: none; }
  .search-form { grid-template-columns: 1fr; padding: var(--panel-padding-sm); border-radius: 20px; }
  .search-query { grid-column: auto; }
  .notification-item { display: grid; }
  .notification-meta { min-width: 0; justify-items: start; gap: 8px; }
  .activity-item { grid-template-columns: 38px 1fr; }
  .activity-item time { grid-column: 2; }
  .form-grid, .check-grid, .detail-grid, .task-visible-meta { grid-template-columns: 1fr; }
  .dialog-scroll { padding: var(--dialog-inset);  --dialog-inset: var(--panel-padding); }
  .drawer { width: 100vw;   --drawer-inset: var(--panel-padding-lg);
}
  #task-detail, .chat-panel, .task-feature-panel, .task-attachment-panel { padding-inline:var(--drawer-inset); }
  .detail-actions { justify-content: flex-start; }
  .task-quick-meta { display: grid; grid-template-columns: 1fr 1fr; }
  .task-status-control { grid-column: 1 / -1; }
  .task-quick-item { min-width: 0; }
  .task-meta-details > summary small { display: none; }
  .inline-feature-form { align-items: stretch; flex-direction: column; }
  .label-create-form { grid-template-columns: minmax(0,1fr) 48px; }
  .label-create-form button { grid-column: 1 / -1; }
  .drawer-error { margin-inline:var(--drawer-inset); }
  .login-view { padding: 18px; }
  .login-card { padding: 28px 24px 26px; border-radius: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 0.34.0 collaboration and calendar */
.dependency-warning { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--color-warning-text); font-size: 10px; font-weight: 700; }
.dependency-warning::before { content: "⚠"; color: var(--color-warning-text); }
.dependency-groups { display: grid; gap: 14px; }
.dependency-group h4 { margin: 0 0 7px; color: var(--text-soft); font-size: 11px; }
.dependency-list { display: grid; gap: 7px; }
.dependency-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.dependency-link { overflow: hidden; border: 0; padding: 0; color: var(--text-soft); background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.dependency-link:hover { color: var(--brand-dark); }
.dependency-state { border-radius: 999px; padding: 4px 7px; color: var(--badge-warning-text); background: var(--badge-warning-bg); font-size: 9px; font-weight: 760; }
.dependency-state.resolved { color: var(--badge-success-text); background: var(--badge-success-bg); }
.feature-help { color: var(--muted); font-size: 10px; line-height: 1.45; }
.comment-mention-tools { display: grid; gap: 7px; }
.mention-options { display: flex; flex-wrap: wrap; gap: 6px; }
.mention-button { border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; color: var(--text-soft); background: var(--surface-muted); font-size: 10px; font-weight: 650; }
.mention-button:hover { border-color: rgba(226,18,47,.25); color: var(--brand-dark); background: var(--brand-faint); }
.comment-mentions { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
.app-shell[data-active-view="calendar"] main { padding-bottom: 0; }
.calendar-heading { align-items: center; }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.calendar-controls { display: flex; gap: 7px; }
.calendar-view-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-muted);
}
.calendar-view-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 7px 12px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}
.calendar-view-toggle button:hover { color: var(--brand-dark); background: var(--brand-faint); }
.calendar-view-toggle button.active,
.calendar-view-toggle button[aria-pressed="true"] { color: var(--brand-dark); background: #fff; box-shadow: var(--shadow-sm); }
#calendar-prev::before { content: "←"; }
#calendar-next::before { content: "→"; }
.calendar-month-title { margin: 2px 0 11px; font-size: 22px; font-weight: 720; letter-spacing: -.025em; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
  gap: 1px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
  box-shadow: var(--shadow-sm);
  overscroll-behavior-inline: contain;
}
.calendar-weekday { min-width: 100px; padding: 9px 10px; color: var(--muted); background: #f2f2f4; font-size: 10px; font-weight: 760; text-transform: uppercase; }
.calendar-day { min-width: 100px; min-height: 112px; padding: 9px; background: var(--surface); }
.calendar-day.outside-month { background: #fafafa; }
.calendar-day.today { box-shadow: inset 0 0 0 2px rgba(226,18,47,.22); }
.calendar-day:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(226,18,47,.24); outline-offset: -3px; }
.calendar-day-number { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 720; }
.calendar-day.today .calendar-day-number { color: var(--brand-dark); }
.calendar-events { display: grid; gap: 5px; }
.calendar-task { width: 100%; overflow: hidden; border: 1px solid rgba(29,29,31,.07); border-radius: 9px; padding: 6px 7px; color: var(--text-soft); background: #f7f7f9; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.calendar-task:hover { color: var(--brand-dark); background: var(--brand-faint); }
.calendar-more { width: 100%; overflow: hidden; border: 0; padding: 0 3px; color: var(--brand-dark); background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 760; line-height: 1.2; }
.calendar-more:hover { text-decoration: underline; }
.calendar-grid[data-calendar-view="month"] { --calendar-month-row-height: clamp(64px, calc((100dvh - 410px) / 6), 78px); }
.calendar-grid[data-calendar-view="month"] .calendar-weekday { padding-block: 7px; }
.calendar-grid[data-calendar-view="month"] .calendar-day { height: var(--calendar-month-row-height); min-height: 0; overflow: hidden; padding: 3px 5px; }
.calendar-grid[data-calendar-view="month"] .calendar-day-number { margin-bottom: 3px; font-size: 9px; line-height: 1.15; }
.calendar-grid[data-calendar-view="month"] .calendar-events { gap: 2px; }
.calendar-grid[data-calendar-view="month"] .calendar-task { border-radius: 6px; padding: 1px 4px; font-size: 9px; line-height: 1.2; }
.calendar-grid[data-calendar-view="week"] .calendar-day { min-height: clamp(118px, 24vh, 210px); height: auto; }
.calendar-empty-month { grid-column: 1 / -1; padding: 18px; color: var(--muted); background: var(--surface); text-align: center; font-size: 12px; }

@media (max-width: 620px) {
  .calendar-toolbar { width: 100%; display: grid; grid-template-columns: 1fr; justify-content: stretch; }
  .calendar-controls { width: 100%; }
  .calendar-controls button { flex: 1; }
  .calendar-view-toggle { width: 100%; }
  .calendar-view-toggle button { flex: 1; }
  .calendar-grid[data-calendar-view="month"] { --calendar-month-row-height: 72px; }
  .dependency-row { grid-template-columns: minmax(0,1fr) auto; }
  .dependency-row .danger-icon { grid-column: 2; }
}

/* 0.35.0 time tracking, recurrence and reporting */
.time-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
}
.timer-running {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: var(--panel-padding-xs);
  border: 1px solid var(--color-info-bg);
  border-radius: 12px;
  background: var(--color-info-bg);
}
.time-manual { margin: 12px 0; }
.time-manual summary {
  cursor: pointer;
  color: var(--text-soft);
  font-weight: 680;
  font-size: 13px;
}
.time-entry-form {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(120px, .7fr) minmax(180px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}
.time-entry-form label { margin: 0; }
.time-entry-list { display: grid; gap: 8px; margin-top: 12px; }
.time-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.time-entry-row > div { display: grid; gap: 2px; }
.time-entry-row span, .time-entry-row small { color: var(--muted); font-size: 12px; }
.recurrence-weekdays {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.recurrence-weekdays > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.weekday-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.weekday-options label {
  display: inline-flex;
  align-items: center;
  gap: var(--label-gap);
  margin: 0;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
}
.reporting-scope { min-width: 190px; margin: 0; }
.reporting-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.reporting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.report-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding:var(--panel-padding);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.report-card h3 { margin: 0 0 14px; font-size: 16px; }
.reporting-bar-row, .reporting-member-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.reporting-bar-row:first-of-type, .reporting-member-row:first-of-type { border-top: 0; }
.table-scroll { overflow-x: auto; }
.reporting-projects table { width: 100%; border-collapse: collapse; }
.reporting-projects th, .reporting-projects td {
  padding: 10px 8px;
  text-align: left;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.reporting-projects th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) {
  .reporting-metrics, .reporting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-entry-form { grid-template-columns: 1fr 1fr; }
  .time-entry-form .time-note { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .reporting-metrics, .reporting-grid { grid-template-columns: 1fr; }
  .time-entry-form { grid-template-columns: 1fr; }
  .time-entry-form .time-note { grid-column: auto; }
  .timer-running { align-items: stretch; flex-direction: column; }
}


/* 0.36.0 attachment versions, my tasks and external media */
.my-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.my-task-row:hover, .my-task-row:focus-visible { border-color: rgba(226, 18, 47, .35); box-shadow: var(--shadow-soft); }
.my-task-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-task-row span, .my-task-row small { color: var(--muted); }
.attachment-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.attachment-version-history { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.attachment-version-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; }
.attachment-version-meta { display: grid; gap: 2px; min-width: 0; }
.attachment-version-meta small { color: var(--muted); }
.external-link-list { display: grid; gap: 12px; }
.external-link-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface-soft); }
.external-link-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.external-link-card a { overflow-wrap: anywhere; }
.media-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 10px; overflow: hidden; border-radius: 12px; background: #111; }
.media-embed iframe { width: 100%; height: 100%; border: 0; }
.external-link-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, .6fr) auto; gap: 8px; margin-top: 12px; align-items: end; }
.external-link-security { color: var(--muted); font-size: 12px; margin-top: 8px; }
@media (max-width: 700px) {
  .external-link-form { grid-template-columns: 1fr; }
  .my-task-row { grid-template-columns: 1fr; }
}

.attachment-version-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.attachment-history { width: min(560px, 100%); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.attachment-history-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; }
.attachment-history-row > span { display: grid; gap: 2px; }
.attachment-history-row small { color: var(--muted); }
.external-link-item { position: relative; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: var(--panel-padding-xs); background: var(--surface-soft); }
.external-link-row { display: grid; gap: 3px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.external-link-row span { color: var(--muted); font-size: 12px; }

/* 0.39.0 i18n, tooltips and help */
.language-control {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.language-control select { min-width: 132px; }
.login-card .language-control { justify-self: end; width: min(180px, 100%); }
.tooltip-help {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.tooltip-help:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.app-tooltip-popover {
  position: fixed;
  inset: auto;
  z-index: 35;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #1f2430;
  box-shadow: 0 12px 32px rgba(15,23,42,.22);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
.app-tooltip-popover[hidden] { display: none; }
.app-tooltip-popover::before {
  content: "";
  position: absolute;
  left: var(--tooltip-arrow-left, 24px);
  width: 10px;
  height: 10px;
  background: #1f2430;
  transform: translateX(-50%) rotate(45deg);
}
.app-tooltip-popover[data-placement="bottom"]::before { top: -5px; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.app-tooltip-popover[data-placement="top"]::before { bottom: -5px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.help-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(86vh, 880px); }
.help-dialog .dialog-scroll { max-height: min(86vh, 880px); }
.help-dialog .dialog-header { position: sticky; top: calc(-1 * var(--dialog-inset)); z-index: 2; margin: calc(-1 * var(--dialog-inset)) calc(-1 * var(--dialog-inset)) 0; padding: var(--dialog-inset) var(--dialog-inset) var(--space-3); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.help-tabs { display:flex; gap:6px; margin:0 0 20px; padding:4px; border-radius:12px; background:var(--surface-soft); }
.help-tabs button { flex:1; min-height:38px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-weight:750; }
.help-tabs button.active,.help-tabs button[aria-selected="true"] { color:var(--text); background:#fff; box-shadow:var(--shadow-sm); }
.help-intro { margin: 10px 0 20px; color: var(--muted); line-height: 1.55; }
.help-workflow { counter-reset: help-step; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.help-step { counter-increment: help-step; position: relative; padding: 15px 16px 15px 58px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); cursor: help; }
.help-step::before { content: counter(help-step); position: absolute; top: 15px; left: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; }
.help-step h3 { margin: 2px 0 6px; font-size: 15px; }
.help-step p { margin: 0; color: var(--text-soft); line-height: 1.5; font-size: 13px; }
.help-step-example { max-height: 0; margin-top: 0; overflow: hidden; color: var(--text-soft); font-size: 13px; line-height: 1.5; opacity: 0; transition: max-height .2s ease, margin-top .2s ease, opacity .2s ease; }
.help-step-example strong { color: var(--brand-dark); }
.help-step:hover .help-step-example, .help-step:focus .help-step-example, .help-step:focus-within .help-step-example { max-height: 120px; margin-top: 9px; opacity: 1; }
.help-step:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.help-visual-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.help-visual-section > h3 { margin: 0 0 7px; font-size: 18px; }
.help-visual-section > p { margin: 0 0 14px; color: var(--text-soft); line-height: 1.5; font-size: 13px; }
.help-communication-intro h3 { margin:0 0 7px; font-size:22px; }
.help-communication-intro p { margin:0 0 16px; color:var(--text-soft); line-height:1.55; }
.help-communication-diagram { overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#fff,#faf8f5); }
.help-communication-diagram:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.help-communication-diagram svg { display:block; width:100%; min-width:680px; height:auto; }
.help-diagram-lines path { fill:none; stroke:#a8a49b; stroke-width:2; marker-end:url(#help-arrow); }
#help-arrow path { fill:#a8a49b; }
.help-diagram-node rect { fill:#fff; stroke:#ded9d0; stroke-width:1.5; }
.help-diagram-node.accent rect { fill:#fff5f6; stroke:#E2122F; }
.help-diagram-node.warning rect { fill:var(--color-warning-bg); stroke:var(--color-warning-text); }
.help-diagram-node.danger rect { fill:var(--color-urgent-bg); stroke:var(--color-urgent-text); }
.help-diagram-node foreignObject div { height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:10px; color:#2b2924; text-align:center; font:12px/1.25 system-ui,sans-serif; }
.help-diagram-node foreignObject strong { font-size:13px; }
.help-diagram-node foreignObject span { color:#6b6a63; }
.help-communication-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.help-communication-cards article { padding:var(--panel-padding-sm); border:1px solid var(--line); border-radius:14px; background:#fff; }
.help-communication-cards h4 { margin:0 0 6px; font-size:14px; }
.help-communication-cards p { margin:0; color:var(--text-soft); font-size:12px; line-height:1.5; }
.help-card-link { display:inline-flex; margin-top:10px; color:var(--brand-dark); font-size:12px; font-weight:750; text-decoration:underline; text-underline-offset:2px; }
.help-card-link:hover { color:var(--brand); }
.help-card-link:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:3px; }
.help-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.help-table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.help-notification-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 12px; }
.help-notification-table th, .help-notification-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.4; }
.help-notification-table th { background: var(--surface-soft); color: var(--text); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.help-notification-table tr:last-child td { border-bottom: 0; }
.help-notification-table th:nth-child(1) { width: 34%; }
.help-notification-table th:nth-child(2) { width: 38%; }
.help-channel { display: inline-flex; margin: 0 4px 4px 0; padding: 3px 7px; border-radius: 999px; background: var(--badge-info-bg); color: var(--badge-info-text); font-weight: 700; white-space: nowrap; }
.help-channel.optional { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.help-footnote { margin-top: 10px !important; font-size: 12px !important; }
.help-procurement-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 8px; }
.help-flow-node { display: grid; grid-template-rows: auto auto 1fr; gap: 5px; min-width: 0; padding: var(--panel-padding-xs); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.help-flow-node > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 999px; background: var(--color-info-bg); color: var(--color-info-text); font-size: 12px; font-weight: 800; }
.help-flow-node strong { font-size: 13px; line-height: 1.25; }
.help-flow-node small { color: var(--text-soft); font-size: 11px; line-height: 1.4; }
.help-flow-node.complete { border-color: var(--color-success-text); background: var(--color-success-bg); }
.help-flow-node.complete > span { background: var(--color-success-bg); color: var(--color-success-text); }
.help-flow-arrow { align-self: center; color: var(--color-info-text); font-size: 21px; font-weight: 800; }
.help-flow-alternatives { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.help-flow-alternatives span { padding: 6px 9px; border-radius: 9px; background: var(--badge-neutral-bg); color: var(--badge-neutral-text); font-size: 11px; }
.app-message-dialog { width: min(500px, calc(100vw - 28px)); }
.app-message-text { margin: 8px 0 20px; color: var(--text-soft); line-height: 1.55; }
.app-message-error { margin: 8px 0 18px; }
@media (max-width: 900px) {
  .sidebar-language select { width: 84px; }
}
@media (max-width: 620px) {
  .help-dialog .dialog-header { top: calc(-1 * var(--dialog-inset)); margin: calc(-1 * var(--dialog-inset)) calc(-1 * var(--dialog-inset)) 0; padding: var(--dialog-inset) var(--dialog-inset) var(--space-3); }
  .help-communication-cards { grid-template-columns:1fr; }
  .help-step { padding-left: 54px; }
  .help-procurement-flow { grid-template-columns: 1fr; }
  .help-flow-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .help-step-example { transition: none; } }
.topbar-utility { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; max-width:100%; flex-wrap:wrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 620px) {
  .topbar-utility { display: flex; align-items: center; gap: 7px; margin-left: auto; }
  .compact-language select { min-width: 70px; width: 70px; padding: 7px 8px; font-size: 11px; }
  .compact-help { width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: 10px; }
}


/* 0.40.0 Gantt / timeline */
.gantt-heading { align-items: end; }
.gantt-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.gantt-controls .active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-faint); }
.gantt-help { margin: -4px 0 14px; color: var(--muted); }
.gantt-content { min-width: 0; }
.gantt-scroll { overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-soft); }
.gantt-canvas { --gantt-label-width: 220px; min-width: 100%; position: relative; }
.gantt-axis-row, .gantt-row { display: grid; grid-template-columns: var(--gantt-label-width) auto; min-height: 48px; }
.gantt-axis-row { position: sticky; top: 0; z-index: 5; background: #f8f8fa; border-bottom: 1px solid var(--line); }
.gantt-axis-label { display: flex; align-items: center; padding: 0 14px; font-size: 12px; font-weight: 700; color: var(--muted); border-right: 1px solid var(--line); }
.gantt-axis { display: flex; min-height: 42px; }
.gantt-axis-segment { flex: 0 0 auto; padding: 11px 8px; border-right: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.gantt-body { position: relative; }
.gantt-row { min-height: 0; height: 48px; grid-template-rows: 48px; border-bottom: 1px solid var(--line-soft, #ececf0); }
.gantt-row:last-child { border-bottom: 0; }
.gantt-row-label { position: sticky; left: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: var(--gantt-label-width); min-height: 0; height: 48px; box-sizing: border-box; padding: 7px 12px; border: 0; border-right: 1px solid var(--line); background: #fff; text-align: left; color: var(--ink); cursor: pointer; }
.gantt-row-label:hover { background: var(--surface-soft, #fafafa); }
.gantt-row-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.gantt-row-copy > span { color: var(--muted); font-size: 11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gantt-track { position: relative; min-height: 0; height: 48px; background-image: linear-gradient(to right, rgba(17,24,39,.055) 1px, transparent 1px); }
.gantt-bar { position: absolute; top: 10px; height: 28px; min-width: 18px; border: 0; border-radius: 8px; padding: 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-neutral-text); font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.1); z-index: 3; }
.gantt-bar.status-backlog { background: var(--status-backlog-bg); color: var(--status-backlog-text); }
.gantt-bar.status-planned { background: var(--status-planned-bg); color: var(--status-planned-text); }
.gantt-bar.status-in_progress { background: var(--status-in-progress-bg); color: var(--status-in-progress-text); }
.gantt-bar.status-blocked { background: var(--status-blocked-bg); color: var(--status-blocked-text); }
.gantt-bar.status-done { background: var(--status-done-bg); color: var(--status-done-text); }
.gantt-milestone { position: absolute; top: 15px; width: 18px; height: 18px; transform: rotate(45deg); border: 2px solid #fff; border-radius: 4px; background: var(--status-backlog-bg); box-shadow: 0 0 0 1px rgba(0,0,0,.14); cursor: pointer; z-index: 3; }
.gantt-milestone.status-backlog { background: var(--status-backlog-bg); }
.gantt-milestone.status-planned { background: var(--status-planned-bg); }
.gantt-milestone.status-in_progress { background: var(--status-in-progress-bg); }
.gantt-milestone.status-blocked { background: var(--status-blocked-bg); }
.gantt-milestone.status-done { background: var(--status-done-bg); }
.gantt-dependency-layer { position: absolute; top: 0; bottom: 0; left: var(--gantt-label-width); width: calc(100% - var(--gantt-label-width)); pointer-events: none; z-index: 2; }
.gantt-dependency-layer svg { width: 100%; height: 100%; overflow: visible; }
.gantt-dependency-layer path { fill: none; stroke: rgba(73,73,79,.65); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gantt-dependency-layer marker path { fill: rgba(73,73,79,.75); stroke: none; }
.gantt-undated { margin-top: 14px; padding: var(--panel-padding-sm); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft, #fafafa); }
.gantt-undated h3 { margin: 0 0 4px; font-size: 14px; }
.gantt-undated p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.gantt-undated-task { margin: 3px 6px 3px 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; }
@media (max-width: 900px) {
  .gantt-scroll { border-radius: 12px; }
  .gantt-axis-label { padding-inline: 10px; }
}
@media (max-width: 600px) {
  .gantt-heading { align-items: stretch; }
  .gantt-controls { width: 100%; }
  .gantt-controls button { flex: 1; }
  .gantt-row-label { padding-inline: 9px; }
  .gantt-scroll { -webkit-overflow-scrolling: touch; }
}

.compact-organization-dialog { width: min(420px, calc(100vw - 28px)); }
.compact-organization-dialog-body { display: grid; gap: 14px; padding: var(--space-5) var(--panel-padding-lg) var(--space-2); }
.compact-organization-dialog-body label { margin: 0; }
.compact-organization-dialog-body .organization-select { margin-bottom: 0; }
.organization-switcher { border-top: 1px solid var(--border, #e5e5e7); border-bottom: 1px solid var(--border, #e5e5e7); padding-top: 14px; padding-bottom: 14px; }
.organization-select { width: 100%; margin: 6px 0 8px; }
.organization-dialog { width: min(760px, calc(100vw - 32px)); }
.organization-members-list { display: grid; gap: 8px; margin: 12px 0 20px; }
.organization-member-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: var(--panel-padding-xs); border: 1px solid var(--border, #e5e5e7); border-radius: 12px; }
.organization-member-row strong, .organization-member-row small { display: block; }
.organization-member-row small { color: var(--muted, #6e6e73); }
.organization-invite-form { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border, #e5e5e7); }
@media (max-width: 640px) { .organization-member-row { grid-template-columns: 1fr; } }

/* Organization CRM — 0.43.1 */
.contact-actions, .stakeholder-controls, .contact-card-actions, .inline-form, .import-summary {
  display: flex;
  gap: .65rem;
  align-items: center;
  flex-wrap: wrap;
}
.contact-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr));
  gap: var(--form-gap);
  margin-bottom: 1rem;
}
.contact-filters label, .contact-form-grid label, .import-mapping label { min-width: 0; }
.contact-list { display: grid; gap: .8rem; margin-top: 1rem; }
.contact-card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border, #d2d2d7);
  border-radius: 16px;
  background: var(--surface, #fff);
}
.contact-card-main { min-width: 0; flex: 1; }
.contact-card-heading { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.contact-card-heading strong { font-size: 1.05rem; }
.contact-type { font-size: .78rem; padding: .2rem .55rem; border-radius: 999px; background: var(--brand-faint, #fff1f3); }
.contact-meta { display: flex; gap: .75rem 1rem; flex-wrap: wrap; margin: .45rem 0; color: var(--muted, #6e6e73); }
.contact-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.contact-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .22rem .55rem;
  font-size: .78rem;
  border: 1px solid color-mix(in srgb, var(--tag-color, var(--brand)) 45%, transparent);
  background: color-mix(in srgb, var(--tag-color, var(--brand)) 10%, white);
}
.contact-card-actions { justify-content: flex-end; align-self: center; }
.button-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.contact-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-form-wide { grid-column: 1 / -1; }
.contact-street { grid-column: 1 / -1; }
.contact-type-fieldset { margin: 4px 0 12px; padding: var(--panel-padding-xs); }
.contact-type-fieldset .field-hint { margin: 0 0 9px; color: var(--muted, #6e6e73); font-size: .82rem; }
.contact-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact-type-options label { display: flex; align-items: center; gap: var(--label-gap); margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 600; }
.contact-type-options label:hover { border-color: var(--line-strong); background: var(--surface-muted); }
.contact-type-options label:has(input:checked) { border-color: var(--brand); background: var(--brand-faint); color: var(--brand-dark); }
.contact-type-options label:has(input:focus-visible) { outline: 3px solid rgba(226,18,47,.20); outline-offset: 2px; }
.contact-type-options input { width: auto; accent-color: var(--brand); }
.contact-types { display: flex; flex-wrap: wrap; gap: .3rem; }
.contact-tag-list { display: grid; gap: .55rem; margin-top: 1rem; }
.contact-tag-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border, #d2d2d7); }
.stakeholder-panel {
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border, #d2d2d7);
  border-radius: 18px;
  background: var(--surface, #fff);
}
.compact-heading { margin-bottom: .65rem; }
.stakeholder-list { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.stakeholder-chip { display: inline-flex; gap: .45rem; align-items: center; padding: .4rem .65rem; border-radius: 999px; background: var(--brand-faint, #fff1f3); }
.stakeholder-chip .icon-button { width: 1.55rem; height: 1.55rem; min-width: 1.55rem; }
.stakeholder-controls select { min-width: min(100%, 320px); }
.compact-empty { width: 100%; padding: .5rem 0; }
.contact-import-preview { margin: 1rem 0; }
.import-summary { padding: var(--panel-padding-xs); border-radius: 12px; background: var(--surface-alt, #f5f5f7); margin-bottom: 1rem; }
.import-mapping { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.import-preview-data { max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: var(--panel-padding-xs); background: var(--surface-alt, #f5f5f7); border-radius: 12px; }
#contact-import-confirm { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin-top: 1rem; }
#contact-import-confirm.hidden { display: none; }

@media (max-width: 900px) {
  .contact-filters { grid-template-columns: 1fr 1fr; }
  .contact-card { flex-direction: column; }
  .contact-card-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .contact-filters, .contact-form-grid, .import-mapping { grid-template-columns: 1fr; }
  .contact-street, .contact-form-wide { grid-column: auto; }
  .contact-type-options { grid-template-columns: 1fr; }
  .contact-card-actions > * { flex: 1 1 45%; }
}

/* Professional contact directory — 0.49.0 */
.contact-list { display: block; margin-top: 1rem; }
.contact-table-shell {
  overflow-x: auto;
  border: 1px solid var(--border, #d2d2d7);
  border-radius: 14px;
  background: var(--surface, #fff);
}
.contact-table { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: .9rem; }
.contact-table th, .contact-table td { padding: .72rem .75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border, #e5e5e7); }
.contact-table th { position: relative; background: var(--surface-alt, #f7f7f8); color: var(--muted, #6e6e73); font-size: .78rem; font-weight: 650; white-space: nowrap; }
.contact-table tbody tr:last-child td { border-bottom: 0; }
.contact-table-row { cursor: pointer; transition: background-color .15s ease; }
.contact-table-row:hover, .contact-table-row:focus-visible { background: var(--brand-faint, #fff1f3); outline: none; }
.contact-table-row td:nth-child(1) { min-width: 190px; }
.contact-table-row td:nth-child(4) { max-width: 220px; overflow-wrap: anywhere; }
.contact-sort-button {
  display: inline-flex; align-items: center; gap: .35rem; width: 100%; min-height: 0; padding: 0;
  border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left;
}
.contact-sort-button:hover, .contact-sort-button:focus-visible { color: var(--text, #1d1d1f); background: transparent; }
.contact-sort-indicator { color: var(--brand, #e2122f); font-size: .8rem; }
.contact-name-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.contact-name-cell > span:last-child { min-width: 0; }
.contact-name-cell strong, .contact-name-cell small { display: block; }
.contact-name-cell strong { overflow: hidden; text-overflow: ellipsis; }
.contact-name-cell small { margin-top: .12rem; color: var(--muted, #6e6e73); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.contact-avatar {
  display: inline-flex; flex: 0 0 2rem; width: 2rem; height: 2rem; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brand-faint, #fff1f3); color: var(--brand, #e2122f); font-size: .72rem; font-weight: 750; letter-spacing: .02em;
}
.contact-table-tags { max-width: 200px; max-height: 3.2rem; overflow: hidden; }
.contact-muted-value { color: var(--muted, #86868b); }
.contact-actions-heading, .contact-actions-cell { width: 3.2rem; text-align: right !important; }
.contact-row-actions { position: relative; display: inline-flex; justify-content: flex-end; }
.contact-menu-button {
  display: inline-flex; width: 2rem; height: 2rem; min-width: 2rem; padding: 0; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text, #1d1d1f); font-size: 1.35rem; line-height: 1;
}
.contact-menu-button:hover, .contact-menu-button:focus-visible, .contact-menu-button[aria-expanded="true"] { border-color: var(--border, #d2d2d7); background: var(--surface-alt, #f5f5f7); }
.contact-action-menu {
  position: absolute; z-index: 40; top: calc(100% + .3rem); right: 0; min-width: 180px; padding: .35rem;
  border: 1px solid var(--border, #d2d2d7); border-radius: 10px; background: var(--surface, #fff); box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.contact-action-menu button, .contact-action-menu a {
  display: flex; width: 100%; min-height: 0; padding: .55rem .65rem; border: 0; border-radius: 7px; align-items: center;
  background: transparent; color: var(--text, #1d1d1f); font: inherit; font-size: .86rem; text-align: left; text-decoration: none;
}
.contact-action-menu button:hover, .contact-action-menu button:focus-visible, .contact-action-menu a:hover, .contact-action-menu a:focus-visible { background: var(--surface-alt, #f5f5f7); }
.contact-action-menu .danger-text { color: var(--color-urgent-text); }
.contact-mobile-list { display: none; }
.contact-result-count { padding: .7rem .15rem 0; color: var(--muted, #6e6e73); font-size: .82rem; }
.contact-pagination { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding-top: .85rem; }
.contact-pagination span { color: var(--muted, #6e6e73); font-size: .85rem; }
.contact-pagination button { min-width: 0; }
.contact-detail-dialog { width: min(760px, calc(100vw - 32px)); }
.contact-detail-identity { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.contact-detail-identity .contact-avatar { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; font-size: .9rem; }
.contact-detail-identity h2 { margin-bottom: 0; }
.contact-detail-company { margin: .18rem 0 0; color: var(--muted, #6e6e73); }
.contact-detail-badges { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.contact-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--border, #e5e5e7); }
.contact-detail-grid > div { min-width: 0; padding: .9rem .2rem; border-bottom: 1px solid var(--border, #e5e5e7); }
.contact-detail-grid > div:nth-child(odd):not(.contact-detail-wide) { padding-right: 1rem; }
.contact-detail-grid dt { margin-bottom: .3rem; color: var(--muted, #6e6e73); font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .035em; }
.contact-detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.contact-detail-wide { grid-column: 1 / -1; }
.contact-detail-actions { flex-wrap: wrap; }

@media (max-width: 760px) {
  .contact-table-shell { display: none; }
  .contact-mobile-list { display: grid; gap: .65rem; }
  .contact-mobile-card { position: relative; padding: var(--panel-padding-sm); border: 1px solid var(--border, #d2d2d7); border-radius: 13px; background: var(--surface, #fff); cursor: pointer; }
  .contact-mobile-card:hover, .contact-mobile-card:focus-visible { border-color: color-mix(in srgb, var(--brand, #e2122f) 45%, var(--border, #d2d2d7)); outline: none; }
  .contact-mobile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
  .contact-mobile-summary { display: flex; align-items: center; gap: .35rem .7rem; flex-wrap: wrap; margin: .7rem 0; color: var(--muted, #6e6e73); font-size: .84rem; }
  .contact-mobile-summary a { overflow-wrap: anywhere; }
  .contact-pagination { justify-content: space-between; }
  .contact-pagination span { text-align: center; }
  .contact-detail-grid { grid-template-columns: 1fr; }
  .contact-detail-wide { grid-column: auto; }
  .contact-detail-grid > div:nth-child(odd):not(.contact-detail-wide) { padding-right: .2rem; }
  .contact-detail-actions > * { flex: 1 1 45%; }
}

/* Security login flow and quieter project stakeholders — 0.50.0 */
.stakeholder-chip { padding: .32rem .58rem; font-size: .8rem; color: var(--muted, #6e6e73); }
.stakeholder-chip strong { font-size: inherit; font-weight: 500; color: var(--text, #1d1d1f); }
.stakeholder-chip .icon-button { font-size: .85rem; }
.assignment-hint { margin: .5rem 0 0; color: var(--muted, #6e6e73); font-size: .82rem; }
.contact-projects { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border, #e5e5e7); }
.contact-projects .compact-heading { margin-bottom: .65rem; }
.contact-project-chip span { font-weight: 500; color: var(--text, #1d1d1f); }

/* Task access, overview timer and detailed time reporting — 0.51.0 */
.overview-task-row-wrap, .my-task-row-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 6px; min-width: 0; }
.task-card-wrap { position: relative; min-width: 0; }
.task-card-wrap .task-card { width: 100%; }
.task-comment-quick { display: inline-grid; place-items: center; width: 38px; min-width: 38px; min-height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; color: var(--brand-dark); background: var(--surface); }
.task-comment-quick:hover, .task-comment-quick:focus-visible { border-color: rgba(226,18,47,.35); background: var(--brand-faint); }
.task-comment-quick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.task-card-comment { position: absolute; z-index: 2; right: 9px; bottom: 9px; width: 32px; min-width: 32px; min-height: 32px; border-radius: 9px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.task-card .card-meta { padding-right: 38px; }
.task-inline-editor { margin: 0 0 18px; border: 1px solid rgba(226,18,47,.18); border-radius: 18px; background: var(--surface-soft); overflow: hidden; }
.task-inline-editor .dialog-scroll { max-height: none; padding: var(--panel-padding); overflow: visible; }
.task-inline-editor .dialog-header { position: static; }
.overview-timer-running { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: var(--panel-padding-sm); border: 1px solid var(--color-info-bg); border-radius: 14px; background: var(--color-info-bg); }
.overview-timer-running > div { display: grid; gap: 3px; min-width: 0; }
.overview-timer-running strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-timer-elapsed { font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 750; }
.overview-timer-start-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 10px; }
.overview-timer-start-form label, .overview-timer-stop-form label { margin: 0; }
.overview-timer-stop-form { margin-top: 10px; padding: var(--panel-padding-sm); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.overview-timer-stop-form .dialog-actions { margin-top: 10px; }


.overview-manual-time { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.overview-manual-time summary { color: var(--brand-dark); cursor: pointer; font-size: 13px; font-weight: 700; }
.overview-manual-time-form { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, .8fr) minmax(100px, .6fr); align-items: end; gap: 9px; margin-top: 10px; }
.overview-manual-time-form label { margin: 0; }
.overview-manual-note { grid-column: 1 / -1; }
.overview-manual-time-form button { justify-self: end; }
.reporting-time-filter { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; align-items: end; gap: 10px; margin: 0 0 16px; padding: var(--panel-padding-sm); border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.reporting-time-filter label { margin: 0; }
.reporting-time-entries { margin-top: 16px; }
.reporting-time-entries > p { margin: -8px 0 12px; color: var(--muted); font-size: 12px; }
.reporting-time-entries table { width: 100%; border-collapse: collapse; }
.reporting-time-entries th, .reporting-time-entries td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--line); font-size: 13px; vertical-align: top; }
.reporting-time-entries th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) { .reporting-time-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .overview-timer-start-form, .reporting-time-filter { grid-template-columns: 1fr; }
  .overview-timer-running { align-items: stretch; flex-direction: column; }
  .overview-task-row-wrap, .my-task-row-wrap { grid-template-columns: minmax(0, 1fr) 38px; }

  .overview-manual-time-form { grid-template-columns: 1fr; }
  .overview-manual-note { grid-column: auto; }
  .overview-manual-time-form button { width: 100%; justify-content: center; }
}

@media (max-width: 620px) {
  .overview-preview-heading { display: grid; }
  .overview-scope-toggle, .compact-overview-action { width: 100%; }
  .overview-scope-toggle button { flex: 1 1 0; }
  .compact-overview-action { justify-content: center; }
  .overview-timeline-row { grid-template-columns: 1fr; gap: 5px; }
  .overview-timeline-track { height: 22px; }
  .overview-task-row { gap: 8px; }
}

/* 0.43.3 full-page project files */
.project-files-panel { margin-top: 14px; }
#files-view .attachment-list { margin-top: 16px; }
#project-contact-assignment { margin-top: 16px; }

/* Organization settings tabs and invoices — 0.44.0 */
.organization-tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 20px;padding:4px;border:1px solid var(--border,#e5e5e7);border-radius:14px;background:var(--surface-soft,#f7f7f8)}
.organization-tab{flex:0 0 auto;border:0;background:transparent;padding:9px 12px;border-radius:10px;font:inherit;font-size:13px;cursor:pointer;color:var(--muted,#6e6e73)}
.history-tab{display:inline-flex;align-items:center;gap:7px}
.tab-count-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;color:var(--badge-info-text);background:var(--badge-info-bg);font-size:10px;font-weight:800;line-height:1}
.organization-tab.active{background:var(--surface,#fff);color:var(--text,#1d1d1f);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.organization-tab-panel{min-height:180px}.subscription-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:var(--panel-padding-xs);margin-bottom:12px;border:1px solid var(--border,#e5e5e7);border-radius:12px;background:var(--surface-soft,#f7f7f8)}
.subscription-summary span{color:var(--muted,#6e6e73);font-size:13px}.invoice-heading{margin-top:24px}.organization-invoice-list{display:grid;gap:8px}.organization-invoice-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--panel-padding-xs);border:1px solid var(--border,#e5e5e7);border-radius:12px}.organization-invoice-row strong,.organization-invoice-row small{display:block}.organization-invoice-row small{color:var(--muted,#6e6e73);margin-top:3px}@media(max-width:640px){.organization-invoice-row{align-items:stretch;flex-direction:column}}

/* 0.44.2: compact account-security status inside organization settings. */
.two-factor-status-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 0 0 14px; padding: var(--panel-padding-xs); border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); }
.two-factor-status-row .status-badge { font-size:13px; }
.two-factor-status-row .status-badge.success { color:var(--badge-success-text); background: var(--badge-success-bg); }
.two-factor-status-row .status-badge.muted { color:var(--badge-neutral-text); background: var(--badge-neutral-bg); }

/* 0.44.4: SumUp widget host isolation and subscription actions */
#sumup-card{max-width:560px;margin:14px 0 6px;padding:0;min-height:0;overflow:visible;isolation:isolate;background:transparent}
#sumup-card iframe{display:block;width:100%!important;max-width:100%;border:0!important;margin:0}
#sumup-card [data-sumup-id="payment_option"] img{display:none}

/* 0.53.0 public customer signup */
.signup-body{min-height:100vh;background:linear-gradient(145deg,#f5f5f7,#fff 55%,#fff1f3);color:#1d1d1f;margin:0}
.signup-header{max-width:1180px;margin:0 auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center}
.signup-header label{display:flex;gap:var(--label-gap);align-items:center;font-size:13px;color:#6e6e73}.signup-header select{width:auto;min-width:120px}
.signup-main{max-width:1180px;margin:0 auto;padding:42px 28px 80px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:48px;align-items:start}
.signup-hero h1,.signup-card h1{font-size:clamp(32px,5vw,56px);letter-spacing:-.04em;margin:0 0 14px}.signup-hero>p{font-size:19px;line-height:1.5;color:#6e6e73;max-width:700px}
.signup-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:30px}.signup-plan{border:1px solid #dedee3;border-radius:18px;background:rgba(255,255,255,.86);padding:var(--panel-padding);text-align:left;display:flex;flex-direction:column;gap:9px;color:#1d1d1f;box-shadow:0 10px 30px rgba(0,0,0,.04)}.signup-plan:hover,.signup-plan:focus-visible{border-color:var(--brand);transform:translateY(-1px)}.signup-plan strong{font-size:19px}.signup-plan span{font-size:14px;color:#6e6e73}.signup-plan .signup-trial-badge{display:inline-flex;width:max-content;padding:4px 8px;border-radius:999px;background:var(--badge-info-bg);color:var(--badge-info-text);font-weight:600}
.signup-card{background:rgba(255,255,255,.96);border:1px solid #e5e5ea;border-radius:24px;padding:var(--panel-padding-lg);box-shadow:0 20px 60px rgba(0,0,0,.08)}.signup-card h2{margin-top:0}.signup-card form{display:grid;gap:var(--form-gap)}.signup-card label{display:grid;gap:var(--label-gap)}.signup-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.signup-check{grid-template-columns:auto 1fr!important;align-items:start}.signup-check input{margin-top:3px}.signup-card small{color:#6e6e73}.signup-login{text-align:center}
.signup-centered{max-width:720px;margin:0 auto;padding:70px 24px}.signup-payment-card{max-width:640px;margin:0 auto}.signup-payment-card h1{font-size:38px}.signup-summary{display:grid;gap:8px}.signup-summary>div{display:flex;justify-content:space-between;gap:24px;padding:9px 0;border-bottom:1px solid #eee}.signup-summary dt{color:#6e6e73}.signup-summary dd{font-weight:600;margin:0;text-align:right}.signup-total{display:flex;justify-content:space-between;gap:20px;font-size:19px;padding:18px 0}.signup-promo{grid-template-columns:1fr auto auto!important;align-items:end}.signup-promo label{min-width:0}.signup-promo button{white-space:nowrap}.button-link{display:inline-block;text-decoration:none;text-align:center}#signup-sumup-card{margin-top:16px;isolation:isolate}#signup-sumup-card iframe{width:100%!important;border:0!important}
@media(max-width:800px){.signup-main{grid-template-columns:1fr;padding-top:20px}.signup-header{padding:16px}.signup-main{padding-left:16px;padding-right:16px}.signup-two,.signup-promo{grid-template-columns:1fr!important}.signup-hero h1{font-size:40px}.signup-card{padding:var(--panel-padding)}}
.subscription-actions{align-items:center;flex-wrap:wrap;margin-top:12px}.subscription-action-hint{flex:1 1 100%;font-size:12px}

/* Project cost budget monitoring */
.budget-indicator { display:inline-flex; align-items:center; justify-content:center; min-width:68px; padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px; }
.budget-indicator.budget-ok { background:var(--badge-success-bg); color:var(--badge-success-text); }
.budget-indicator.budget-warning { background:var(--badge-warning-bg); color:var(--badge-warning-text); }
.budget-indicator.budget-critical { background:var(--badge-urgent-bg); color:var(--badge-urgent-text); }
.budget-indicator.budget-none { background:var(--badge-neutral-bg); color:var(--badge-neutral-text); font-weight:500; }
.reporting-projects tr.budget-critical td:first-child { font-weight:700; }


/* 0.44.9 notification center */
.notifications-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; margin-bottom: 16px; }
.notifications-actions > .notification-toolbar { margin: 0; flex: 0 0 auto; }
.notifications-actions > #mark-all-notifications-read { margin-left: auto; min-width: 0; min-height: 30px; padding: 5px 12px; font-size: 11px; font-weight: 720; line-height: normal; white-space: normal; }
.notification-item .notification-type-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.notification-toolbar { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(248,248,250,.88); }
.notification-filter { min-height: 30px; padding: 5px 12px; border: 0; border-radius: 999px; color: var(--text-soft); background: transparent; font-size: 11px; font-weight: 720; }
.notification-filter.active { color: var(--text); background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.notification-list { gap: 18px; }
.notification-group { display: grid; gap: 9px; }
.notification-group-title { margin: 0 2px; color: var(--muted); font-size: 11px; font-weight: 760; letter-spacing: .02em; }
.notification-item { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: start; gap: 12px; }
.notification-content { min-width: 0; }
.notification-type-icon, .status-signal-icon { box-sizing:border-box; width:30px; min-width:30px; height:30px; flex:0 0 30px; display:inline-grid; place-items:center; border-radius:9px; font-size:14px; font-weight:820; line-height:1; color:var(--badge-neutral-text); background:var(--badge-neutral-bg); vertical-align:middle; }
.notification-type-assigned { color: var(--badge-info-text); background: var(--badge-info-bg); }
.notification-type-comment { color: var(--badge-neutral-text); background: var(--badge-neutral-bg); }
.notification-type-mention { color: var(--badge-info-text); background: var(--badge-info-bg); }
.notification-type-status { color: var(--badge-info-text); background: var(--badge-info-bg); }
.notification-type-priority { color: var(--badge-warning-text); background: var(--badge-warning-bg); }
.notification-type-due-soon { color: var(--badge-warning-text); background: var(--badge-warning-bg); }
.notification-type-overdue { color: var(--badge-urgent-text); background: var(--badge-urgent-bg); }
.notification-settings-panel { margin-top: 22px; border: 1px solid var(--line); border-radius: 15px; background: rgba(248,248,250,.7); overflow: hidden; }
.notification-settings-panel > summary { padding: 13px 15px; cursor: pointer; list-style: none; color: var(--text-soft); font-size: 12px; font-weight: 760; }
.notification-settings-panel > summary::-webkit-details-marker { display: none; }
.notification-settings-panel > summary::after { content: "+"; float: right; color: var(--muted); font-size: 16px; font-weight: 500; }
.notification-settings-panel[open] > summary::after { content: "−"; }
.notification-settings-panel .reminder-settings-form { border-top: 1px solid var(--line); border-radius: 0; background: #fff; }
@media (max-width: 720px) {
  .notification-item { grid-template-columns: 30px minmax(0,1fr); }
  .notification-meta { grid-column: 2; min-width: 0; justify-items: start; gap: 5px; }
}

/* 0.44.10 task detail tabs */
.task-tabs{margin:0 var(--drawer-inset) var(--space-4)}
.task-tab-panel{min-height:0}
.task-tab-panel>.task-feature-panel:first-child,.task-tab-panel>.chat-panel:first-child,.task-tab-panel>.task-attachment-panel:first-child{border-top:0}
.task-planning-meta{padding:var(--space-1) var(--drawer-inset) 0}
.task-tab-detail-grid{padding:0 0 10px}
.task-tab-panel .chat-panel{border-top:0}
@media (max-width:700px){.drawer{--drawer-inset:var(--panel-padding)}.task-tabs{margin-inline:var(--drawer-inset)}.task-planning-meta{padding-inline:var(--drawer-inset)}}

/* 0.44.12: visible progress for asynchronous actions. */
button.is-loading { position: relative; cursor: progress; }
button.is-loading::after,
.loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: loading-spin .7s linear infinite;
}
button.is-loading::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: -2px; }
.loading-indicator { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 88px; color: var(--muted); font-size: 13px; }
.loading-spinner { display: inline-block; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.is-loading::after, .loading-spinner { animation-duration: 1.8s; } }

/* 0.45.0: meeting minutes, decisions, configurable schedule signals and task video. */
.notification-type-ready { color:var(--badge-success-text); background:var(--badge-success-bg); }
.my-tasks-filters { margin-bottom:16px; }
.my-task-main { min-width:0; display:grid; gap:7px; }
.my-task-meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.status-badge { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; color:var(--badge-neutral-text); background:var(--badge-neutral-bg); font-size:10px; font-weight:750; }
.status-badge.status-in_progress { color:var(--status-in-progress-text); background:var(--status-in-progress-bg); }
.status-badge.status-blocked { color:var(--status-blocked-text); background:var(--status-blocked-bg); }
.status-badge.status-done { color:var(--status-done-text); background:var(--status-done-bg); }
.meeting-minutes-list,.decisions-list { display:grid; gap:14px; }
.meeting-minute-card { padding:var(--panel-padding); border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); }
.meeting-minute-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.meeting-minute-heading h3 { margin:4px 0; }
.meeting-minute-card section { margin-top:16px; }
.meeting-minute-card h4 { margin:0 0 7px; color:var(--text-soft); font-size:11px; }
.meeting-minute-card ul { margin:0; padding-left:20px; color:var(--text-soft); line-height:1.6; }
.meeting-minute-actions { display:flex; gap:7px; }
.inline-task-link { display:inline; padding:0; border:0; border-radius:0; color:var(--brand); background:transparent; box-shadow:none; font:inherit; line-height:inherit; text-decoration:underline; text-underline-offset:2px; }
.inline-task-link:hover,.inline-task-link:focus-visible { color:var(--brand-dark); background:transparent; box-shadow:none; text-decoration-thickness:2px; }
.meeting-next-steps { display:grid; gap:8px; margin-bottom:10px; }
.meeting-decisions { display:grid; gap:8px; margin-bottom:10px; }
.meeting-decision-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.meeting-next-step-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,.7fr) auto; gap:8px; align-items:center; }
.decision-card { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:0; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--surface); text-align:left; box-shadow:var(--shadow-sm); overflow:hidden; }
.decision-card:hover,.decision-card:focus-within { border-color:rgba(226,18,47,.3); box-shadow:var(--shadow-soft); }
.decision-card.is-read { opacity:.78; }
.decision-card-main { width:100%; display:grid; justify-items:start; gap:7px; padding:17px 18px; border:0; color:inherit; background:transparent; text-align:left; }
.decision-card-main:focus-visible { outline:2px solid var(--brand); outline-offset:-3px; }
.decision-card p { margin:0; color:var(--text-soft); white-space:pre-wrap; }
.decision-card small { color:var(--muted); }
.decision-card-badges { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.decision-read-badge { display:inline-flex; border-radius:999px; padding:4px 8px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.decision-read-badge.is-unread { color:var(--badge-info-text); background:var(--badge-info-bg); }
.decision-read-badge.is-read { color:var(--badge-neutral-text); background:var(--badge-neutral-bg); }
.decision-read-action { margin-right:16px; white-space:nowrap; }
.decision-read-overview { grid-column:1 / -1; margin:0 16px 14px; padding-top:10px; border-top:1px solid var(--line); }
.decision-read-overview summary { cursor:pointer; color:var(--text-soft); font-size:11px; font-weight:750; }
.decision-read-overview ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.decision-read-overview li { display:flex; align-items:center; gap:8px; min-width:0; padding:8px; border-radius:10px; background:var(--surface-soft); }
.decision-read-overview li > span:last-child { display:grid; min-width:0; }
.decision-read-overview li strong,.decision-read-overview li small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.decision-read-overview li small { color:var(--muted); font-size:9px; }
.decision-read-overview li.is-unread { opacity:.72; }
.decision-badge { display:inline-flex; width:max-content; margin:6px 0 0; border-radius:999px; padding:4px 8px; color:var(--badge-info-text); background:var(--badge-info-bg); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.comment.is-decision .bubble { border:1px solid var(--color-info-bg); background:var(--color-info-bg); }
.decision-checkbox { display:flex; align-items:center; gap:var(--label-gap); margin:0; color:var(--text-soft); font-size:11px; }
.decision-checkbox input { width:auto; }
.compact-comment-action { margin-top:8px; padding:5px 8px; font-size:9px; }
.task-video-embed { margin-top:0; }
.meeting-participants { margin:0 0 14px; padding:14px; border:1px solid var(--line); border-radius:14px; }
.meeting-participants legend { padding:0 6px; color:var(--text-soft); font-size:11px; font-weight:750; }
.meeting-participants select[multiple] { min-height:118px; }
.meeting-inline-create { margin:10px 0 2px; padding:10px 12px; border-radius:12px; background:var(--surface-soft); }
.meeting-inline-contact-fields { margin-top:10px; }
.meeting-next-step-block { display:grid; gap:8px; padding:10px; border:1px solid var(--line); border-radius:12px; }
.meeting-next-step-row { grid-template-columns:minmax(0,1fr) minmax(150px,.7fr) auto auto; }
.meeting-new-task-editor { display:grid; gap:9px; padding:12px; border-left:3px solid var(--brand); background:var(--surface-soft); border-radius:8px; }
.meeting-new-task-editor small { color:var(--muted); }
.decision-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.decision-read-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.decision-read-toolbar .notification-toolbar { margin:0; }
.decision-source-comment { color:var(--badge-info-text); background:var(--badge-info-bg); }
.decision-source-meeting_minute { color:var(--badge-info-text); background:var(--badge-info-bg); }
.linked-highlight { outline:3px solid rgba(226,18,47,.22); outline-offset:3px; }
.task-meeting-minute-list { display:grid; gap:8px; }
.task-meeting-minute-link { width:100%; text-align:left; }
@media (max-width:700px) {
  .meeting-minute-heading { display:grid; }
  .meeting-minute-actions { flex-wrap:wrap; }
  .meeting-next-step-row { grid-template-columns:1fr; }
  .meeting-participants .form-grid { grid-template-columns:1fr; }
  .decision-card { grid-template-columns:1fr; }
  .decision-read-action { margin:0 16px 14px; justify-self:start; }
}

.procurements-list { display:grid; gap:14px; margin-top:16px; }
.procurement-navigation-notice { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:14px; padding:13px 15px; border:1px solid var(--color-info-bg); border-radius:13px; background:var(--color-info-bg); color:var(--color-info-text); }
.procurement-navigation-notice > div { display:grid; gap:4px; min-width:0; }
.procurement-navigation-notice strong { color:var(--color-info-text); font-size:13px; }
.procurement-navigation-notice span { color:var(--color-info-text); font-size:12px; line-height:1.45; }
.procurement-card { display:grid; gap:14px; padding:var(--panel-padding); border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); }
.procurement-card.notification-target { outline:3px solid color-mix(in srgb, var(--brand) 68%, transparent); outline-offset:3px; animation:procurement-notification-highlight 1.05s ease-in-out 3; }
.procurement-card.notification-target:focus { box-shadow:0 0 0 6px var(--brand-faint),var(--shadow-md); }
@keyframes procurement-notification-highlight { 0%,100% { background:var(--surface); } 50% { background:var(--brand-faint); } }
@media (prefers-reduced-motion: reduce) { .procurement-card.notification-target { animation:none; background:var(--brand-faint); } }
.procurement-heading { display:flex; justify-content:space-between; gap:18px; align-items:start; }
.procurement-heading h3,.procurement-heading p,.procurement-scope { margin:5px 0 0; }
.procurement-heading p,.procurement-scope { color:var(--text-soft); }
.procurement-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; }
.procurement-meta div { padding:10px; border-radius:10px; background:var(--surface-soft); }
.procurement-meta dt { color:var(--muted); font-size:10px; }
.procurement-meta dd { margin:4px 0 0; font-weight:700; }
.procurement-actions,.procurement-files,.procurement-upload-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.procurement-attachment { color:var(--brand); font-size:11px; }
.procurement-attachment.disabled { color:var(--muted); pointer-events:none; }
.context-attachment-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.context-attachment { display:inline-flex; max-width:100%; padding:5px 8px; border:1px solid var(--line); border-radius:9px; color:var(--brand); background:var(--surface-soft); font-size:11px; overflow-wrap:anywhere; }
.context-attachment.disabled { color:var(--muted); pointer-events:none; }
.comment-attachment-field { margin:0; }
.procurement-upload-form input { max-width:260px; }
.procurement-task-links { display:flex; flex-wrap:wrap; gap:8px; }
.procurement-task-links button { border:0; background:transparent; color:var(--brand); padding:0; text-decoration:underline; }
.button-link { display:inline-flex; align-items:center; text-decoration:none; }
@media (max-width:700px) {
  .procurement-heading { display:grid; }
  .procurement-meta { grid-template-columns:1fr; }
}
/* Accessible project capability matrix. */
.permission-table-wrap { overflow-x: auto; }
.permission-matrix { width: 100%; border-collapse: collapse; margin: 12px 0; }
.permission-matrix th, .permission-matrix td { padding: 10px 12px; border-bottom: 1px solid var(--border, #ddd); text-align: left; }
.permission-matrix td { text-align: center; }
.permission-matrix input, .permission-readonly input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.permission-matrix input:focus-visible, .permission-readonly input:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.permission-matrix input:disabled { cursor: not-allowed; opacity: .45; }
.permission-readonly { display: flex; align-items: center; gap: 12px; }
#project-permissions-dialog { width: min(680px, calc(100vw - 24px)); }
.permission-matrix th[scope="row"] { font-weight: 500; }
.compact-record.meeting-minute-card,
.compact-record.procurement-card { display:block; padding:0; overflow:hidden; }
.compact-record-summary { display:flex; align-items:center; gap:16px; min-height:60px; padding:16px 18px; cursor:pointer; list-style:none; }
.compact-record-summary::-webkit-details-marker { display:none; }
.compact-record-summary::after { content:""; flex:0 0 8px; width:8px; height:8px; border-right:2px solid var(--text-soft); border-bottom:2px solid var(--text-soft); transform:rotate(45deg); margin:0 3px 4px 0; }
.compact-record[open] > .compact-record-summary::after { transform:rotate(225deg); margin-bottom:-4px; }
.compact-record-summary h3 { flex:1; min-width:0; margin:0; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.compact-record-summary time { flex-shrink:0; font-size:12px; color:var(--text-soft); }
.compact-record-summary:focus-visible { outline:3px solid var(--brand); outline-offset:-4px; border-radius:12px; }
.compact-record[open] > .compact-record-summary { border-bottom:1px solid var(--line); }
.compact-record-body { display:grid; gap:14px; padding:18px; }
.compact-record:not([open]) > .compact-record-body { display:none; }
@media (max-width:600px) {
  .compact-record-summary { display:grid; grid-template-columns:minmax(0,1fr) 16px; gap:5px 12px; padding:14px; }
  .compact-record-summary time { grid-column:1; }
  .compact-record-summary::after { grid-column:2; grid-row:1 / span 2; }
  .compact-record-body { padding:14px; }
}

/* Organization attachment usage, separate from editable organization fields. */
.organization-storage {margin-top:24px;padding-top:20px;border-top:1px solid var(--line);min-width:0;}
.organization-storage-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.organization-storage-heading h3 {margin:0;}
#organization-storage-status {font-weight:600;overflow-wrap:anywhere;}
#organization-storage-progress {appearance:none;display:block;width:100%;height:10px;border:0;border-radius:999px;overflow:hidden;background:var(--color-neutral-bg);color:var(--color-info-text);}
#organization-storage-progress::-webkit-progress-bar {background:var(--color-neutral-bg);border-radius:999px;}
#organization-storage-progress::-webkit-progress-value {background:var(--color-info-text);border-radius:999px;}
#organization-storage-progress::-moz-progress-bar {background:var(--color-info-text);border-radius:999px;}
#organization-storage[data-level="warning"] {--storage-warning:var(--color-warning-text);}
#organization-storage[data-level="full"] {--storage-warning:var(--color-urgent-text);}
#organization-storage-warning {color:var(--storage-warning);font-weight:600;line-height:1.5;}
#organization-storage[data-level="warning"] progress::-webkit-progress-value {background:var(--storage-warning);}
#organization-storage[data-level="warning"] progress::-moz-progress-bar {background:var(--storage-warning);}
#organization-storage-progress.hidden {display:none;}

/* Scan-friendly, locally filtered sidebar project groups. */
.project-filter-wrap {margin:0 2px 10px;min-width:0;}
#project-filter {width:100%;min-width:0;box-sizing:border-box;padding:8px 10px;font-size:12px;}
.project-group {display:grid;gap:4px;min-width:0;}
.project-group + .project-group {margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.project-group-title {margin:2px 10px 5px;font-size:11px;font-weight:700;color:var(--sidebar-muted);display:flex;justify-content:space-between;gap:8px;}
.project-group-title span {font-variant-numeric:tabular-nums;}
.project-list-empty {margin:6px 10px;color:var(--sidebar-muted);font-size:12px;line-height:1.5;}
.project-button:focus-visible,#project-filter:focus-visible {outline:2px solid var(--brand);outline-offset:-2px;}

/* Complete semantic coverage for shared/default status badges. */
.column.status-backlog::before { background: var(--status-backlog-text); }
.status-badge.status-backlog { color: var(--status-backlog-text); background: var(--status-backlog-bg); }
.overview-timeline-bar.status-planned { background: var(--status-planned-bg); }
.overview-timeline-milestone.status-planned { background: var(--status-planned-text); }
.status-badge.status-planned { color: var(--status-planned-text); background: var(--status-planned-bg); }
.procurement-card .status-badge { color: var(--order-pending-text); background: var(--order-pending-bg); }
.notification-type-meeting { color: var(--badge-info-text); background: var(--badge-info-bg); }
.notification-type-procurement { color: var(--badge-info-text); background: var(--badge-info-bg); }
#organization-storage[data-level="full"] progress::-webkit-progress-value { background: var(--storage-warning); }
#organization-storage[data-level="full"] progress::-moz-progress-bar { background: var(--storage-warning); }

/* 0.63.8: on-demand colour help beside the existing board/timeline. */
.color-legend { margin: 8px 0 12px; max-width: 680px; }
.color-legend > summary { width: fit-content; cursor: pointer; padding: 5px 0; color: var(--text-soft); font-size: 12px; }
.color-legend > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
.color-legend-content { padding: var(--panel-padding-xs); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.color-legend-content ul { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.color-legend-content li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.color-legend-content p { margin: 8px 0 12px; }
.color-legend-content p:last-child { margin-bottom: 0; }
.color-legend-swatch, .color-legend-border { display: inline-block; width: 24px; height: 12px; flex: 0 0 24px; border-radius: 3px; }
.color-legend-swatch { background: var(--legend-bg); border: 1px solid var(--legend-text); }
.color-legend-border { border: 2px solid var(--legend-text); background: transparent; }
.color-legend .legend-neutral { --legend-bg: var(--color-neutral-bg); --legend-text: var(--color-neutral-text); }
.color-legend .legend-info { --legend-bg: var(--color-info-bg); --legend-text: var(--color-info-text); }
.color-legend .legend-success { --legend-bg: var(--color-success-bg); --legend-text: var(--color-success-text); }
.color-legend .legend-warning { --legend-bg: var(--color-warning-bg); --legend-text: var(--color-warning-text); }
.color-legend .legend-urgent { --legend-bg: var(--color-urgent-bg); --legend-text: var(--color-urgent-text); }

/* 0.65.0: report hierarchy, scalable charts and customer print layout. */
#reporting-view { min-width: 0; }
#reporting-view .reporting-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0; }
#reporting-view .metric { border:1px solid var(--line); box-shadow:none; }
#reporting-view .metric strong { font-size:clamp(24px,3vw,36px); font-variant-numeric:tabular-nums; }
.reporting-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.reporting-error { color:var(--color-urgent-text); }
.reporting-error:empty { display:none; }
.report-summary { display:flex; justify-content:space-between; gap:24px; padding:24px 0 16px; border-bottom:2px solid var(--brand); }
.report-summary h3 { margin:8px 0; font-size:24px; overflow-wrap:anywhere; }
.report-summary p { margin:0; color:var(--muted); }
.report-period-help, .report-card-subtitle { font-size:12px; line-height:1.6; color:var(--muted); }
#reporting-view .report-card { border-radius:12px; box-shadow:none; min-width:0; }
#reporting-view .report-card h3 { margin-bottom:8px; font-size:17px; }
#reporting-view .report-card-subtitle { margin:0 0 20px; }
.report-status-row { display:grid; grid-template-columns:110px minmax(40px,1fr) 28px; align-items:center; gap:12px; margin:20px 0; font-size:13px; }
.report-status-row svg { width:100%; height:18px; }
.report-status-row strong { text-align:right; font-variant-numeric:tabular-nums; }
.report-bar-track { fill:var(--surface-soft); }
.report-bar-backlog { fill:var(--color-neutral-text); }
.report-bar-planned,.report-bar-in_progress { fill:var(--color-info-text); }
.report-bar-blocked { fill:var(--color-warning-text); }
.report-bar-done { fill:var(--color-success-text); }
.report-trend-chart { width:100%; height:auto; display:block; }
.report-trend-chart text { fill:var(--muted); font-size:12px; }
.report-chart-grid { stroke:var(--line); stroke-width:1; }
.report-trend-area { fill:var(--color-info-bg); }
.report-trend-line { fill:none; stroke:var(--color-info-text); stroke-width:3; stroke-linejoin:round; }
.report-trend-point { fill:var(--color-info-text); }
.report-axis-labels { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:11px; }
.report-trend-data { margin-top:16px; font-size:12px; }
.report-trend-data summary { cursor:pointer; color:var(--color-info-text); }
.report-utilization { margin-top:16px; }
.report-utilization>div { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.report-utilization progress { display:block; width:100%; height:10px; margin:8px 0; accent-color:var(--color-info-text); }
.report-utilization progress.over-budget { accent-color:var(--color-urgent-text); }
.report-utilization small,.report-overdue-task small { display:block; color:var(--muted); font-size:11px; line-height:1.6; }
.report-priority-group h4 { display:flex; justify-content:space-between; align-items:center; margin:16px 0 4px; font-size:13px; }
.report-overdue-task { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-top:1px solid var(--line); padding:10px 0; font-size:13px; break-inside:avoid; }
.report-overdue-task>div { min-width:0; }
.report-overdue-task a { color:var(--color-info-text); text-decoration:underline; overflow-wrap:anywhere; }
.report-overdue-task>span { text-align:right; flex-shrink:0; }
#reporting-view table { width:100%; border-collapse:collapse; font-size:12px; }
#reporting-view th,#reporting-view td { padding:12px 8px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
#reporting-view thead { background:var(--surface-soft); }
#reporting-view th { font-weight:600; }
#reporting-view .reporting-projects,#reporting-view .reporting-time-entries { margin-top:20px; }
@media(max-width:900px) { #reporting-view .reporting-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .report-summary { flex-direction:column; gap:12px; }.report-status-row { grid-template-columns:85px minmax(40px,1fr) 24px; gap:8px; }.reporting-actions button { flex:1 1 100%; } }
@media print {
  @page { size:A4 landscape; margin:12mm; }
  body.printing-report { background:white!important; color:#111; font-size:10pt; }
  body.printing-report>*:not(#app-shell),body.printing-report #app-shell>.sidebar,body.printing-report #app-shell>main>*:not(#reporting-view) { display:none!important; }
  body.printing-report #app-shell,body.printing-report #app-shell>main { display:block!important; width:100%!important; min-height:0!important; height:auto!important; margin:0!important; padding:0!important; overflow:visible!important; }
  body.printing-report #reporting-view { display:block!important; }
  body.printing-report .reporting-actions,body.printing-report #reporting-time-filter,body.printing-report .reporting-scope,body.printing-report .report-trend-data { display:none!important; }
  body.printing-report .report-summary { padding-top:0; }
  body.printing-report .reporting-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  body.printing-report .report-card { box-shadow:none; border:1px solid #ccc; padding:14px; }
  body.printing-report .reporting-grid>.report-card { break-inside:avoid; }
  body.printing-report .table-scroll { overflow:visible; }
  body.printing-report table { table-layout:fixed; font-size:9pt!important; }
  body.printing-report thead { display:table-header-group; }
  body.printing-report tr { break-inside:avoid; }
  body.printing-report h3,body.printing-report h4 { break-after:avoid; }
  body.printing-report svg,body.printing-report progress { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  body.printing-report a { color:#111; text-decoration:none; }
}

/* 0.66.0: shared status navigation and compact inbox explanation. */
.overview-widget-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; margin:24px 0; }
.overview-widget-grid>.overview-preview-panel { margin:0; min-width:0; }
.overview-status-panel h2 { font-size:clamp(19px,1.6vw,24px); }
button.report-status-row { width:100%; padding:8px 4px; border:0; border-radius:6px; background:transparent; color:var(--text); text-align:left; font-weight:400; cursor:pointer; }
button.report-status-row:hover { background:var(--surface-soft); }
button.report-status-row:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.report-trend-total { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--text); }
.notification-symbol-legend-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; list-style:none; padding:12px 16px; margin:0; }
.notification-symbol-legend-content li { display:flex; align-items:flex-start; gap:12px; font-size:12px; }
.notification-symbol-legend-content li > div { min-width:0; overflow-wrap:anywhere; }
.notification-symbol-legend-content p { margin:3px 0 0; color:var(--muted); line-height:1.5; }
#status-tasks-list .my-task-row { width:100%; margin-bottom:8px; }
#status-tasks-error { color:var(--color-urgent-text); }
@media(max-width:900px) { .overview-widget-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .notification-symbol-legend-content { grid-template-columns:minmax(0,1fr); } }
@media print { button.report-status-row { color:#111; cursor:default; background:transparent; padding:8px 0; } }

/* 0.67.0: task-based quote comparison and explicit submission consent. */
.procurement-comparison { border: 1px solid var(--border, #ddd); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; background: var(--panel, #fff); }
.procurement-comparison h3 { margin: 0 0 .75rem; }
.procurement-comparison .table-scroll { overflow-x: auto; }
.procurement-comparison table { width: 100%; border-collapse: collapse; }
.procurement-comparison th, .procurement-comparison td { padding: .65rem .5rem; text-align: left; border-bottom: 1px solid var(--border, #ddd); }
.procurement-comparison th button { background: transparent; border: 0; color: inherit; font: inherit; font-weight: 600; padding: .25rem 0; white-space: nowrap; cursor: pointer; }
.procurement-comparison th small { display: block; font-weight: 400; }
.procurement-comparison .procurement-card { margin-top: .75rem; }
.procurement-compare-help { margin-top: 0; }
.procurement-dispatch-banner { padding: .75rem; border: 1px solid #bd850b; border-radius: 8px; background: #fff9e8; color: #684700; }
.procurement-dispatch-label { font-weight: 600; }
#procurement-submission-dialog { width: min(600px, calc(100vw - 2rem)); }
#procurement-reminder-days { max-width: 10rem; }
@media print { .procurement-comparison { break-inside: avoid; } .procurement-comparison [data-procurement-detail] { display: none; } }

/* 0.68.0: non-colour status signals; text-labelled status colours remain intact. */
/* Tile geometry is shared with notification-type-icon above. No brand-red status tiles. */
.status-signal-icon { margin-inline-end:.35rem; }
.status-signal-icon[data-signal-tone="info"] { color:var(--badge-info-text); background:var(--badge-info-bg); }
.status-signal-icon[data-signal-tone="warning"] { color:var(--badge-warning-text); background:var(--badge-warning-bg); }
.status-signal-icon[data-signal-tone="success"] { color:var(--badge-success-text); background:var(--badge-success-bg); }
.status-signal-icon:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.status-symbol-legend .status-signal-icon { margin-inline-end:0; }
.procurement-card .compact-record-summary > .status-signal-icon { margin-inline-end:0; }
.calendar-task:not(.calendar-external-event) { display:flex; align-items:center; gap:6px; min-height:36px; border:1px solid var(--line); }
.calendar-task:not(.calendar-external-event) > span:last-child { overflow:hidden; text-overflow:ellipsis; }
.calendar-task .status-signal-icon { margin-inline-end:0; }
.gantt-bar { border:2px solid var(--line); }
.gantt-milestone { outline:1px solid var(--line); outline-offset:1px; }
.gantt-row-label .status-signal-icon { margin-inline-end:0; }
@media print { .status-signal-icon, .notification-type-icon { print-color-adjust:exact; -webkit-print-color-adjust:exact; } }

.procurement-card.status-confirmed .status-badge { color: var(--order-confirmed-text); background: var(--order-confirmed-bg); }

.procurement-card.status-declined .status-badge, .procurement-card.status-cancelled .status-badge { color: var(--order-closed-text); background: var(--order-closed-bg); }

@media (max-width:600px) {
  .procurement-card .compact-record-summary { grid-template-columns:30px minmax(0,1fr) 16px; }
  .procurement-card .compact-record-summary > .status-signal-icon { grid-column:1; grid-row:1 / span 2; }
  .procurement-card .compact-record-summary h3 { grid-column:2; grid-row:1; }
  .procurement-card .compact-record-summary time { grid-column:2; grid-row:2; }
  .procurement-card .compact-record-summary::after { grid-column:3; grid-row:1 / span 2; }
}

/* 0.69.0: shared header time tracking, never a floating window. */
.header-time-tracking { min-width:0; max-width:100%; margin-left:auto; text-align:right; }
.header-time-tracking button { white-space:nowrap; }
.header-timer-running { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; max-width:100%; }
.header-timer-task { max-width:180px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.header-timer-task:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.header-timer-elapsed { flex-shrink:0; font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.header-time-dialog { width:min(560px,calc(100vw - 24px)); }
#header-time-project, #global-timer-stop-task { overflow-wrap:anywhere; }
#header-timer-start-form { display:grid; gap:12px; }
#header-timer-start-form button { justify-self:end; }
.header-time-dialog .overview-manual-time-form { grid-template-columns:1fr; }
.topbar-utility .compact-help { width:34px; min-width:34px; height:34px; padding:0; }
@media(max-width:1000px) { .topbar { grid-template-columns:minmax(0,1fr); grid-template-areas:"utility" "copy" "actions"; } .topbar-utility { width:100%; } }
@media(max-width:620px) { .header-time-tracking { grid-column:1 / -1; width:100%; } .header-timer-task { max-width:none; flex:1; text-align:right; } }
@media print { .header-time-tracking { display:none; } }

/* 0.72.0: let text wrap and reserve the full symbol tile, including at 320px. */
.gantt-row-label { flex-direction:row; align-items:center; gap:8px; }
.gantt-row-signals { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.gantt-row-copy { display:grid; gap:2px; min-width:0; flex:1; line-height:1.2; }
.calendar-grid { grid-template-columns:repeat(7,minmax(140px,1fr)); }
.calendar-grid[data-calendar-view="month"] .calendar-day { height:auto; min-height:112px; overflow:visible; }
.calendar-grid[data-calendar-view="month"] .calendar-task { padding:2px 4px; }
.calendar-task:not(.calendar-external-event) > span:last-child { min-width:0; }
.help-step-example, .help-step:hover .help-step-example, .help-step:focus .help-step-example, .help-step:focus-within .help-step-example { max-height:none; margin-top:9px; opacity:1; overflow:visible; }
.help-step-content, .help-step-example, .help-flow-node, .help-notification-table td { overflow-wrap:anywhere; }
.help-procurement-flow { grid-template-columns:1fr; }
.help-flow-arrow { justify-self:center; transform:rotate(90deg); }
.help-practical-example { padding:12px 16px; border-inline-start:3px solid var(--line); background:var(--surface-soft); border-radius:9px; line-height:1.55; }
.help-communication-diagram { overflow:visible; }
.help-communication-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:16px; }
.help-communication-steps li { min-width:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow-wrap:anywhere; }
.help-communication-steps h4 { margin:0 0 8px; font-size:14px; }
.help-communication-steps p { margin:0; font-size:13px; line-height:1.55; color:var(--text-soft); }
@media(max-width:620px) { .help-communication-steps { grid-template-columns:1fr; padding:10px; } }

#required-billing-dialog {width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:24px;}
#required-billing-dialog::backdrop{background:rgba(20,24,30,.9);}
#required-billing-dialog label{display:grid;gap:6px;margin:16px 0;}
#required-billing-dialog select,#required-billing-dialog button{max-width:100%;white-space:normal;}
#required-billing-dialog button{margin:8px 4px 8px 0;}
#required-sumup-card{min-width:0;width:100%;}