:root {
  --ink: #291d1e;
  --muted: #746667;
  --soft: #9a898b;
  --line: #eadedf;
  --line-strong: #dac8ca;
  --paper: #ffffff;
  --canvas: #faf6f6;
  --green-950: #4a080b;
  --green-900: #651014;
  --green-800: #8e1318;
  --green-700: #c0171d;
  --green-600: #e31c23;
  --green-100: #fbe1e2;
  --green-50: #fff1f2;
  --sand: #f4ede3;
  --sand-strong: #ddcdb9;
  --amber: #b86f24;
  --amber-soft: #f7eadb;
  --red: #a9483c;
  --red-soft: #f8e9e6;
  --blue: #49698f;
  --blue-soft: #e8eef5;
  --purple: #725885;
  --purple-soft: #eee9f2;
  --shadow-sm: 0 1px 2px rgb(74 8 11 / 5%), 0 3px 10px rgb(74 8 11 / 5%);
  --shadow-md: 0 14px 34px rgb(74 8 11 / 10%);
  --shadow-lg: 0 28px 70px rgb(74 8 11 / 18%);
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 22px;
  --header-height: 72px;
  --sidebar-width: 280px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: 15px;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button {
  border: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 3px solid rgb(227 28 35 / 22%);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--green-700);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: #ffd1d3;
}

.optional {
  color: var(--soft);
  font-size: 0.75rem;
  font-weight: 500;
}

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 140ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.button.primary {
  background: var(--green-700);
  box-shadow: 0 5px 12px rgb(192 23 29 / 20%);
  color: #fff;
}

.button.primary:hover {
  background: var(--green-800);
}

.button.secondary {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--green-800);
}

.button.secondary:hover,
.button.ghost:hover {
  border-color: #d8b4b6;
  background: var(--green-50);
}

.button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.button.danger {
  background: var(--red-soft);
  color: var(--red);
}

.button.compact {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 0.86rem;
}

.button.wide {
  width: 100%;
}

.icon-button,
.mini-icon-button,
.dialog-close {
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
}

.icon-button:hover,
.mini-icon-button:hover,
.dialog-close:hover {
  background: var(--green-50);
  color: var(--green-800);
}

.icon-button {
  width: 40px;
  height: 40px;
}

.mini-icon-button {
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
}

.danger-text {
  color: var(--red) !important;
}

/* Authentication */

.auth-screen {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(420px, 1.1fr) minmax(420px, 0.9fr);
  background: #fff;
}

.auth-visual {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 44px clamp(42px, 7vw, 104px) 72px;
  background:
    linear-gradient(145deg, rgb(74 8 11 / 96%), rgb(142 19 24 / 96%)),
    radial-gradient(circle at 15% 20%, #e31c23, transparent 45%);
  color: #fff;
}

.auth-visual::after {
  position: absolute;
  right: -180px;
  bottom: -230px;
  width: 560px;
  height: 560px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  content: "";
}

.auth-brand,
.mobile-auth-brand,
.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: var(--green-700);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
}

.brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgb(74 8 11 / 16%);
}

.auth-brand-logo {
  width: 58px;
  height: 58px;
  border: 1px solid rgb(255 255 255 / 20%);
  box-shadow: 0 8px 24px rgb(45 0 3 / 24%);
}

.auth-visual .brand-mark {
  background: #fff;
  color: var(--green-900);
}

.auth-message {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

.auth-message h1 {
  max-width: 630px;
  margin: 0 0 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.55rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.99;
}

.auth-message > p:last-child {
  max-width: 560px;
  margin: 0;
  color: #f3d6d7;
  font-size: 1.08rem;
  line-height: 1.65;
}

.auth-orbit {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
}

.orbit-one {
  top: 17%;
  right: -120px;
  width: 410px;
  height: 410px;
}

.orbit-two {
  top: 24%;
  right: -35px;
  width: 245px;
  height: 245px;
}

.auth-panel {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 48px;
}

.auth-card {
  width: min(430px, 100%);
}

.auth-card h2 {
  margin: 0;
  color: var(--green-950);
  font-size: 2rem;
  letter-spacing: -0.035em;
}

.auth-subtitle {
  margin: 10px 0 30px;
  color: var(--muted);
}

.microsoft-signin {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #8c8c8c;
  border-radius: 9px;
  background: #fff;
  color: #242424;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.microsoft-signin:hover {
  background: #f5f5f5;
  box-shadow: var(--shadow-sm);
}

.microsoft-mark {
  display: grid;
  width: 18px;
  height: 18px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.microsoft-mark i:nth-child(1) { background: #f25022; }
.microsoft-mark i:nth-child(2) { background: #7fba00; }
.microsoft-mark i:nth-child(3) { background: #00a4ef; }
.microsoft-mark i:nth-child(4) { background: #ffb900; }

.auth-security-note {
  margin: 14px 0 0;
  color: var(--soft);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 24px;
  border-radius: 12px;
  padding: 4px;
  background: var(--canvas);
}

.auth-tabs:has(.auth-tab[hidden]) {
  grid-template-columns: 1fr;
}

.auth-tab {
  min-height: 42px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.auth-tab.active {
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--green-800);
}

.auth-form {
  display: grid;
  gap: 17px;
}

.auth-form label,
.form-grid label,
.field-label {
  display: grid;
  gap: 7px;
  color: #44534f;
  font-size: 0.82rem;
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  padding: 10px 12px;
}

input,
select {
  min-height: 42px;
}

input[type="color"] {
  padding: 4px;
  cursor: pointer;
}

textarea {
  line-height: 1.5;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #a3afab;
}

.form-message {
  min-height: 20px;
  margin: 16px 0 0;
  color: var(--red);
  font-size: 0.85rem;
}

.mobile-auth-brand {
  display: none;
}

/* Application shell */

.app-shell {
  min-height: 100vh;
}

.app-header {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--header-height);
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 0 22px;
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(16px);
}

.app-brand {
  min-width: 226px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.brand-copy {
  display: grid;
  gap: 2px;
  letter-spacing: 0;
}

.brand-copy strong {
  color: var(--green-950);
  font-size: 0.89rem;
  letter-spacing: 0.08em;
}

.brand-copy small {
  color: var(--soft);
  font-size: 0.68rem;
  font-weight: 600;
}

.header-project-switcher {
  display: flex;
  min-width: 250px;
  align-items: center;
  gap: 10px;
}

.header-project-switcher label {
  color: var(--soft);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.header-project-switcher select {
  min-height: 38px;
  border-color: var(--line);
  background-color: var(--canvas);
  font-weight: 700;
}

.header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green-600);
  font-size: 0.75rem;
  font-weight: 700;
}

.sync-status span,
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #49a878;
  box-shadow: 0 0 0 4px rgb(73 168 120 / 13%);
}

.sync-status.saving span {
  background: var(--amber);
  animation: pulse 1.1s infinite;
}

.sync-status.offline {
  color: var(--red);
}

.sync-status.offline span {
  background: var(--red);
}

@keyframes pulse {
  50% { opacity: 0.35; }
}

.user-menu-button {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  padding: 5px 8px 5px 5px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.user-menu-button:hover,
.user-menu-button[aria-expanded="true"] {
  background: var(--green-50);
}

.avatar {
  display: inline-grid;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 84%);
  border-radius: 50%;
  background: var(--green-700);
  box-shadow: 0 0 0 1px var(--line);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-menu-copy {
  display: grid;
  gap: 1px;
}

.user-menu-copy strong {
  max-width: 130px;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-copy small {
  color: var(--soft);
  font-size: 0.66rem;
}

.user-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 12px);
  right: 0;
  width: 250px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.popover-person {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--line);
  padding: 16px;
}

.popover-person div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.popover-person strong,
.popover-person span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popover-person span {
  color: var(--soft);
  font-size: 0.72rem;
}

.popover-link {
  display: block;
  width: 100%;
  border: 0;
  padding: 12px 16px;
  background: #fff;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}

.popover-link:hover {
  background: var(--canvas);
}

.app-body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  padding-top: var(--header-height);
}

.sidebar {
  position: fixed;
  z-index: 40;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding: 18px 13px;
  background: #fff;
}

.primary-nav,
.project-nav {
  display: grid;
  gap: 4px;
}

.nav-item,
.project-nav-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 9px 10px;
  background: transparent;
  color: #53635e;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: left;
}

.nav-item:hover,
.project-nav-item:hover {
  background: var(--green-50);
  color: var(--green-800);
}

.nav-item.active,
.project-nav-item.active {
  background: var(--green-100);
  color: var(--green-900);
  font-weight: 780;
}

.nav-icon {
  width: 21px;
  color: var(--green-700);
  font-size: 1rem;
  text-align: center;
}

.project-nav-badge {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--project-color-soft, #dbe9e4);
  color: var(--project-color, var(--green-800));
  font-size: 0.65rem;
  font-weight: 800;
  overflow: hidden;
}

.project-nav-badge img,
.project-title-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-nav-item.active {
  background: var(--project-color-soft, var(--green-100));
  color: var(--project-color, var(--green-900));
}

.project-nav-name {
  overflow: hidden;
  color: var(--project-color, var(--green-800));
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-nav-item.active .project-nav-name {
  font-weight: 800;
}

.sidebar-section {
  min-height: 0;
  margin-top: 24px;
}

.sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 8px;
  color: var(--soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-nav {
  display: flex;
  max-height: calc(100vh - 360px);
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  padding-right: 3px;
}

.project-nav-client-group {
  display: grid;
  gap: 4px;
}

.project-nav-client-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px 3px;
  color: var(--soft);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-nav-client-heading span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-nav-client-heading span:last-child {
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.61rem;
  letter-spacing: 0;
}

.project-nav-client-projects {
  display: grid;
  gap: 4px;
}

.past-projects-sidebar {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.past-projects-sidebar > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  padding: 7px 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
}

.past-projects-sidebar > summary::-webkit-details-marker,
.past-projects-dashboard > summary::-webkit-details-marker {
  display: none;
}

.past-projects-sidebar > summary:hover {
  background: var(--canvas);
  color: var(--green-800);
}

.past-projects-sidebar > summary:focus-visible,
.past-projects-dashboard > summary:focus-visible {
  outline: 3px solid var(--green-100);
  outline-offset: 2px;
}

.past-project-count {
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0;
}

.collapse-chevron {
  display: inline-block;
  font-size: 0.9rem;
  transition: transform 150ms ease;
}

details[open] > summary .collapse-chevron {
  transform: rotate(180deg);
}

.past-projects-sidebar-groups {
  display: grid;
  gap: 13px;
  padding-top: 9px;
}

.sidebar-team {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 17px 7px 3px;
}

.app-version {
  color: var(--soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.auth-version {
  margin: 14px 0 0;
  text-align: center;
}

.sidebar-version {
  padding: 12px 8px 2px;
}

.team-stack {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding-left: 3px;
}

.team-stack .avatar {
  width: 32px;
  height: 32px;
  margin-left: -7px;
  font-size: 0.64rem;
}

.team-stack .avatar:first-child {
  margin-left: 0;
}

.team-overflow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-left: -7px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
}

.sidebar-team p {
  margin: 9px 2px 0;
  color: var(--soft);
  font-size: 0.69rem;
  line-height: 1.45;
}

.main-content {
  min-width: 0;
  grid-column: 2;
  padding: 28px clamp(20px, 3vw, 42px) 70px;
}

.page-view {
  width: min(1520px, 100%);
  margin: 0 auto;
}

.mobile-nav-toggle,
.sidebar-scrim {
  display: none;
}

/* Home */

.home-welcome {
  position: relative;
  display: flex;
  min-height: 230px;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 35px 39px;
  background: linear-gradient(130deg, var(--green-950), #a50f15 72%, #c0171d);
  box-shadow: var(--shadow-md);
  color: #fff;
}

.home-welcome::before,
.home-welcome::after {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 50%;
  content: "";
}

.home-welcome::before {
  top: -170px;
  right: -20px;
  width: 360px;
  height: 360px;
}

.home-welcome::after {
  top: -70px;
  right: 70px;
  width: 190px;
  height: 190px;
}

.home-welcome-copy {
  position: relative;
  z-index: 2;
  max-width: 690px;
}

.home-brand-watermark {
  position: absolute;
  top: 50%;
  right: 9%;
  width: 230px;
  height: 230px;
  border-radius: 24px;
  object-fit: cover;
  opacity: 0.18;
  pointer-events: none;
  transform: translateY(-50%) rotate(-3deg);
}

.home-welcome h1 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 3.7rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.home-welcome p:not(.eyebrow) {
  margin: 0;
  color: #f2d4d5;
  font-size: 1rem;
}

.home-welcome .button {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  border-color: rgb(255 255 255 / 15%);
  background: #fff;
  color: var(--green-900);
}

.home-deadlines {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid #dec8aa;
  border-radius: 15px;
  background: #fffaf2;
  box-shadow: 0 10px 28px rgb(101 16 20 / 8%);
}

.home-deadlines-heading {
  display: grid;
  min-width: 260px;
  grid-template-columns: 35px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 3px 10px;
  border-right: 1px solid #eadbc7;
  padding: 13px 17px;
  background: linear-gradient(135deg, #f4ead9, #fff8ed);
}

.home-deadlines-mark {
  position: relative;
  display: grid;
  width: 35px;
  height: 35px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 10px;
  background: var(--red);
  box-shadow: 0 5px 12px rgb(126 13 18 / 18%);
}

.home-deadlines-mark::before {
  width: 17px;
  height: 15px;
  border-radius: 3px;
  background:
    linear-gradient(#fff 0 0) 0 4px / 100% 2px no-repeat,
    linear-gradient(#fff 0 0) 3px 0 / 2px 4px no-repeat,
    linear-gradient(#fff 0 0) 12px 0 / 2px 4px no-repeat,
    rgb(255 255 255 / 28%);
  content: "";
}

.home-deadlines-heading .eyebrow {
  align-self: end;
  margin: 0;
  color: #9b7470;
  font-size: 0.55rem;
}

.home-deadlines-heading h2 {
  align-self: start;
  margin: 0;
  color: var(--green-950);
  font-size: 0.96rem;
  line-height: 1.05;
}

.home-deadlines-window {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 5px;
  border: 1px solid #ddc7aa;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgb(255 255 255 / 65%);
  color: #8d6d65;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.home-deadlines-calendar {
  grid-column: 2;
  justify-self: start;
  padding: 3px 0 0;
  background: transparent;
  color: var(--red);
  font-size: 0.64rem;
  font-weight: 800;
}

.home-deadlines-calendar:hover {
  color: var(--green-950);
}

.home-deadline-list {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 9px;
  overflow-x: auto;
  padding: 10px;
  scrollbar-width: thin;
}

.home-deadline-card {
  display: grid;
  min-width: 255px;
  max-width: 330px;
  flex: 1 0 255px;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: inset 3px 0 0 var(--project-color, var(--green-600));
  text-align: left;
  transition: 150ms ease;
}

.home-deadline-card:hover {
  border-color: color-mix(in srgb, var(--project-color, var(--green-600)) 40%, var(--line));
  background: var(--project-color-soft, var(--green-50));
  transform: translateY(-1px);
}

.home-deadline-card time {
  display: grid;
  width: 43px;
  height: 48px;
  align-content: center;
  justify-items: center;
  border-radius: 8px;
  background: var(--project-color-soft, var(--green-50));
  color: var(--project-color, var(--green-700));
  line-height: 1;
}

.home-deadline-card time span {
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-deadline-card time strong {
  margin-top: 3px;
  font-size: 1rem;
}

.home-deadline-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.home-deadline-copy > strong,
.home-deadline-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-deadline-copy > strong {
  color: var(--ink);
  font-size: 0.76rem;
}

.home-deadline-copy > span {
  color: var(--soft);
  font-size: 0.61rem;
}

.home-deadline-arrow {
  color: var(--project-color, var(--green-700));
  font-size: 0.9rem;
  font-weight: 800;
}

.home-deadlines-empty {
  align-self: center;
  margin: 0;
  padding: 13px 16px;
  color: var(--soft);
  font-size: 0.72rem;
}

.my-task-area,
.team-task-area {
  margin-top: 31px;
}

.my-task-area {
  position: relative;
  margin-inline: -18px;
  border: 1px solid #ddc6a5;
  border-radius: var(--radius-lg);
  padding: 24px 18px 18px;
  background:
    radial-gradient(circle at 94% 8%, rgb(255 255 255 / 72%) 0 90px, transparent 91px),
    linear-gradient(135deg, #f4ead9 0%, #efe0c8 100%);
  box-shadow: 0 18px 42px rgb(101 16 20 / 13%);
}

.my-task-area .my-task-heading {
  margin-bottom: 16px;
}

.my-task-area .my-task-heading h2 {
  font-size: 1.65rem;
}

.my-task-owner {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(160 124 79 / 30%);
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 4px 12px rgb(74 8 11 / 7%);
}

.my-task-owner .avatar {
  width: 46px;
  height: 46px;
  border-width: 3px;
}

.my-task-owner > div {
  display: grid;
  gap: 1px;
}

.my-task-owner strong {
  color: var(--green-950);
  font-size: 0.8rem;
}

.my-task-owner > div span {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
}

.my-task-area .my-task-workspace {
  border-color: #d7bea0;
  box-shadow: 0 8px 22px rgb(74 8 11 / 9%);
}

.team-task-area,
.secondary-section-heading {
  color: var(--muted);
}

.team-task-area .section-heading h2,
.secondary-section-heading h2 {
  color: #6f6061;
}

.team-task-area .eyebrow,
.secondary-section-heading .eyebrow {
  color: var(--soft);
}

.section-heading.my-task-heading,
.section-heading.team-task-heading {
  margin-top: 0;
}

.my-task-workspace {
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(280px, 0.82fr) minmax(440px, 1.7fr);
  align-items: start;
}

.my-fire-group {
  align-self: stretch;
  border-right: 1px solid #8e1318;
  background: linear-gradient(160deg, #c0171d 0%, #8e1318 100%);
}

.my-fire-heading,
.my-project-task-heading {
  display: grid;
  width: 100%;
  align-items: center;
  text-align: left;
}

.my-fire-heading {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  border-bottom: 1px solid rgb(255 255 255 / 22%);
  padding: 14px 15px;
}

.fire-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 12px rgb(74 8 11 / 24%);
  color: var(--green-700);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
}

.my-fire-heading > div,
.my-project-task-heading > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.my-fire-heading strong {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.my-fire-heading div span,
.my-project-task-heading div span {
  color: var(--soft);
  font-size: 0.65rem;
}

.my-fire-heading div span {
  color: #ffd7d9;
}

.my-fire-heading .my-task-count {
  background: rgb(255 255 255 / 16%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 26%);
}

.my-task-count {
  display: grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: #fff;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px var(--line);
}

.my-project-task-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  padding: 12px;
}

.my-project-task-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.my-project-task-heading {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 10px 12px;
  background: var(--canvas);
  box-shadow: inset 3px 0 0 var(--project-color, var(--green-600));
}

.my-project-task-heading:hover {
  background: var(--green-50);
}

.my-project-task-heading img,
.my-project-task-heading .employee-project-monogram {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  object-fit: cover;
  background: var(--project-color, var(--green-600));
  color: #fff;
  font-size: 0.58rem;
  font-weight: 850;
}

.my-project-task-heading strong {
  overflow: hidden;
  color: var(--green-950);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-task-list {
  min-width: 0;
}

.fire-task-list {
  max-height: 590px;
  overflow-y: auto;
}

.my-task-row {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
  padding: 10px 11px;
  background: #fff;
}

.my-task-row:last-child {
  border-bottom: 0;
}

.my-task-row:hover {
  background: var(--green-50);
}

.my-task-row.fire-copy {
  border-color: rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 94%);
}

.my-task-row.fire-copy:hover {
  background: #fff3f3;
}

.my-task-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  border-radius: 7px;
  padding: 1px 0 1px 9px;
  background: transparent;
  box-shadow: inset 3px 0 0 var(--project-color, var(--green-600));
  text-align: left;
}

.my-task-copy strong,
.my-task-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-task-copy strong {
  color: var(--ink);
  font-size: 0.76rem;
}

.my-task-copy span {
  color: var(--soft);
  font-size: 0.63rem;
}

.my-task-copy time.overdue {
  color: var(--red);
  font-weight: 750;
}

.my-task-row.completed {
  background: #f8faf9;
}

.my-task-row.completed .my-task-copy strong {
  color: var(--soft);
  text-decoration: line-through;
}

.fire-toggle {
  min-width: 43px;
  border: 1px solid #d8c4c4;
  border-radius: 999px;
  padding: 5px 7px;
  background: #fff;
  color: #9b7778;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.fire-toggle:hover,
.fire-toggle.active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.fire-toggle:disabled {
  cursor: wait;
  opacity: 0.55;
}

.my-task-empty {
  display: grid;
  gap: 4px;
  padding: 28px 18px;
  color: var(--soft);
  font-size: 0.71rem;
  text-align: center;
}

.my-task-empty strong {
  color: var(--muted);
  font-size: 0.77rem;
}

.my-fire-group .my-task-empty {
  color: #ffd7d9;
}

.my-fire-group .my-task-empty strong {
  color: #fff;
}

.team-task-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.team-task-summary span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.team-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
}

.employee-task-panel {
  min-width: 0;
  overflow: hidden;
}

.employee-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 15px;
  background: var(--canvas);
}

.employee-task-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.employee-task-person > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.employee-task-person strong {
  overflow: hidden;
  color: var(--green-950);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-task-person span:not(.avatar) {
  color: var(--soft);
  font-size: 0.67rem;
}

.unassigned-avatar {
  background: #89938f;
}

.employee-task-total {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 0.7rem;
  font-weight: 800;
}

.employee-task-list {
  max-height: 390px;
  overflow-y: auto;
}

.employee-project-task-group + .employee-project-task-group {
  border-top: 1px solid var(--line);
}

.employee-project-task-heading {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: var(--canvas);
  box-shadow: inset 3px 0 0 var(--project-color, var(--green-600));
  color: var(--muted);
  text-align: left;
}

.employee-project-task-heading:hover {
  background: var(--green-50);
}

.employee-project-task-heading img,
.employee-project-monogram {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  object-fit: cover;
  background: var(--project-color, var(--green-600));
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
}

.employee-project-task-heading strong {
  overflow: hidden;
  color: var(--green-950);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-project-task-heading > span:last-child {
  font-size: 0.65rem;
  font-weight: 800;
}

.employee-task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 11px 13px;
  background: #fff;
}

.employee-task-row:last-child {
  border-bottom: 0;
}

.employee-task-row:hover {
  background: var(--green-50);
}

.employee-task-row.completed {
  background: #f8faf9;
}

.team-task-check {
  position: relative;
  display: grid;
  width: 22px;
  height: 22px;
  cursor: pointer;
  place-items: center;
}

.team-task-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.team-task-check span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1.5px solid #9dafaa;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: 0.72rem;
  font-weight: 900;
}

.team-task-check input:focus-visible + span {
  outline: 3px solid rgb(227 28 35 / 22%);
  outline-offset: 2px;
}

.team-task-check input:checked + span {
  border-color: var(--green-600);
  background: var(--green-600);
  color: #fff;
}

.team-task-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 0;
  background: transparent;
  text-align: left;
}

.team-task-copy {
  border-radius: 7px;
  box-shadow: inset 3px 0 0 var(--project-color, var(--green-600));
  padding-left: 9px;
}

.team-task-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-task-copy span {
  overflow: hidden;
  color: var(--soft);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-task-copy time.overdue {
  color: var(--danger);
  font-weight: 750;
}

.employee-task-row.completed .team-task-copy strong {
  color: var(--soft);
  text-decoration: line-through;
}

.employee-task-empty {
  padding: 22px 15px;
  color: var(--soft);
  font-size: 0.75rem;
  text-align: center;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 31px 0 15px;
}

.section-heading h2,
.content-heading h2 {
  margin: 0;
  color: var(--green-950);
  font-size: 1.38rem;
  letter-spacing: -0.025em;
}

.section-heading p,
.content-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 16px;
}

.past-projects-dashboard {
  margin-top: 31px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.past-projects-dashboard > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: var(--radius);
  padding: 14px 16px;
  background: rgb(255 255 255 / 55%);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.past-projects-dashboard > summary:hover {
  background: #fff;
}

.past-projects-dashboard > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.past-projects-dashboard > summary .eyebrow {
  margin: 0;
  color: var(--soft);
}

.past-projects-dashboard > summary strong {
  color: #6f6061;
  font-size: 1.15rem;
}

.past-projects-dashboard > summary small {
  color: var(--muted);
  font-size: 0.75rem;
}

.past-projects-dashboard > .project-card-grid {
  padding-top: 16px;
}

.project-state-chip {
  border-radius: 999px;
  padding: 4px 8px;
  background: #ecebea;
  color: #6f6965;
  font-weight: 800;
}

.project-card {
  position: relative;
  display: flex;
  min-height: 225px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: 160ms ease;
}

.project-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--project-color, var(--green-600));
  content: "";
}

.project-card:hover {
  border-color: #b9cbc4;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.project-card:focus-visible {
  outline: 3px solid var(--project-color-soft, var(--green-100));
  outline-offset: 3px;
  border-color: var(--project-color, var(--green-600));
}

.project-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.project-card .project-monogram {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--project-color-soft, var(--green-100));
  color: var(--project-color, var(--green-800));
  font-weight: 850;
}

.project-card-cover {
  position: relative;
  height: 118px;
  margin: -20px -20px 0;
  overflow: hidden;
  background: var(--project-color-soft, var(--green-100));
}

.project-card-cover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgb(5 25 21 / 20%));
  content: "";
  pointer-events: none;
}

.project-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-cover .phase-badge {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  border: 1px solid rgb(255 255 255 / 58%);
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(5px);
}

.project-card:has(.project-card-cover) h3 { margin-top: 16px; }

.phase-badge,
.status-chip,
.type-chip,
.privacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 0.68rem;
  font-weight: 800;
}

.project-card .phase-badge {
  background: var(--project-color-soft, var(--green-50));
  color: var(--project-color, var(--green-700));
}

.project-card h3 {
  margin: 17px 0 4px;
  color: var(--green-950);
  font-size: 1.12rem;
}

.project-card .client-line {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.project-card-stats {
  display: flex;
  gap: 18px;
  margin-top: auto;
  padding-top: 20px;
}

.project-card-stat {
  display: grid;
  gap: 2px;
}

.project-card-stat strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.project-card-stat span {
  color: var(--soft);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.project-card-open {
  position: absolute;
  display: grid;
  right: 16px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--project-color-soft, var(--green-50));
  color: var(--project-color, var(--green-700));
  font-size: 1.1rem;
}

.empty-home,
.empty-panel {
  display: grid;
  min-height: 240px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 35px;
  background: rgb(255 255 255 / 55%);
  color: var(--muted);
  text-align: center;
}

.empty-panel.compact {
  min-height: 130px;
}

.empty-panel h3,
.empty-home h2 {
  margin: 0 0 8px;
  color: var(--green-950);
}

.empty-panel p,
.empty-home p {
  max-width: 440px;
  margin: 0 0 17px;
  line-height: 1.55;
}

/* Project header and tabs */

.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 30px;
  border-bottom: 1px solid var(--line);
  padding: 4px 3px 24px;
}

.project-identity {
  min-width: 0;
}

.project-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.project-title-mark {
  display: grid;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(17 83 70 / 10%);
  border-radius: 20px;
  background: var(--project-color-soft, var(--green-100));
  box-shadow: var(--shadow-sm);
  color: var(--project-color, var(--green-800));
  font-size: 1.25rem;
  font-weight: 850;
  overflow: hidden;
}

.team-task-project {
  display: flex;
  align-items: center;
  gap: 5px;
}

.team-task-project img,
.project-inline-image {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 4px;
  object-fit: cover;
}

.project-hero h1 {
  margin: 0;
  color: var(--green-950);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  letter-spacing: -0.045em;
}

.project-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 10px 0 0 116px;
  color: var(--muted);
  font-size: 0.78rem;
}

.project-kicker span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-deliverables {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--project-color, var(--green-700)) 18%, white);
  border-radius: 15px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #fff, var(--project-color-soft, var(--green-50)));
  box-shadow: var(--shadow-sm);
}

.project-deliverables-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.project-deliverables-heading .eyebrow {
  margin-bottom: 2px;
  font-size: 0.57rem;
}

.project-deliverables-heading h2 {
  margin: 0;
  color: var(--green-950);
  font-size: 0.92rem;
  letter-spacing: -0.015em;
}

.project-deliverable-add,
.project-deliverable-more {
  border: 0;
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--project-color, var(--green-700)) 11%, white);
  color: var(--project-color, var(--green-800));
  font-size: 0.65rem;
  font-weight: 850;
}

.project-deliverable-add:hover,
.project-deliverable-more:hover {
  background: var(--project-color, var(--green-700));
  color: #fff;
}

.project-deliverable-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
}

.project-deliverable {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(17 83 70 / 10%);
  border-radius: 10px;
  padding: 7px;
  background: rgb(255 255 255 / 82%);
  text-align: left;
}

.project-deliverable:hover {
  border-color: var(--project-color, var(--green-700));
  background: #fff;
  transform: translateY(-1px);
}

.project-deliverable.past {
  opacity: 0.68;
}

.project-deliverable-date {
  display: grid;
  width: 32px;
  height: 34px;
  place-content: center;
  border-radius: 8px;
  background: var(--project-color, var(--green-700));
  color: #fff;
  line-height: 1;
  text-align: center;
}

.project-deliverable-date strong {
  font-size: 0.78rem;
}

.project-deliverable-date small {
  margin-top: 2px;
  font-size: 0.48rem;
  font-weight: 800;
  text-transform: uppercase;
}

.project-deliverable-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.project-deliverable-copy strong,
.project-deliverable-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-deliverable-copy strong {
  color: var(--green-950);
  font-size: 0.68rem;
}

.project-deliverable-copy small {
  color: var(--muted);
  font-size: 0.56rem;
}

.project-deliverable-arrow {
  color: var(--project-color, var(--green-700));
  font-size: 0.75rem;
}

.project-deliverable-empty {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
  border: 1px dashed color-mix(in srgb, var(--project-color, var(--green-700)) 30%, white);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgb(255 255 255 / 62%);
  color: var(--muted);
  text-align: left;
}

.project-deliverable-empty:hover {
  border-color: var(--project-color, var(--green-700));
  background: #fff;
}

.project-deliverable-empty strong {
  color: var(--project-color, var(--green-800));
  font-size: 0.7rem;
}

.project-deliverable-empty span {
  font-size: 0.59rem;
}

.project-deliverable-more {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 1px;
}

.project-edit-button {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.project-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.project-tabs::-webkit-scrollbar { display: none; }

.project-tab {
  position: relative;
  display: flex;
  min-height: 56px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.project-tab:hover {
  color: var(--project-color, var(--green-800));
}

.project-tab.active {
  color: var(--project-color, var(--green-900));
}

.project-tab.active::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--project-color, var(--green-700));
  content: "";
}

.private-tab span,
.privacy-chip {
  background: var(--purple-soft);
  color: var(--purple);
}

.private-tab span {
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.tab-content {
  padding-top: 26px;
}

.content-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.content-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Overview */

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.7fr);
  gap: 18px;
  margin-top: 18px;
}

.overview-main,
.overview-side {
  display: grid;
  align-content: start;
  gap: 18px;
}

.project-assistant {
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--project-color, var(--green-700)) 38%, var(--line));
  background:
    radial-gradient(circle at 94% -20%, color-mix(in srgb, var(--project-color, var(--green-700)) 22%, transparent), transparent 48%),
    #fff;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--project-color, var(--green-700)) 13%, transparent);
}

.project-assistant-header {
  padding: 21px 22px;
}

.project-assistant-header > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.project-assistant-header > div > div {
  display: grid;
  gap: 3px;
}

.project-assistant-header .eyebrow,
.upcoming-deadlines .eyebrow {
  margin: 0;
  color: var(--project-color, var(--green-700));
  font-size: 0.58rem;
}

.project-assistant-header h3 {
  font-size: 1.25rem;
}

.project-assistant-header p {
  margin: 0;
  color: var(--soft);
  font-size: 0.67rem;
}

.project-assistant-mark,
.project-assistant-answer-label > span {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  background: var(--project-color, var(--green-700));
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.assistant-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--canvas);
  color: var(--soft);
  font-size: 0.61rem;
  font-weight: 850;
  text-transform: uppercase;
}

.assistant-status.ready {
  border-color: color-mix(in srgb, var(--project-color, var(--green-700)) 24%, var(--line));
  background: var(--project-color-soft, var(--green-50));
  color: var(--project-color, var(--green-700));
}

.project-assistant-body {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.project-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 9px;
}

.project-assistant-form textarea {
  min-height: 88px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 15px 16px;
  background: #fff;
  color: var(--green-950);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
}

.project-assistant-form textarea:focus {
  border-color: var(--project-color, var(--green-700));
  box-shadow: 0 0 0 3px var(--project-color-soft, var(--green-50));
  outline: 0;
}

.project-assistant-form textarea:disabled {
  cursor: not-allowed;
  background: var(--canvas);
}

.project-assistant-form .button {
  min-width: 92px;
}

.upcoming-deadlines {
  border-color: color-mix(in srgb, var(--project-color, var(--green-700)) 20%, var(--line));
  box-shadow: 0 10px 26px rgba(35, 57, 50, 0.08);
}

.upcoming-deadlines .surface-header {
  align-items: flex-start;
  padding: 19px 18px;
}

.upcoming-deadlines .surface-header > div {
  display: grid;
  gap: 5px;
}

.upcoming-deadlines .surface-header h3 {
  font-size: 1.05rem;
}

.assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.assistant-suggestions button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
  color: var(--green-700);
  font-size: 0.66rem;
  font-weight: 750;
}

.assistant-suggestions button:hover {
  border-color: var(--project-color, var(--green-700));
  background: var(--project-color-soft, var(--green-50));
}

.project-assistant-response {
  min-height: 58px;
}

.project-assistant-empty,
.project-assistant-message {
  display: grid;
  gap: 4px;
  border-radius: 10px;
  padding: 13px 14px;
  background: var(--canvas);
}

.project-assistant-empty strong,
.project-assistant-message strong {
  color: var(--green-950);
  font-size: 0.76rem;
}

.project-assistant-empty span,
.project-assistant-message span {
  color: var(--soft);
  font-size: 0.7rem;
  line-height: 1.45;
}

.project-assistant-message.setup {
  background: #fff8e8;
}

.project-assistant-message.error {
  background: var(--red-soft);
}

.project-assistant-message.error strong,
.project-assistant-message.error span {
  color: var(--red);
}

.project-assistant-thinking {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  padding: 13px 14px;
  background: var(--project-color-soft, var(--green-50));
  color: var(--project-color, var(--green-700));
}

.project-assistant-thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: assistant-pulse 1.1s infinite ease-in-out;
}

.project-assistant-thinking span:nth-child(2) { animation-delay: 0.14s; }
.project-assistant-thinking span:nth-child(3) { animation-delay: 0.28s; }

.project-assistant-thinking strong {
  margin-left: 5px;
  font-size: 0.73rem;
}

@keyframes assistant-pulse {
  0%, 70%, 100% { opacity: 0.28; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

.project-assistant-answer {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--project-color, var(--green-700)) 20%, var(--line));
  border-radius: 11px;
  padding: 14px;
  background: color-mix(in srgb, var(--project-color-soft, var(--green-50)) 56%, #fff);
}

.project-assistant-answer-label {
  display: flex;
  align-items: center;
  gap: 9px;
}

.project-assistant-answer-label > span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 0.56rem;
}

.project-assistant-answer-label strong {
  color: var(--green-950);
  font-size: 0.75rem;
}

.project-assistant-answer-body {
  color: #394b45;
  font-size: 0.79rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.project-assistant-answer > small,
.project-assistant-privacy {
  margin: 0;
  color: var(--soft);
  font-size: 0.62rem;
  line-height: 1.45;
}

.project-assistant-privacy::before {
  content: "◉";
  margin-right: 5px;
  color: var(--project-color, var(--green-700));
  font-size: 0.52rem;
}

.surface {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}

.surface-header h3 {
  margin: 0;
  color: var(--green-950);
  font-size: 0.96rem;
}

.surface-header button {
  background: transparent;
  color: var(--green-700);
  font-size: 0.74rem;
  font-weight: 800;
}

.surface-body {
  padding: 18px;
}

.overview-description {
  margin: 0;
  color: #53635e;
  line-height: 1.65;
  white-space: pre-wrap;
}

.project-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.fact {
  min-height: 78px;
  border-radius: 10px;
  padding: 12px;
  background: var(--canvas);
}

.fact span {
  display: block;
  margin-bottom: 5px;
  color: var(--soft);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fact strong {
  color: var(--green-950);
  font-size: 0.82rem;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.metric-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
  background: #fff;
}

.metric-card span {
  color: var(--soft);
  font-size: 0.67rem;
  font-weight: 750;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  color: var(--green-950);
  font-size: 1.5rem;
}

.metric-card small {
  color: var(--muted);
  font-size: 0.68rem;
}

.activity-list,
.deadline-list,
.consultant-mini-list {
  display: grid;
  gap: 0;
}

.activity-item,
.deadline-item,
.consultant-mini-item {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
}

.activity-item:first-child,
.deadline-item:first-child,
.consultant-mini-item:first-child { padding-top: 0; }
.activity-item:last-child,
.deadline-item:last-child,
.consultant-mini-item:last-child { border-bottom: 0; padding-bottom: 0; }

.activity-icon,
.deadline-date {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 0.72rem;
  font-weight: 800;
}

.activity-copy,
.deadline-copy,
.consultant-mini-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.activity-copy strong,
.deadline-copy strong,
.consultant-mini-copy strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-copy span,
.deadline-copy span,
.consultant-mini-copy span {
  color: var(--soft);
  font-size: 0.68rem;
}

/* Meeting notes */

.meeting-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.7fr);
  gap: 18px;
  align-items: start;
}

.meeting-compose {
  min-width: 0;
}

.meeting-meta-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 13px;
  padding: 18px;
}

.meeting-type-row {
  display: flex;
  gap: 8px;
}

.choice-chip {
  position: relative;
  cursor: pointer;
}

.choice-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-chip span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 7px 11px;
  background: #fff;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.choice-chip input:checked + span {
  border-color: #8fb3aa;
  background: var(--green-100);
  color: var(--green-800);
}

.span-two {
  grid-column: 1 / -1;
}

.editor-section {
  border-top: 1px solid var(--line);
  padding: 18px;
}

.editor-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.editor-label-row > span:first-child {
  color: #44534f;
  font-size: 0.82rem;
  font-weight: 750;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.discussion-key {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.discussion-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.65rem;
}

.meeting-key-box {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.62rem;
  line-height: 1;
}

.meeting-key-box.action { color: #1f6755; }
.meeting-key-box.decision { color: #765615; }

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 6px;
  background: var(--canvas);
}

.toolbar-button {
  min-width: 30px;
  min-height: 29px;
  border-radius: 6px;
  padding: 5px 7px;
  background: transparent;
  color: #4f5f5a;
  font-size: 0.72rem;
  font-weight: 700;
}

.toolbar-button:hover {
  background: #fff;
  color: var(--green-800);
  box-shadow: var(--shadow-sm);
}

.meeting-item-button {
  padding-inline: 9px;
}

.meeting-item-button.action {
  background: #e4f3ed;
  color: #1f6755;
}

.meeting-item-button.decision {
  background: #fff2d6;
  color: #765615;
}

.toolbar-divider {
  width: 1px;
  height: 21px;
  margin: 0 3px;
  background: var(--line-strong);
}

.rich-editor {
  min-height: 300px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line-strong);
  border-radius: 0 0 10px 10px;
  padding: 16px;
  background: #fff;
  color: #293733;
  line-height: 1.62;
}

.meeting-editor-shell {
  position: relative;
  overflow: visible;
}

.meeting-rich-editor {
  overflow: visible;
  padding-left: 16px;
}

.meeting-rich-editor [data-meeting-line] {
  position: relative;
  min-height: 1.62em;
}

.meeting-line-controls {
  position: absolute;
  top: 0.08em;
  left: calc(-112px - var(--meeting-line-indent, 0px));
  display: inline-flex;
  gap: 5px;
  width: 66px;
  align-items: center;
  user-select: none;
}

.meeting-line-checkbox {
  display: inline-flex;
  min-width: 30px;
  height: 25px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 4px;
  background: #fff;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.meeting-line-checkbox::before {
  position: relative;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: #fff;
  content: "";
}

.meeting-line-checkbox::after {
  content: attr(data-short-label);
}

.meeting-line-checkbox:hover {
  border-color: #8da099;
  box-shadow: var(--shadow-sm);
}

.meeting-line-checkbox.action[aria-checked="true"] {
  border-color: #54a488;
  background: #dff2ea;
  color: #1f6755;
}

.meeting-line-checkbox.action[aria-checked="true"]::before {
  background: #2f826a;
  box-shadow: inset 0 0 0 2px #fff;
}

.meeting-line-checkbox.decision[aria-checked="true"] {
  border-color: #d0a43c;
  background: #fff0c9;
  color: #765615;
}

.meeting-line-checkbox.decision[aria-checked="true"]::before {
  background: #a97917;
  box-shadow: inset 0 0 0 2px #fff;
}

.rich-editor:empty::before {
  color: #a0ada8;
  content: attr(data-placeholder);
  pointer-events: none;
}

[data-meeting-item="action"] {
  border-bottom: 2px solid #54a488;
  border-radius: 3px;
  padding: 1px 2px;
  background: #dff2ea;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-meeting-item="decision"] {
  border-bottom: 2px solid #d0a43c;
  border-radius: 3px;
  padding: 1px 2px;
  background: #fff0c9;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.rich-editor img,
.published-note-body img,
.board-card-editor img,
.private-editor img {
  max-width: min(100%, 720px);
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.autosave-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--soft);
  font-size: 0.68rem;
}

.autosave-note::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a381;
  content: "";
}

.paste-zone {
  display: grid;
  min-height: 110px;
  place-items: center;
  border: 1px dashed #adbfba;
  border-radius: 10px;
  padding: 15px;
  background: var(--green-50);
  color: var(--muted);
  text-align: center;
}

.paste-zone:focus,
.paste-zone.drag-over {
  border-color: var(--green-600);
  background: var(--green-100);
}

.paste-zone strong {
  display: block;
  margin-bottom: 4px;
  color: var(--green-800);
}

.paste-zone span {
  font-size: 0.72rem;
}

.screenshot-gallery,
.published-image-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 9px;
  margin-top: 12px;
}

.screenshot-item {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.screenshot-item img {
  width: 100%;
  height: 92px;
  object-fit: cover;
}

.screenshot-item button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgb(74 8 11 / 84%);
  color: #fff;
}

.screenshot-item textarea {
  min-height: 62px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 9px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.screenshot-item textarea:focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: -3px;
}

.published-screenshot-item {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.published-screenshot-image {
  display: block;
  width: 100%;
  padding: 0;
  background: #fff;
}

.published-screenshot-image img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.published-screenshot-item figcaption {
  border-top: 1px solid var(--line);
  padding: 9px 10px;
  color: #44534f;
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: left;
  white-space: pre-wrap;
}

.report-preview {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
  background: var(--canvas);
  color: #394a45;
  line-height: 1.55;
  white-space: pre-wrap;
}

.report-preview-text {
  white-space: pre-wrap;
}

.report-images {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.report-images h4 { margin: 0 0 12px; }

.report-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.report-image-grid figure { margin: 0; }
.report-image-grid img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 9px; cursor: zoom-in; }
.report-image-grid figcaption { padding-top: 6px; color: var(--soft); font-size: 0.75rem; }

.compose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 15px 18px;
  background: #fbfcfb;
}

.compose-actions-left,
.compose-actions-right {
  display: flex;
  gap: 8px;
}

.published-notes {
  position: sticky;
  top: calc(var(--header-height) + 18px);
  max-height: calc(100vh - var(--header-height) - 52px);
  overflow: auto;
}

.published-note-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.published-note {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.published-note-open {
  display: grid;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  gap: 7px;
  padding: 13px;
  text-align: left;
}

.published-note-open:hover { background: var(--green-50); }

.published-note-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.published-note-title strong {
  font-size: 0.79rem;
}

.published-note-title time {
  flex: 0 0 auto;
  color: var(--soft);
  font-size: 0.64rem;
}

.published-note-title-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.published-note-delete {
  position: absolute;
  right: 13px;
  bottom: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--red-700);
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 700;
}

.published-note { position: relative; padding-bottom: 20px; }

.published-note-delete:hover {
  text-decoration: underline;
}

.published-note-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--soft);
  font-size: 0.67rem;
}

.published-note-body {
  border-top: 1px solid var(--line);
  padding: 14px;
  color: #465650;
  font-size: 0.78rem;
  line-height: 1.58;
}

.report-mini {
  margin-top: 13px;
  border-radius: 9px;
  padding: 12px;
  background: var(--green-50);
  white-space: pre-wrap;
}

.published-final-report {
  margin-top: 0;
}

.my-notes-section {
  margin-top: 18px;
  overflow: hidden;
}

.my-notes-section .surface-header > div {
  min-width: 0;
}

.my-notes-section .surface-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.my-notes-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.my-note-list {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.my-note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  transition: 140ms ease;
}

.my-note-card:hover {
  border-color: #aec5bd;
  box-shadow: var(--shadow-sm);
}

.my-note-card.active {
  border-color: var(--project-color, var(--green-600));
  box-shadow: inset 3px 0 0 var(--project-color, var(--green-600));
}

.my-note-open {
  display: grid;
  min-width: 0;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  color: inherit;
  text-align: left;
}

.my-note-date,
.my-note-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.my-note-date {
  align-self: stretch;
  align-content: center;
  border-right: 1px solid var(--line);
}

.my-note-date strong,
.my-note-copy strong {
  color: var(--green-950);
  font-size: 0.8rem;
}

.my-note-date small,
.my-note-copy small {
  color: var(--soft);
  font-size: 0.65rem;
}

.my-note-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-note-actions {
  display: flex;
  gap: 7px;
  padding-right: 13px;
}

.button.danger-text { color: var(--red); }

/* Tasks */

.tasks-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.task-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.task-group {
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.task-group-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
  padding: 15px 17px;
}

.task-group-open-count {
  min-width: 72px;
  border: 1px solid #f1c9cb;
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff6f6;
  color: var(--red);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.task-group-header h3 {
  margin: 0 0 3px;
  font-size: 0.98rem;
}

.task-group-header p {
  margin: 0;
  color: var(--soft);
  font-size: 0.71rem;
}

.task-group-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 8px;
}

.task-group-header-actions .quick-add-task {
  flex: 1;
  width: auto;
}

.task-group-toggle {
  flex: 0 0 auto;
}

.task-group-toggle-icon {
  display: inline-block;
  margin-right: 5px;
  transition: transform 160ms ease;
}

.task-group.collapsed .task-group-header {
  border-bottom: 0;
}

.task-group.collapsed .task-group-toggle-icon {
  transform: rotate(-90deg);
}

.quick-add-task {
  display: flex;
  width: min(430px, 50%);
  gap: 7px;
}

.quick-add-task input {
  min-width: 0;
  min-height: 38px;
}

.technical-template-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #cfdfda;
  padding: 13px 17px;
  background: var(--green-50);
}

.technical-template-copy {
  display: grid;
  gap: 3px;
  max-width: 480px;
}

.technical-template-copy strong {
  color: var(--green-800);
  font-size: 0.78rem;
}

.technical-template-copy span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.technical-template-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}

.technical-template-controls label {
  display: grid;
  gap: 3px;
}

.technical-template-controls label > span {
  color: var(--soft);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.technical-template-controls select {
  width: auto;
  min-width: 185px;
  min-height: 34px;
  padding: 6px 30px 6px 9px;
  font-size: 0.7rem;
}

.template-count {
  align-self: center;
  color: var(--soft);
  font-size: 0.64rem;
  white-space: nowrap;
}

.technical-template-controls .button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.task-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 13px;
  background: var(--canvas);
}

.task-column {
  min-width: 230px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: rgb(255 255 255 / 68%);
}

.task-column.drag-over {
  border-color: var(--green-600);
  background: var(--green-100);
}

.task-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px 10px;
  color: #52615d;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.task-column-header span:last-child {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #e7eeeb;
  color: var(--muted);
  font-size: 0.62rem;
}

.task-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 80px;
}

.task-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
  background: #fff;
  box-shadow: 0 2px 6px rgb(74 8 11 / 4%);
}

.task-card[draggable="true"] {
  cursor: grab;
}

.task-card.is-dragging { opacity: 0.45; }

.task-card-top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.task-title {
  flex: 1;
  margin: 0;
  color: #293833;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
}

.task-title-button {
  padding: 0;
  background: transparent;
  text-align: left;
}

.task-title-button:hover {
  color: var(--green-700);
}

.task-delete-button {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--soft);
  font-size: 1rem;
}

.task-delete-button:hover {
  background: var(--red-soft);
  color: var(--red);
}

.task-card-completed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 25px;
  align-items: center;
  gap: 8px;
  padding-block: 9px;
}

.task-card-progress-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px 25px;
  align-items: center;
  gap: 8px;
  padding-block: 9px;
  transition: 140ms ease;
}

.task-card-progress-compact:hover {
  border-color: var(--green-600);
  background: var(--green-50);
}

.task-card-progress-compact .task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-compact-expand {
  color: var(--green-700);
  font-size: 1rem;
  font-weight: 850;
  opacity: 0.55;
  transition: 140ms ease;
}

.task-card-progress-compact:hover .task-compact-expand {
  opacity: 1;
  transform: translateX(2px);
}

.task-card-completed .task-title {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-task-assignee {
  display: inline-flex;
  max-width: 120px;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--soft);
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-task-assignee .avatar {
  width: 20px;
  height: 20px;
  font-size: 0.52rem;
}

.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.task-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 4px 6px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.61rem;
}

.task-meta-chip.overdue {
  background: var(--red-soft);
  color: var(--red);
}

.task-progress {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: #e8eeeb;
}

.task-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green-600);
}

.task-card-details {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.task-card-details label {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--soft);
  font-size: 0.65rem;
  font-weight: 750;
}

.task-card-details input,
.task-card-details select,
.task-card-details textarea {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 0.7rem;
}

.task-card-details textarea {
  grid-column: 1 / -1;
}

.task-move-row {
  display: flex;
  gap: 5px;
}

.task-move-row button {
  flex: 1;
  border-radius: 6px;
  padding: 6px 4px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.task-move-row button.active {
  background: var(--green-100);
  color: var(--green-800);
}

.delete-link {
  background: transparent;
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: left;
}

/* Project information board */

.board-tab-content {
  padding-top: 20px;
}

.board-page-heading {
  margin-bottom: 14px;
}

.board-workspace {
  position: relative;
  height: clamp(590px, calc(100vh - 300px), 900px);
  min-height: 590px;
  overflow: hidden;
  border: 1px solid #cbd6d2;
  border-radius: 18px;
  background-color: #e9eeec;
  background-image: radial-gradient(circle, rgb(71 99 91 / 23%) 1.2px, transparent 1.2px);
  background-position: -1px -1px;
  background-size: 24px 24px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%), var(--shadow-md);
  cursor: grab;
  outline: none;
  touch-action: none;
}

.board-workspace:focus-visible {
  box-shadow: inset 0 0 0 3px rgb(47 111 100 / 25%), var(--shadow-md);
}

.board-workspace.is-pan-ready,
.board-workspace.is-panning {
  cursor: grabbing;
}

.board-workspace.is-panning .board-canvas {
  user-select: none;
}

.board-toolbar {
  position: absolute;
  z-index: 20;
  top: 16px;
  left: 16px;
  display: flex;
  height: 40px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgb(44 70 62 / 15%);
  border-radius: 11px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 7px 20px rgb(31 58 50 / 14%);
  backdrop-filter: blur(10px);
}

.board-toolbar button {
  display: grid;
  height: 100%;
  min-width: 40px;
  place-items: center;
  padding: 0 12px;
  background: transparent;
  color: var(--green-900);
  font-size: 1rem;
  font-weight: 800;
}

.board-toolbar button:hover {
  background: var(--green-50);
}

.board-toolbar .board-zoom-level {
  min-width: 58px;
  color: var(--muted);
  font-size: 0.7rem;
}

.board-toolbar .board-fit-control {
  min-width: 76px;
  font-size: 0.69rem;
}

.board-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--line);
}

.board-pan-hint {
  position: absolute;
  z-index: 15;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(44 70 62 / 11%);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgb(255 255 255 / 89%);
  box-shadow: 0 5px 18px rgb(31 58 50 / 10%);
  color: #65746f;
  font-size: 0.63rem;
  font-weight: 700;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

.board-pan-hint > span {
  color: var(--green-700);
  font-size: 0.85rem;
}

.board-pan-hint i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a0aca8;
}

.board-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  min-width: 1612px;
  min-height: 760px;
  padding: 74px 72px 92px;
  transform-origin: 0 0;
  will-change: transform;
}

.board-canvas-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: var(--green-950);
}

.board-canvas-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--project-color, var(--green-800));
  box-shadow: 0 8px 18px rgb(29 64 55 / 18%);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.board-canvas-title p,
.board-canvas-title h3 {
  margin: 0;
}

.board-canvas-title p {
  margin-bottom: 3px;
  color: var(--project-color, var(--green-700));
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.board-canvas-title h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
}

.board-canvas-title div > span {
  display: block;
  margin-top: 3px;
  color: var(--soft);
  font-size: 0.65rem;
}

.info-board {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(4, 340px);
  gap: 38px 36px;
  align-items: start;
}

.board-section {
  --board-accent: #5f88ae;
  --board-soft: #e7f0f7;
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
}

.board-section:nth-child(6n + 2) { --board-accent: #59917d; --board-soft: #e7f2ed; }
.board-section:nth-child(6n + 3) { --board-accent: #b78142; --board-soft: #f5ecdf; }
.board-section:nth-child(6n + 4) { --board-accent: #806e9e; --board-soft: #eeeaf4; }
.board-section:nth-child(6n + 5) { --board-accent: #b36e70; --board-soft: #f5e8e8; }
.board-section:nth-child(6n + 6) { --board-accent: #688f9a; --board-soft: #e7f0f2; }

.board-section:focus-within {
  filter: drop-shadow(0 10px 14px rgb(28 54 47 / 9%));
}

.board-section-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border-bottom: 3px solid var(--board-accent);
  padding: 0 2px 9px;
  background: transparent;
}

.board-section-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.board-section-title > span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--board-soft);
  color: var(--board-accent);
  font-size: 0.57rem;
  font-weight: 850;
}

.board-section-header h3 {
  margin: 0;
  overflow: hidden;
  color: #2d453e;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.board-section-header small {
  display: block;
  margin-top: 2px;
  color: #7b8985;
  font-size: 0.57rem;
  font-weight: 650;
}

.board-section-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.board-section-actions button {
  min-height: 28px;
  border-radius: 8px;
  background: rgb(255 255 255 / 62%);
  color: #52666e;
  font-size: 0.65rem;
  font-weight: 800;
}

.board-section-actions button:hover {
  background: var(--board-soft);
  color: var(--green-800);
}

.board-section-actions .board-add-note {
  padding: 0 7px;
}

.board-add-note span {
  margin-right: 2px;
  font-size: 0.8rem;
}

.board-section-actions .board-section-menu {
  width: 28px;
  min-width: 28px;
  padding: 0;
}

.board-card-list {
  display: grid;
  gap: 8px;
  padding: 9px 0 0;
}

.board-card {
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--board-accent);
  border-radius: 3px 9px 9px 3px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 3px 9px rgb(35 59 52 / 6%);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.board-card:focus-within {
  box-shadow: 0 0 0 3px rgb(47 111 100 / 9%), 0 5px 13px rgb(35 59 52 / 8%);
}

.board-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 0;
  padding: 8px 10px 2px;
}

.board-card-title {
  flex: 1;
  min-height: 26px;
  border: 0;
  padding: 4px 2px;
  background: transparent;
  color: #35463f;
  font-size: 0.76rem;
  font-weight: 800;
}

.board-card-head button {
  width: 27px;
  height: 27px;
  border-radius: 6px;
  background: transparent;
  color: var(--soft);
  opacity: 0;
  transition: opacity 120ms ease;
}

.board-card-head button:hover { background: var(--red-soft); color: var(--red); }
.board-card:hover .board-card-head button,
.board-card:focus-within .board-card-head button { opacity: 1; }

.board-card-editor {
  min-height: 52px;
  overflow-wrap: anywhere;
  padding: 4px 11px 11px;
  color: #465650;
  font-size: 0.76rem;
  line-height: 1.5;
  outline: 0;
}

.board-card-editor:empty::before {
  color: #a1aca9;
  content: attr(data-placeholder);
  pointer-events: none;
}

.board-card-foot {
  display: none;
}

.board-empty {
  display: flex;
  min-height: 60px;
  align-items: center;
  gap: 8px;
  border: 1px dashed #b7c7c1;
  border-radius: 9px;
  padding: 9px 11px;
  background: rgb(255 255 255 / 32%);
  color: var(--soft);
  font-size: 0.7rem;
  text-align: left;
}

.board-empty:hover {
  border-color: #8eaaa0;
  background: var(--green-50);
  color: var(--green-800);
}

.board-empty > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  margin: 0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 7px rgb(35 59 52 / 9%);
  color: var(--green-700);
  font-size: 1rem;
}

.board-empty strong { font-size: 0.67rem; }
.board-empty small { display: none; }

.add-section-card {
  display: grid;
  min-height: 120px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px dashed #aabbb5;
  border-radius: 11px;
  background: rgb(255 255 255 / 20%);
  color: var(--green-700);
  font-weight: 800;
}

.add-section-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-bottom: 4px;
  border: 1px solid #c6d5d0;
  border-radius: 11px;
  background: rgb(255 255 255 / 80%);
  box-shadow: 0 4px 10px rgb(35 59 52 / 8%);
  font-size: 1.2rem;
}

.add-section-card small {
  max-width: 240px;
  color: #788782;
  font-size: 0.65rem;
  font-weight: 550;
}

.add-section-card:hover {
  border-color: #75998c;
  background: rgb(235 245 241 / 72%);
}

/* Consultants */

.consultant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 13px;
}

.consultant-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.consultant-card-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.consultant-logo {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: var(--sand);
  color: #765330;
  font-size: 0.7rem;
  font-weight: 850;
}

.consultant-card-title {
  min-width: 0;
  flex: 1;
}

.consultant-card-title h3 {
  margin: 1px 0 4px;
  overflow: hidden;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consultant-card-title span {
  color: var(--muted);
  font-size: 0.7rem;
}

.card-action-button {
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.consultant-contact {
  display: grid;
  gap: 7px;
}

.consultant-contact a,
.consultant-contact span {
  overflow: hidden;
  color: #53635e;
  font-size: 0.72rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consultant-contact a:hover { color: var(--green-700); text-decoration: underline; }

.consultant-notes {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 11px;
  color: var(--soft);
  font-size: 0.71rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Calendar */

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
  gap: 18px;
  align-items: start;
}

.calendar-surface {
  overflow: hidden;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.calendar-toolbar h3 {
  margin: 0;
  font-size: 1rem;
}

.month-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.month-controls button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--canvas);
  color: var(--muted);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-grid {
  display: block;
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  position: relative;
}

.calendar-weekdays div {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  color: var(--soft);
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  grid-row: 1;
  min-width: 0;
  min-height: max(105px, calc(48px + (var(--calendar-lanes) * 25px)));
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 7px;
  background: #fff;
}

.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { background: #fafbfa; color: #aab4b1; }
.calendar-day.today { background: var(--green-50); }

.calendar-day-number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-bottom: 5px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 750;
}

.calendar-day.today .calendar-day-number {
  background: var(--green-700);
  color: #fff;
}

.calendar-entry {
  display: block;
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: start;
  width: auto;
  min-width: 0;
  height: 22px;
  overflow: hidden;
  margin: calc(36px + (var(--calendar-lane) * 25px)) 4px 0;
  border-left: 3px solid var(--green-600);
  border-radius: 5px;
  padding: 3px 6px;
  background: var(--green-100);
  color: var(--green-900);
  font-size: 0.58rem;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-entry-title {
  display: inline;
  overflow: hidden;
  font-size: 0.53rem;
  font-weight: 650;
  opacity: 0.82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-entry-title::before {
  margin: 0 5px;
  content: "\00B7";
  opacity: 0.65;
}

.calendar-project-name {
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.calendar-entry.continues-before {
  margin-left: 0;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.calendar-entry.continues-after {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.calendar-entry.task { border-color: var(--amber); background: var(--amber-soft); color: #774817; }
.calendar-entry.meeting { border-color: var(--blue); background: var(--blue-soft); color: #38516f; }
.calendar-entry.milestone { border-color: var(--purple); background: var(--purple-soft); color: #5f4671; }
.calendar-entry.phase { border-color: #4c6fa8; background: #e3ebf7; color: #324f7b; }


.upcoming-surface {
  position: sticky;
  top: calc(var(--header-height) + 18px);
}

.upcoming-list {
  display: grid;
}

.upcoming-item {
  display: grid;
  width: 100%;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: 140ms ease;
}

.upcoming-item:last-child { border-bottom: 0; }

.upcoming-item:hover {
  padding-right: 7px;
  padding-left: 7px;
  background: var(--project-color-soft, var(--canvas));
}

.upcoming-date {
  display: grid;
  place-items: center;
  border-radius: 9px;
  padding: 5px;
  background: var(--project-color-soft, var(--canvas));
  color: var(--project-color, var(--ink));
  text-align: center;
}

.project-color-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--project-color, var(--green-600));
}

.upcoming-date strong {
  font-size: 1rem;
}

.upcoming-date span {
  color: var(--soft);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.upcoming-copy {
  min-width: 0;
}

.upcoming-copy strong {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-copy span {
  color: var(--soft);
  font-size: 0.66rem;
}

.upcoming-open {
  color: var(--project-color, var(--green-700));
  font-size: 0.9rem;
  font-weight: 850;
  opacity: 0.55;
  transition: 140ms ease;
}

.upcoming-item:hover .upcoming-open {
  opacity: 1;
  transform: translateX(2px);
}

/* Private notes */

.private-note-shell {
  overflow: hidden;
  border: 1px solid #ddd4e4;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.private-note-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e7dfeb;
  padding: 15px 18px;
  background: var(--purple-soft);
  color: #62506c;
}

.lock-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  color: var(--purple);
}

.private-note-banner strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.8rem;
}

.private-note-banner span {
  font-size: 0.7rem;
}

.private-editor {
  min-height: 520px;
  overflow-wrap: anywhere;
  padding: 28px;
  color: #35433f;
  font-size: 0.92rem;
  line-height: 1.72;
}

.private-editor:empty::before {
  color: #a7b0ad;
  content: attr(data-placeholder);
}

.private-note-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 11px 17px;
  background: #fbfcfb;
  color: var(--soft);
  font-size: 0.68rem;
}

/* Dialogs and toast */

dialog {
  width: min(680px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: #fff;
  box-shadow: var(--shadow-lg);
}

dialog::backdrop {
  background: rgb(11 31 28 / 54%);
  backdrop-filter: blur(3px);
}

.dialog-card {
  padding: 23px;
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.dialog-heading h2 {
  margin: 0;
  color: var(--green-950);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.dialog-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.users-dialog {
  width: min(900px, calc(100% - 28px));
}

.users-dialog-card {
  display: grid;
  gap: 22px;
}

.users-dialog-card .dialog-heading {
  margin-bottom: 0;
}

.registration-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--green-50);
}

.registration-control span,
.section-mini-heading {
  display: grid;
  gap: 3px;
}

.registration-control small,
.section-mini-heading span,
.admin-user-identity span {
  color: var(--muted);
  font-size: 0.76rem;
}

.registration-control input {
  width: 20px;
  min-height: 20px;
  accent-color: var(--green-700);
}

.admin-add-user {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.section-mini-heading {
  margin-bottom: 12px;
}

.admin-user-form {
  display: grid;
  grid-template-columns: auto 1.1fr 1.35fr 0.85fr auto;
  align-items: end;
  gap: 10px;
}

.admin-photo-field {
  display: grid;
  grid-template-columns: 46px auto;
  align-items: center;
  gap: 3px 8px;
}

.admin-photo-preview {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
}

.admin-photo-field input,
[data-user-photo-input] {
  display: none;
}

.admin-photo-remove {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.admin-user-form label {
  display: grid;
  gap: 6px;
  color: #44534f;
  font-size: 0.76rem;
  font-weight: 750;
}

.admin-user-list {
  display: grid;
  gap: 8px;
}

.admin-user-row {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) 145px auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.admin-user-row.inactive {
  background: var(--canvas);
  opacity: 0.78;
}

.admin-user-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-user-identity strong,
.admin-user-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-identity small {
  color: var(--muted);
  font-weight: 600;
}

.compact-field select {
  min-height: 36px;
  padding: 7px 9px;
  font-size: 0.8rem;
}

.account-status {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 800;
}

.account-status.active {
  background: var(--green-50);
  color: var(--green-700);
}

.admin-user-actions {
  display: flex;
  gap: 5px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.dialog-close {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  font-size: 1.45rem;
  font-weight: 300;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.project-image-field {
  display: grid;
  gap: 8px;
}

.project-details-import {
  display: grid;
  gap: 8px;
}

.project-details-drop-zone {
  display: flex;
  width: 100%;
  min-height: 92px;
  align-items: center;
  gap: 14px;
  border: 1px dashed #9db8b0;
  border-radius: 12px;
  padding: 15px 17px;
  background: var(--green-50);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.project-details-drop-zone:hover,
.project-details-drop-zone:focus-visible,
.project-details-drop-zone.drag-over {
  border-color: var(--green-600);
  background: var(--green-100);
  box-shadow: 0 0 0 3px rgb(47 111 100 / 10%);
}

.project-details-drop-zone[disabled] {
  cursor: wait;
  opacity: 0.72;
}

.project-details-drop-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  font-size: 1.35rem;
  box-shadow: var(--shadow-sm);
}

.project-details-drop-zone > span:last-child {
  display: grid;
  gap: 4px;
}

.project-details-drop-zone strong {
  color: var(--green-900);
  font-size: 0.84rem;
}

.project-details-drop-zone small {
  font-size: 0.73rem;
  line-height: 1.4;
}

.project-details-import-status {
  min-height: 1em;
  margin: 0;
  color: var(--green-700);
  font-size: 0.72rem;
  font-weight: 700;
}

.project-details-import-status.error { color: var(--red); }

.project-image-label {
  color: #44534f;
  font-size: 0.76rem;
  font-weight: 750;
}

.project-image-label small {
  color: var(--soft);
  font-weight: 600;
}

.project-image-control {
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--canvas);
}

.project-image-preview {
  display: grid;
  width: 104px;
  height: 74px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: 9px;
  background: var(--green-100);
  color: var(--green-800);
  font-weight: 850;
}

.project-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-image-actions { min-width: 0; }

.project-image-actions p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.project-image-actions > div { display: flex; gap: 7px; }
#projectImageInput,
#projectDetailsInput { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.project-inline-image {
  margin-right: 5px;
  vertical-align: middle;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 23px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.dialog-actions .dialog-delete {
  margin-right: auto;
}

.image-dialog {
  width: min(1200px, calc(100% - 30px));
  max-height: calc(100vh - 30px);
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.image-dialog img {
  max-height: calc(100vh - 40px);
  margin: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.image-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  background: rgb(255 255 255 / 90%);
}

.toast-region {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(360px, calc(100% - 40px));
  gap: 8px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #bdd0c8;
  border-radius: 11px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: #3e4e49;
  font-size: 0.78rem;
  animation: toast-in 180ms ease-out;
}

.toast.error {
  border-color: #e1b9b3;
  color: var(--red);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Email Dump */

.email-dump-count {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--project-color-soft, var(--green-100));
  color: var(--project-color, var(--green-800));
  font-size: 0.72rem;
  font-weight: 800;
}

.email-dump-layout,
.email-dump-list {
  display: grid;
  gap: 14px;
}

.email-drop-zone {
  display: flex;
  min-height: 112px;
  align-items: center;
  gap: 15px;
  border: 1.5px dashed color-mix(in srgb, var(--project-color, var(--green-700)) 48%, var(--line));
  border-radius: var(--radius);
  padding: 20px;
  background: color-mix(in srgb, var(--project-color-soft, var(--green-100)) 45%, #fff);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.email-drop-zone:hover,
.email-drop-zone:focus-visible,
.email-drop-zone.drag-over {
  border-color: var(--project-color, var(--green-700));
  background: var(--project-color-soft, var(--green-100));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-color, var(--green-700)) 12%, transparent);
  outline: none;
}

.email-drop-zone.uploading {
  cursor: wait;
  opacity: 0.72;
}

.email-drop-zone > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 4px;
}

.email-drop-zone strong { color: var(--green-950); font-size: 0.9rem; }
.email-drop-zone small { color: var(--muted); font-size: 0.74rem; line-height: 1.45; }

.email-drop-icon,
.email-item-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--project-color, var(--green-800));
  font-weight: 900;
}

.email-drop-icon { width: 48px; height: 48px; font-size: 1.2rem; }
.email-item-mark { width: 40px; height: 40px; }

.visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.email-dump-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.email-item-content { min-width: 0; flex: 1; }

.email-item-heading,
.email-item-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.email-item-heading h3 { margin: 0; color: var(--green-950); font-size: 0.95rem; }
.email-item-heading p { margin: 4px 0 0; color: var(--muted); font-size: 0.72rem; }
.email-item-heading > span { flex: 0 0 auto; color: var(--soft); font-size: 0.68rem; }

.email-item-preview {
  display: -webkit-box;
  margin: 11px 0;
  overflow: hidden;
  color: #52605c;
  font-size: 0.78rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.email-item-footer { align-items: center; }
.email-item-footer small { min-width: 0; overflow: hidden; color: var(--soft); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.email-item-footer > div { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.email-item-footer a { text-decoration: none; }

.email-detail {
  margin-top: 15px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.email-detail.loading,
.email-detail.error { color: var(--muted); font-size: 0.76rem; }
.email-detail.error { color: var(--red); }

.email-detail dl { display: grid; gap: 5px; margin: 0 0 14px; }
.email-detail dl div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; font-size: 0.72rem; }
.email-detail dt { color: var(--soft); font-weight: 800; }
.email-detail dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

.email-screenshot-preview {
  display: block;
  width: min(100%, 900px);
  max-height: 680px;
  margin: 0 auto 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

.email-detail-body {
  max-height: 520px;
  overflow: auto;
  border-radius: 10px;
  padding: 15px;
  background: var(--canvas);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.email-dump-empty > div { display: grid; justify-items: center; }

@media (max-width: 700px) {
  .email-drop-zone { align-items: flex-start; flex-wrap: wrap; }
  .email-drop-zone .button { width: 100%; }
  .email-dump-item { padding: 14px; }
  .email-item-mark { display: none; }
  .email-item-heading,
  .email-item-footer { align-items: flex-start; flex-direction: column; }
  .email-item-footer > div { justify-content: flex-start; }
  .email-item-footer small { max-width: 100%; }
}

/* Responsive */

@media (max-width: 1500px) {
  .meeting-rich-editor { padding-left: 88px; }
  .meeting-line-controls { left: calc(-72px - var(--meeting-line-indent, 0px)); }
}

@media (max-width: 1120px) {
  :root { --sidebar-width: 260px; }
  .header-project-switcher { display: none; }
  .meeting-workspace { grid-template-columns: 1fr; }
  .published-notes { position: static; max-height: none; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-side { grid-template-columns: 1fr; }
  .calendar-layout { grid-template-columns: 1fr; }
  .technical-template-bar { align-items: stretch; flex-direction: column; }
  .technical-template-controls { justify-content: flex-start; }
  .upcoming-surface { position: static; }
  .my-task-workspace { grid-template-columns: minmax(260px, 0.75fr) minmax(350px, 1.25fr); }
  .my-project-task-groups { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .mobile-nav-toggle { display: inline-grid; }
  .app-body { display: block; }
  .sidebar {
    width: min(300px, calc(100vw - 55px));
    box-shadow: var(--shadow-lg);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim {
    position: fixed;
    z-index: 35;
    inset: var(--header-height) 0 0;
    display: block;
    background: rgb(14 34 31 / 40%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .sidebar-scrim.open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 840px) {
  :root { --header-height: 64px; }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100vh; padding: 28px; }
  .mobile-auth-brand { display: flex; margin-bottom: 52px; color: var(--green-900); }
  .auth-card { align-self: start; margin-top: 12vh; }
  .app-header { gap: 12px; padding: 0 13px; }
  .app-brand { min-width: 0; }
  .app-brand .brand-copy small { display: none; }
  .header-actions .sync-status,
  .header-actions > .button { display: none; }
  .user-menu-copy { display: none; }
  .main-content { padding: 20px 15px 55px; }
  .project-hero { align-items: flex-start; }
  .project-hero .button { padding: 8px 10px; }
  .project-kicker { margin-left: 0; }
  .home-welcome { min-height: 250px; align-items: flex-start; flex-direction: column; padding: 29px; }
  .home-welcome .button { margin-top: 24px; }
  .home-deadlines { grid-template-columns: 1fr; }
  .home-deadlines-heading { min-width: 0; grid-template-columns: 35px minmax(0, 1fr) auto; border-right: 0; border-bottom: 1px solid #eadbc7; }
  .home-deadlines-window { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .home-deadlines-calendar { grid-column: 2; }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .task-board { grid-template-columns: repeat(3, 270px); }
  .board-workspace { height: 680px; min-height: 540px; }
  .overview-side { grid-template-columns: 1fr; }
  .calendar-day { min-height: max(84px, calc(48px + (var(--calendar-lanes) * 25px))); padding: 4px; }
  .calendar-entry { padding: 3px 4px; }
  .calendar-entry-title { display: none; }
  .calendar-project-name { font-size: 0.52rem; }
  .admin-user-form { grid-template-columns: 1fr 1fr; }
  .admin-user-form .button { align-self: end; }
  .admin-user-row { grid-template-columns: auto minmax(120px, 1fr) 140px auto; }
  .admin-user-actions { grid-column: 2 / -1; justify-content: flex-end; }
  .my-task-workspace { grid-template-columns: 1fr; }
  .my-fire-group { border-right: 0; border-bottom: 1px solid #e6c7c8; }
  .fire-task-list { max-height: 360px; }
  .my-project-task-groups { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 600px) {
  .brand-copy { display: none; }
  .app-brand { margin-right: auto; }
  .user-menu-button > span:last-child { display: none; }
  .home-welcome h1 { font-size: 2.15rem; }
  .home-deadlines-heading { grid-template-columns: 35px minmax(0, 1fr); }
  .home-deadlines-window { display: none; }
  .home-deadline-card { min-width: min(255px, calc(100vw - 62px)); }
  .content-heading,
  .section-heading { align-items: stretch; flex-direction: column; }
  .project-hero { grid-template-columns: 1fr; }
  .project-edit-button { grid-column: 1; grid-row: 2; justify-self: start; }
  .project-deliverables { grid-column: 1; grid-row: 3; }
  .project-deliverable-list { grid-template-columns: 1fr; }
  .content-actions { justify-content: flex-start; }
  .project-title-row { align-items: flex-start; gap: 14px; }
  .project-title-mark { width: 72px; height: 72px; border-radius: 16px; }
  .project-hero h1 { font-size: 1.65rem; }
  .project-tabs { margin-right: -15px; margin-left: -15px; padding-left: 8px; }
  .meeting-meta-grid,
  .form-grid { grid-template-columns: 1fr; }
  .project-image-control { align-items: stretch; flex-direction: column; }
  .project-image-preview { width: 100%; height: 120px; }
  .my-note-card { grid-template-columns: 1fr; gap: 0; }
  .my-note-open { grid-template-columns: 82px minmax(0, 1fr); }
  .my-note-actions { justify-content: flex-end; border-top: 1px solid var(--line); padding: 9px 12px; }
  .span-two { grid-column: auto; }
  .editor-section,
  .meeting-meta-grid { padding: 14px; }
  .discussion-key { display: none; }
  .compose-actions { align-items: stretch; flex-direction: column; }
  .compose-actions-left,
  .compose-actions-right { display: grid; grid-template-columns: 1fr 1fr; }
  .quick-add-task { width: 100%; }
  .task-group-header { display: flex; align-items: stretch; flex-direction: column; }
  .task-group-open-count { align-self: flex-start; }
  .task-group-header-actions { width: 100%; }
  .technical-template-controls { align-items: stretch; flex-direction: column; }
  .technical-template-controls select { width: 100%; }
  .template-count { align-self: flex-start; }
  .board-page-heading .button { width: 100%; }
  .board-workspace { height: 620px; min-height: 520px; border-radius: 14px; }
  .board-toolbar { top: 12px; left: 12px; }
  .board-pan-hint { display: none; }
  .calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .calendar-day { min-height: max(60px, calc(48px + (var(--calendar-lanes) * 25px))); }
  .project-facts { grid-template-columns: 1fr 1fr; }
  .project-assistant-form { grid-template-columns: 1fr; }
  .project-assistant-form .button { min-height: 42px; }
  .project-assistant-header { align-items: flex-start; }
  .private-editor { min-height: 390px; padding: 18px; }
  .dialog-card { padding: 18px; }
  .admin-user-form { grid-template-columns: 1fr; }
  .admin-user-row { grid-template-columns: auto 1fr auto; }
  .admin-user-row .compact-field,
  .admin-user-actions { grid-column: 2 / -1; }
  .account-status { grid-column: 3; grid-row: 1; }
  .my-project-task-groups { grid-template-columns: 1fr; padding: 9px; }
}

@media print {
  .app-header,
  .sidebar,
  .project-tabs,
  .content-actions,
  .button,
  .editor-toolbar,
  .meeting-line-controls,
  .compose-actions {
    display: none !important;
  }
  .app-body { display: block; padding: 0; }
  .main-content { padding: 0; }
  .surface,
  .task-group,
  .board-section { box-shadow: none; break-inside: avoid; }
  .board-workspace { height: auto; min-height: 0; overflow: visible; border: 0; background: #fff; box-shadow: none; }
  .board-toolbar,
  .board-pan-hint { display: none; }
  .board-canvas { position: static; width: 100%; min-width: 0; min-height: 0; padding: 0; transform: none !important; }
  .info-board { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
}