/* Canonical chrome shared by every portal route. */
.app-shell .portal-header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 68px !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--pk-line, #d8ddd5) !important;
  background: #fffefa !important;
}
.app-shell .portal-header .brand {
  grid-column: 1 !important;
  justify-self: start !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #075d39 !important;
  font: 700 22px/1 Georgia, "Times New Roman", serif !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.app-shell .portal-header .brand span { color: inherit !important; }
.app-shell .portal-header .header-actions {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-self: end !important;
  gap: 8px !important;
}
.app-shell .portal-header .language-trigger {
  min-width: 76px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 9px !important;
  border: 1px solid var(--pk-line, #d8ddd5) !important;
  border-radius: 14px !important;
  background: #fffefa !important;
}
.app-shell .portal-header .avatar {
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  background: #dfeadf !important;
  color: #075d39 !important;
}
.app-shell .portal-header .avatar:disabled { opacity: 1 !important; cursor: default !important; }

.app-shell nav {
  position: fixed !important;
  z-index: 30 !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  width: min(calc(100% - 32px), 430px) !important;
  height: 76px !important;
  min-height: 76px !important;
  padding: 7px 10px !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: rgba(255,255,253,.98) !important;
  box-shadow: 0 7px 18px rgba(9,27,16,.16) !important;
}
.app-shell nav a {
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  min-height: 60px !important;
  padding: 4px 2px !important;
  color: #9a9d9a !important;
  font: 400 14px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  white-space: nowrap !important;
}
.app-shell nav a.on { color: #075d39 !important; font-weight: 600 !important; }
.app-shell nav a::after { display: none !important; }
.app-shell nav .nav-icon { width: 28px !important; height: 28px !important; }

.app-shell.login { display: block !important; min-height: 100vh !important; padding: 0 20px calc(108px + env(safe-area-inset-bottom)) !important; background: #fffefa !important; }
.app-shell.login .login-brand { display: none !important; }
.app-shell.login .login-card { max-width: 390px; margin: 48px auto 0; }

/* Task actions remain compact: two equal, flexible controls per row. */
.task-shell .task-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 14px 0 0 !important;
}
.task-shell .task-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 8px 7px !important;
  font-size: clamp(12px, 3.45vw, 14px) !important;
  line-height: 1.14 !important;
  white-space: nowrap !important;
}
.task-shell .task-actions .task-action-assign {
  white-space: normal !important;
  overflow-wrap: normal !important;
}
.completion-comment-hint {
  display: block;
  margin-top: 6px;
  color: var(--pk-muted, #5c685e);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.task-shell .task-history {
  display: grid !important;
  gap: 9px !important;
  margin: 16px 0 0 !important;
  padding: 14px !important;
  border: 1px solid var(--pk-line, #d8ddd5) !important;
  border-radius: 16px !important;
  background: #f8faf6 !important;
  box-shadow: none !important;
}
.task-shell .task-history h2 { margin: 0 !important; }
.task-shell .task-history-event {
  margin: 0 !important;
  color: var(--pk-muted, #5c685e) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.task-shell .task-history-comment {
  display: grid !important;
  gap: 5px !important;
  padding: 10px !important;
  border: 1px solid #c6d7c8 !important;
  border-radius: 12px !important;
  background: #fffefa !important;
}
.task-shell .task-history-comment p { margin: 0 !important; }
.task-shell .task-history-comment small { color: var(--pk-muted, #5c685e) !important; font-size: 11px !important; }

/* Branded source marks for work and website requests. */
.task-card .task-source {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #71809a !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}
.task-card .task-source-icon {
  display: grid !important;
  flex: 0 0 26px !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  box-sizing: border-box !important;
  border: 1px solid #bed7c4 !important;
  border-radius: 9px !important;
  background: #edf6ee !important;
  color: #17623f !important;
}
.task-card .task-source-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Completed tasks: compact, centered introduction and fluid card typography. */
.completed-page {
  padding-bottom: 8px !important;
}
.completed-page .completed-heading {
  display: grid !important;
  justify-items: center !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 24px var(--pk-page, 20px) 16px !important;
  text-align: center !important;
}
.completed-page .completed-heading h1 {
  margin: 0 !important;
  color: var(--pk-ink, #172019) !important;
  font-size: clamp(31px, 8.6vw, 43px) !important;
  line-height: .98 !important;
}
.completed-page .completed-heading p {
  max-width: 335px !important;
  margin: 0 !important;
  color: var(--pk-muted, #5c685e) !important;
  font-size: clamp(15px, 4.1vw, 18px) !important;
  line-height: 1.28 !important;
}
.completed-page .completed-summary {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 20px 13px !important;
  color: var(--pk-muted, #5c685e) !important;
  font-size: clamp(13px, 3.6vw, 16px) !important;
  line-height: 1.2 !important;
}
.completed-page .completed-summary span,
.completed-page .completed-summary b,
.completed-page .completed-summary i {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
  font: inherit !important;
}
.completed-page .completed-summary b {
  color: var(--pk-green, #1f5a3a) !important;
  font-weight: 800 !important;
}
.completed-page .completed-list {
  gap: 9px !important;
  padding: 0 var(--pk-page, 20px) !important;
}
.completed-page .completed-list .task-card {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  padding: 13px 14px !important;
}
.completed-page .completed-list .task-card-body {
  gap: 5px !important;
  padding-right: clamp(78px, 21vw, 96px) !important;
}
.completed-page .completed-list .task-source {
  font-size: clamp(10px, 2.9vw, 12px) !important;
}
.completed-page .completed-list .task-card-title {
  font-size: clamp(16px, 4.35vw, 19px) !important;
  line-height: 1.15 !important;
}
.completed-page .completed-list .task-card-meta {
  font-size: clamp(11px, 3vw, 13px) !important;
  line-height: 1.25 !important;
}
.completed-page .completed-list .task-card > .status {
  position: absolute !important;
  top: 13px !important;
  right: 14px !important;
  width: auto !important;
  max-width: none !important;
  padding: 7px 9px !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
@media (max-width: 340px) {
  .task-shell .task-actions { gap: 6px !important; }
  .task-shell .task-actions button { padding-inline: 4px !important; font-size: 11px !important; }
}
@media (max-width: 374px) {
  .app-shell .portal-header { padding-inline: 14px !important; }
  .app-shell .portal-header .brand { font-size: 20px !important; }
  .app-shell .portal-header .language-trigger { min-width: 64px !important; padding-inline: 6px !important; }
  .app-shell .portal-header .avatar { width: 44px !important; height: 44px !important; min-height: 44px !important; }
}