:root {
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --border-2: #d1d5db;
  --card: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --pad: 18px;
  --pad-sm: 12px;
  --max: 1040px;
  --scrollbar-size: 6px;
  --history-scrollbar-size: 1px;
  --scrollbar-thumb-color: rgba(15, 23, 42, 0.22);
  --color-key-step: #d4a017;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }
html, body { height: 100%; }

html { scrollbar-gutter: stable; }

@supports not (scrollbar-gutter: stable) {
  body { overflow-y: scroll; }
}

/* Ensure the HTML `hidden` attribute always wins.
   Some components set explicit display rules that would otherwise override the
   browser default for `[hidden]`. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}

/* Global scrollbar style: thin thumb, hidden at rest, shown only while scrolling. */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*::-webkit-scrollbar {
  width: var(--scrollbar-size) !important;
  height: var(--scrollbar-size) !important;
}
*::-webkit-scrollbar-track {
  background: transparent !important;
}
*::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px !important;
  border: 0 !important;
}
.is-scrolling {
  scrollbar-color: var(--scrollbar-thumb-color) transparent !important;
}
.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color) !important;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 18px 38px;
}

.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.brand {
  display: grid;
  gap: 2px;
}

.brand-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.brand-subtitle {
  color: var(--muted);
  font-size: 13px;
}

.lang {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.lang a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
}

.lang a:hover {
  border-color: var(--border-2);
  text-decoration: none;
}

.lang a.active {
  color: var(--text);
  border-color: var(--border-2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-inner {
  padding: var(--pad);
}

.card-inner.compact {
  padding: var(--pad-sm);
}

.section-title {
  font-size: 14px;
  font-weight: 650;
  margin: 0 0 10px;
}

.kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 3px 12px;
  font-size: 13px;
  align-items: baseline;
}

.kv .k { color: var(--muted); }
.kv .v { color: var(--text); }
.kv--inline {
  grid-template-columns: 120px 1fr;
}

.hr {
  height: 1px;
 /* background: var(--border);*/
  margin: 14px 0;
}

/* Filters */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* базовые контролы */
.input, .select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  outline: none;
  min-height: 40px;            /* важно для выравнивания высоты */
}

.input:focus, .select:focus {
  border-color: var(--border-2);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}

/* размеры/поведение элементов фильтра */
#q {
  flex: 1 1 420px;            /* растягивается и занимает максимум места */
  min-width: 260px;
}

#status {
  flex: 0 0 180px;
}

.input-date {
  flex: 0 0 160px;
}

/* РєРЅРѕРїРєР° */
.button {
  flex: 0 0 120px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  min-height: 40px;
}

.button:hover {
  border-color: var(--border-2);
}

.button:active {
  transform: translateY(0.5px);
}

/* Calm outlined action button (secondary emphasis) */
.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(47, 111, 237, 0.25);
  background: rgba(47, 111, 237, 0.08);
  color: #2f6fed;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn-secondary-outline:hover {
  background: rgba(47, 111, 237, 0.12);
  border-color: rgba(47, 111, 237, 0.25);
}

.btn-secondary-outline:active {
  background: rgba(47, 111, 237, 0.16);
  border-color: rgba(47, 111, 237, 0.25);
  transform: translateY(0.5px);
}

.period-control {
  position: relative;
  flex: 0 0 auto;
  min-width: 170px;
}

.period-btn {
  width: 100%;
  min-width: 170px;
  height: 40px;
  padding: 0 12px;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  color: #1f2937;
}

.period-btn:hover {
  border-color: var(--border-2);
}

.period-caret {
  font-size: 12px;
  opacity: 0.65;
}

.period-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  width: 300px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

.period-popover[hidden] {
  display: none !important;
}

.period-preset {
  width: 100%;
  border: 0;
  background: transparent;
  color: #334155;
  text-align: left;
  font-size: 13px;
  line-height: 1.2;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.period-preset:hover {
  background: rgba(15, 23, 42, 0.06);
}

.period-divider {
  height: 1px;
  margin: 6px 4px 8px;
  background: rgba(15, 23, 42, 0.10);
}

.period-custom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.period-custom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.period-custom-input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  font-size: 13px;
  padding: 8px 10px;
  padding-right: 30px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
}

.period-apply {
  width: auto;
  align-self: flex-start;
  margin-top: 0;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
  box-shadow: none;
}

.period-apply:hover {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.36);
}

.period-apply:active {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.40);
}

/* Критично для date в Chrome/Safari: убираем нативный "виджетный" стиль */
.input-date {
  -webkit-appearance: none;
  appearance: none;
}

.input-date::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  cursor: pointer;
}

/* Table */
.table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: #fff;
  table-layout: fixed;
}

thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
  padding: 12px 12px;
}

tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: top;
}

.table-wrap.is-loading {
  opacity: 0.6;
  transition: opacity 120ms ease;
}

/* Make Updated header align with right-aligned values */
th.updated-col,
td.updated-col {
  padding-right: 16px; /* можно 14px/12px, главное одинаково */
}

td.updated-col {
  font-variant-numeric: tabular-nums;
}

/* Keep secondary columns compact so the Item column gets space */
th.col-compact,
td.col-compact {
  padding-left: 10px;
  padding-right: 10px;
}

/* Ensure Updated column keeps a calm right gutter (wins over .col-compact) */
th.col-compact.updated-col,
td.col-compact.updated-col {
  padding-right: 12px; /* или 14px если хочешь чуть “спокойнее” */
}

tbody tr:hover td {
  background: #fcfcfd;
}

.cell-title {
  display: grid;
  gap: 3px;
}

.cell-title .t {
  font-weight: 650;
  letter-spacing: 0.15px;
}

.cell-title .s {
  color: var(--muted);
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  background: #fff;
  white-space: nowrap;
}

.badge.muted {
  color: var(--muted);
}

.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
}

/* Item page */
.item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}

.item-grid > * {
  min-width: 0;
}

@media (max-width: 860px) {
  .filters {
    grid-template-columns: 1fr;
  }
  table { min-width: 560px; }
  .item-grid {
    grid-template-columns: 1fr;
  }
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link:hover {
  text-decoration-thickness: 2px;
}

.empty {
  padding: 16px 14px;
  color: var(--muted);
  font-size: 13px;
}

.steps {
  display: grid;
  gap: 10px;
  padding-bottom: 0;
}

.step {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  background: #f4f4f4;
  position: relative;
  max-width: 100%;
}

#internalItemPage .steps .step,
#publicItemPage .steps .step {
  border-color: rgba(0, 0, 0, 0.055);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
  padding-top: 6px;
  padding-bottom: 6px;
}

.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.step--internal .step-head {
  padding-right: 30px;
}

.step-head__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}

.step-delegated-badge {
  font-size: 10px;
  padding: 1px 6px;
  line-height: 1.1;
  flex: 0 0 auto;
}

.step-delegated-badge.is-hidden {
  display: none;
}

.step-menu {
  position: absolute;
  top: 6px;
  right: 6px;
}

.step-menu__btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: transparent;
  color: transparent;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.step-menu__btn::before {
  content: "";
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  background: #94a3b8;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: -5px 0 0 #94a3b8, 5px 0 0 #94a3b8;
}

.step-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: transparent;
  color: transparent;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.step-delete::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: #94a3b8;
  border-radius: 999px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.step-delete:hover {
  background: rgba(15, 23, 42, 0.03);
}

.step-menu__list {
  position: absolute;
  right: 0;
  top: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  padding: 6px;
  min-width: 120px;
  z-index: 2;
}

.step-menu__item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 12px;
  color: #ef4444;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.step-menu__item:hover {
  background: rgba(239, 68, 68, 0.08);
}

.step-field {
  background: #f4f4f4;
  border: none;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
  box-shadow: inset 0 0 0 1px #f4f4f4;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.step-field:hover {
  background: #ffffff;
}

.step-field:focus {
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}

.step-field--label {
  width: min(338px, 100%);
  max-width: 100%;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}

.step-title .step-field--label {
  flex: 1 1 auto;
  min-width: 0;
}

.step-field--label:focus {
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
  outline: none;
}

.step-field--assignee {
  width: 150px;
  max-width: 100%;
}

.step-field--role {
  width: 150px;
  max-width: 100%;
}

.step-field--state {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.82);
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.16);
    border-radius: 999px;
    position: static;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding: 2px 8px;
    text-transform: uppercase;
    width: auto;
    max-width: none;
    min-width: 0;
    field-sizing: content;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}

.step-field--state:hover,
.step-field--state:focus {
  background: #fff;
}

.step-field--state.state-ACTIVE {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.14);
  color: rgba(30, 64, 175, 0.92);
}

.step-field--state.state-NOT_STARTED {
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.16);
  color: rgba(30, 41, 59, 0.82);
}

.step-field--state.state-WAITING {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.16);
  color: rgba(146, 64, 14, 0.92);
}

.step-field--state.state-BLOCKED {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.16);
  color: rgba(153, 27, 27, 0.9);
}

.step-field--state.state-DONE,
.step-field--state.state-COMPLETED {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.16);
  color: rgba(6, 95, 70, 0.92);
}

.step-toggle {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: none;
}

.step-toggle:hover {
  background: rgba(15, 23, 42, 0.03);
}

.step-toggle:focus {
  outline: none;
  box-shadow: none;
}

.step-toggle:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.22);
  outline-offset: 2px;
  box-shadow: none;
}

.steps.is-compact .step-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.steps.is-compact .step.is-open .step-toggle {
  transform: rotate(90deg);
}

.step-handle {
  position: absolute;
  right: 6px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  color: var(--muted);
  line-height: 1;
  cursor: grab;
  user-select: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.step:hover .step-handle {
  opacity: 0.6;
}

.step-handle:hover,
.step-handle:focus-visible {
  opacity: 1;
}

.step-handle__icon {
  width: 12px;
  height: 24px;
  display: block;
}

.step-edit-actions {
  position: absolute;
  right: 48px;
  bottom: 6px;
  display: none;
  align-items: center;
  gap: 6px;
}

.step--dirty .step-edit-actions {
  display: flex;
}

.step-edit-btn {
  border: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--muted);
}

.step-edit-btn--cancel {
  color: #ef4444;
}

.step-edit-btn--save {
  color: #22c55e;
}

.step-add {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: transparent;
  cursor: pointer;
  color: transparent;
}

.step-add::before,
.step-add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #94a3b8;
  border-radius: 999px;
}

.step-add::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.step-add::after {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.step-add--empty {
  position: relative;
  right: auto;
  bottom: auto;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  color: transparent;
  font-size: 0;
}

.step-meta {
  margin-left: auto;
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
}

.step-handle:active {
  cursor: grabbing;
}

.step.is-dragging {
  opacity: 0.6;
}

.step--placeholder {
  border: 1px dashed #b7d8f2;
  background: #f2f8fd;
}

.step--placeholder .step-placeholder {
  height: 28px;
}

.steps__error {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}
.step-title {
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 0%;
  max-width: 100%;
  overflow: hidden;
}

.step-title .step-index {
  flex: 0 0 auto;
}

#internalItemPage .step-title .step-index {
  font-size: 13px;
  line-height: 1.3;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 500;
}

.step-title .step-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}

.step-head .step-meta {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Public item: keep titles from stretching cards */
.public-view .step {
  overflow: hidden;
}

.public-view .step-head {
  overflow: hidden;
}

.public-view .steps.is-compact .step-head[role="button"] {
  cursor: pointer;
}

.public-view .steps.is-compact .step {
  cursor: pointer;
}

.public-view .steps.is-compact .step:hover {
  background: rgba(15, 23, 42, 0.03);
}

.public-view .step-title {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.public-view .step-title .step-index {
  color: rgba(15, 23, 42, 0.55);
  font-weight: 500;
}

.public-view .kv {
  grid-template-columns: 120px minmax(0, 1fr);
}

.public-view .kv .v {
  min-width: 0;
}

.public-view .step-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.public-view .step-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.step-meta {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  text-transform: uppercase;
}

.step-state-badge {
  margin-left: 0;
  font-size: 11px;
  padding: 2px 7px;
  border-color: rgba(15, 23, 42, 0.12);
  text-transform: uppercase;
}

.steps.is-compact .step {
  padding: 8px 10px;
}


.steps.is-compact .step-head {
  min-height: 24px;
  overflow: hidden;
}

.steps.is-compact .step-title {
  min-width: 0;
  overflow: hidden;
}

.steps.is-compact .step-title .step-label,
.steps.is-compact .step-field--label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.steps.is-compact .step:not(.is-open) .step-field--label {
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.steps.is-compact .step-body {
  display: none;
}

.steps.is-compact .step.is-open .step-body {
  display: grid;
}

.steps.is-compact .step:not(.is-open) .step-edit-actions,
.steps.is-compact .step:not(.is-open) .step-add,
.steps.is-compact .step:not(.is-open) .step-delete,
.steps.is-compact .step:not(.is-open) .step-handle {
  display: none;
}

.steps.is-compact .step:not(.is-open) .step-field--state {
  pointer-events: none;
}

.steps.is-compact .step:not(.is-open) .step-head {
  padding-right: 0;
}

.steps.is-compact .step:not(.is-open) .step-delete {
  display: none;
}

/* Keep reorder stable: collapsed rows hide drag handle; reorder stays available for expanded rows. */
.steps.is-compact .step.is-open .step-handle {
  display: flex;
  opacity: 0.6;
}

.steps.is-comfortable .step-toggle {
  display: none;
}

.step-body {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  font-size: 13px;
}

.step-body__left {
  display: grid;
  gap: 8px;
}

.step-waiting {
  display: none;
  gap: 8px;
  align-content: start;
}

.step--waiting .step-waiting {
  display: grid;
}

.step-waiting__row {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.step-waiting__row .step-field--waiting {
  width: auto;
  max-width: 220px;
  padding: 2px 6px;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 13px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

.step-waiting__row .step-field--waiting:hover,
.step-waiting__row .step-field--waiting:focus {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
  outline: none;
}

.step-waiting__note-btn {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  margin-left: -26px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.step-waiting__note-btn:hover {
  background: rgba(15, 23, 42, 0.04);
}

.step-field--waiting,
.step-field--waiting-custom {
  width: 100%;
  font-size: 12px;
}

.step-waiting .step-field--waiting-custom {
  width: 150px;
  margin-left: 132px;
}

.step-field--waiting-note {
  width: 100%;
  min-height: 66px;
  resize: vertical;
  font-size: 12px;
  display: none !important;
}

.step-insert {
  margin-top: 8px;
}

.step-insert__toggle {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.step-insert__toggle::-webkit-details-marker {
  display: none;
}

.step-insert[open] .step-insert__toggle {
  color: #374151;
}

.step-insert__form {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.step-insert__row {
  display: grid;
  gap: 8px;
  grid-template-columns: 140px 1fr;
}

.step-insert__input,
.step-insert__select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  font-size: 12px;
}

.step-insert__actions {
  display: flex;
  gap: 8px;
}

.log {
  display: grid;
  gap: 8px;
  align-content: start;
  grid-auto-rows: max-content;
}

.log-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px 10px 18px;
  background: #f4f4f4;
  position: relative;
}

.log-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: rgba(100, 116, 139, 0.26);
}

.log-item.status-IN_PROGRESS::before,
.log-item.status-IN_REVIEW::before,
.log-item.status-REVIEW::before,
.log-item.state-ACTIVE::before {
  background: rgba(59, 130, 246, 0.42);
}

.log-item.status-WAITING::before,
.log-item.status-ON_HOLD::before,
.log-item.state-WAITING::before {
  background: rgba(245, 158, 11, 0.44);
}

.log-item.state-NOT_STARTED::before {
  background: rgba(100, 116, 139, 0.30);
}

.log-item.status-DONE::before,
.log-item.status-COMPLETED::before,
.log-item.status-FINALIZED::before,
.log-item.status-APPROVED::before,
.log-item.state-DONE::before,
.log-item.state-COMPLETED::before {
  background: rgba(16, 185, 129, 0.44);
}

.log-item.state-BLOCKED::before {
  background: rgba(239, 68, 68, 0.40);
}

.log-item .when {
  color: rgba(100, 116, 139, 0.82);
  font-size: 11px;
  margin-bottom: 4px;
}

.log-item .what {
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.activity-primary {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
}

.activity-secondary {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 600;
  color: #2b3a52;
}

.activity-meta-line {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 400;
  color: rgba(100, 116, 139, 0.74);
}

.activity-meta-actor {
  font-weight: 500;
  color: rgba(71, 85, 105, 0.88);
}

.activity-meta-sep {
  color: rgba(100, 116, 139, 0.7);
}

.activity-actor {
  font-weight: 600;
}

.activity-actor--system {
  font-weight: 500;
  color: #64748b;
}

.activity-event-type {
  font-weight: 600;
}

.activity-group-items {
  margin: 2px 0 0;
  padding-left: 22px;
  list-style: none;
  display: grid;
  gap: 0;
}

.activity-group-items li {
  margin: 0;
  line-height: 1.3;
}

/* Item history panel: stable observer panel on desktop, normal flow on mobile */
:root {
  --item-history-sticky-top: 16px;
  --item-history-bottom-gap: 16px;
}

.item-history-panel__log {
  min-width: 0;
}

@media (min-width: 1024px) {
  .item-grid > .card:last-child.item-history-panel {
    position: sticky;
    top: var(--item-history-sticky-top);
    align-self: start;
  }

  .item-grid > .card:last-child .item-history-panel__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .item-grid > .card:last-child .item-history-panel__log {
    overflow-y: auto;
    max-height: calc(100vh - var(--item-history-sticky-top) - var(--item-history-bottom-gap));
    min-height: 120px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .item-grid > .card:last-child .item-history-panel__log::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }
  .item-grid > .card:last-child .item-history-panel__log::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .item-grid > .card:last-child .item-history-panel__log::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 999px !important;
    border: 0 !important;
  }
  .item-grid > .card:last-child .item-history-panel__log.is-scrolling {
    scrollbar-color: var(--scrollbar-thumb-color) transparent;
  }
  .item-grid > .card:last-child .item-history-panel__log.is-scrolling::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color) !important;
  }

  /* Use native overlay scrollbar when supported (does not affect layout). */
  @supports (overflow: overlay) {
    .item-grid > .card:last-child .item-history-panel__log {
      overflow-y: overlay;
    }
  }
}

@media (max-width: 1023px) {
  .item-history-panel {
    position: static;
  }

  .item-history-panel__log {
    overflow: visible;
    max-height: none;
    scrollbar-gutter: auto;
  }
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.top-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.public-time-chart {
  margin-top: 14px;
}

.public-time-chart__controls {
  margin-left: auto;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
}

.public-time-chart__sort-form {
  margin: 0;
}

.back {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
}

.back:hover {
  border-color: var(--border-2);
  text-decoration: none;
}

.footer-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

/* Subtle separators for key-value blocks */
.kv-block {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
}

/* Tiny utilities */
.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }

/* Board table column sizing */
.col-item { width: 52%; }
.col-status { width: 16%; }
.col-owner { width: 18%; }   /* +4% под длинные имена */
.col-updated { width: 14%; } /* -4% чтобы убрать “пустоту справа” */


/* Item titles should not force the table wider; truncate gracefully */
td.item-cell .t {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Filters: single-row, compact, no overflow ---- */

/* 1) The row itself */
.filters{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;        /* ключевое: одна строка на десктопе */
  margin-top:12px;
}

/* 2) Override global width:100% for controls inside filters */
.filters .input,
.filters .select{
  width:auto;              /* иначе width:100% ломает flex-строку */
  flex:0 0 auto;
}

/* 3) Search grows, others are compact */
.filters #q{
  flex:1 1 420px;
  min-width:260px;
}

/* 4) Status: “content-like” width with safe bounds */
.filters #status{
  flex:0 0 auto;
  width:max-content;       /* где поддерживается — будет ближе к “по тексту” */
  min-width:118px;         /* чтобы All statuses не было слишком узким */
  max-width:240px;         /* чтобы длинные enum’ы не раздували строку */
}

/* 5) Dates: compact fixed width */
.filters .input-date{
  flex:0 0 auto;
  width:100px;             /* компактнее, чем 160 */
  min-width:120px;
  padding-right:8px;      /* место под calendar icon */
}

/* 6) Apply: auto width (по контенту), без фиксированного 120px */
.filters .button{
  flex:0 0 auto;
  width:auto;
  padding:10px 10px;
  white-space:nowrap;
}

/* 7) If the viewport is narrow — allow wrapping cleanly */
@media (max-width: 920px){
  .filters{
    flex-wrap:wrap;
  }
  .filters #q{
    flex:1 1 100%;
    min-width:0;
  }
}

/* ---------- Date inputs normalization ---------- */

.input-date{
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;

  height: 40px;
  padding: 10px 12px;
  padding-right: 36px;

  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;

  color: #111827;
}

/* Placeholder-like color when empty (Chrome, Edge) */
.input-date:invalid{
  color: #9ca3af;
}

/* Hover / focus – same behavior as other inputs */
.input-date:hover{
  border-color:#d1d5db;
}

.input-date:focus{
  border-color:#cfd6e3;
  outline:none;
  box-shadow:0 0 0 3px rgba(203,213,225,0.4);
}

/* ---------- Calendar icon tuning ---------- */

/* Chrome / Edge / Safari */
.input-date::-webkit-calendar-picker-indicator{
  opacity: 0.45;
  cursor: pointer;
}

.input-date::-webkit-calendar-picker-indicator:hover{
  opacity: 0.7;
}

/* Remove inner extra spacing in Safari */
.input-date::-webkit-datetime-edit{
  padding: 0;
}


/* Owner dropdown (board filter) */
.owner-select{
  position:relative;
  min-width: 180px;
  flex: 0 0 180px;
}
.owner-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  cursor:pointer;
}
.owner-btn .caret{
  opacity:0.7;
  font-size:12px;
}
.owner-dropdown{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  right:0;
  z-index: 20;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  padding: 10px;
}
.owner-search{
  width:100%;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.owner-search:focus{
  border-color: var(--focus, #cbd5e1);
}
.owner-options{
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right: 2px;
}
.owner-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-option:hover{
  background: rgba(15,23,42,.04);
}
.owner-empty{
  padding: 10px 10px;
  opacity: .65;
  font-size: 13px;
}
/* =======================================================================
   LunaDocu – Owner dropdown + long text hardening (refactor-safe overrides)
   Put at the very end so it wins over older/duplicate rules.
   ======================================================================= */

/* Keep the filter row spacing consistent even when owner label changes */
.filters {
  gap: 12px; /* single source of truth for spacing between filter controls */
}

/* --- Owner select: layout + truncation --- */
.owner-select {
  position: relative;
  flex: 0 0 200px;        /* fixed slot so the gap to Status is always stable */
  min-width: 180px;
  max-width: 260px;       /* enough for most names; long ones will ellipsize */
}

.owner-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#ownerBtnLabel {
  flex: 1 1 auto;
  min-width: 0;                 /* allow ellipsis in flex item */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Owner dropdown: solid background + sane stacking --- */
.owner-dropdown {
  width: 230px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;             /* non-transparent */
  opacity: 1;                   /* explicitly solid */
  z-index: 1000;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  overflow: hidden;             /* clip option hover backgrounds */
}

.owner-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Make options readable, non-overlapping, and resilient to long names */
.owner-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
}

/* Reset button-ish quirks that can cause weird lines/overlaps on some platforms */
.owner-option {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  text-decoration: none;
  font: inherit;
  color: inherit;

  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: 10px 12px;
  border-radius: 10px;

  cursor: pointer;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.2;
}

.owner-option:hover {
  background: rgba(0,0,0,0.05);
}

.owner-option.is-selected,
.owner-option[aria-selected="true"] {
  background: rgba(0,0,0,0.07);
}

/* --- Table “pill/badge” overflow protection (long owner names) --- */
.badge,
.pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Allow ellipsis to actually work inside table cells */
table th,
table td {
  min-width: 0;
}



/* Ensure long owner names don't overflow table cells */
.board-table td { overflow: hidden; }
.board-table td .pill,
.board-table td .badge,
.board-table td .chip,
.board-table td .tag {
  max-width: 100%;
}

/* === Public board filters: final layout + owner dropdown (override duplicates above) === */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Kill legacy margins that create uneven spacing */
.filters > * {
  margin: 0 !important;
}

/* Search grows/shrinks with owner width; other controls keep their natural size */
.filters .search,
.filters .q-input,
.filters input[name="q"],
.filters #q {
  flex: 1 1 320px;
  min-width: 240px;
}

.filters .owner-select {
  flex: 0 1 auto;           /* do NOT grow (prevents big gap before status) */
  width: fit-content;
  min-width: 170px;
  max-width: 240px;
  position: relative;
  font-size: 13px;          /* normalize option text size */
}

.filters .owner-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.filters .owner-btn #ownerBtnLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filters .owner-dropdown {
  font-size: 13px;          /* keep dropdown text same as rest of UI */
  background: #fff;         /* explicit opaque background */
}

.filters .owner-option {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filters .owner-search {
  font-size: 13px;
}

/* Owner pill in the table should never spill out */
.board-table td.owner,
.board-table td:nth-child(3) {
  min-width: 0;
}

.board-table td .pill.owner,
.board-table td .pill[data-kind="owner"] {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}


/* Owner dropdown: keep long names tidy (ellipsis) */
.owner-option{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-btn{
  max-width: 100%;
}
#ownerBtnLabel{
  display: inline-block;
  max-width: calc(100% - 18px); /* leave room for caret */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- Board: Owner column ellipsis + tooltip (SAFE) --- */
/* Owner is 3rd column in board table: Item | Status | Owner | Updated */
.table-wrap table td:nth-child(3) { min-width: 0; }

/* Make owner badge truncate with ellipsis inside its cell */
.table-wrap table td:nth-child(3) .badge.owner-badge {
  display: inline-block;          /* enables text-overflow */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- Tooltip (custom, Apple-calm) --- */

.tooltip, .ld-tooltip{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 120ms ease, transform 120ms ease;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  max-width: min(460px, calc(100vw - 24px));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  box-shadow: 0 14px 40px rgba(17, 24, 39, 0.18), 0 4px 12px rgba(17, 24, 39, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.tooltip.is-visible, .ld-tooltip.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
..tooltip::after, .ld-tooltip::after{
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   background: rgba(17, 24, 39, 0.92);

   /* меняем сторону обводки */
   border-left: 1px solid rgba(255, 255, 255, 0.10);
   border-top: 1px solid rgba(255, 255, 255, 0.10);

   transform: rotate(45deg);
   left: 18px;
   bottom: -6px;   /* ← КЛЮЧЕВОЕ ИЗМЕНЕНИЕ */
 }

/* --- Tooltip: disable help cursor --- */
.has-tooltip {
  cursor: default;
}

/* --- Owner column: ellipsis --- */
td.owner-col{ min-width: 0; }
td.owner-col .owner-pill{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- Tooltip: dynamic arrow positioning (safe override) --- */
.ld-tooltip{ --ld-arrow-x: 18px; }
.ld-tooltip::after{ left: var(--ld-arrow-x, 18px); }
.ld-tooltip.dir-down::after{
  top: -5px;
  transform: rotate(225deg);
}

/* --- Board: Owner column ellipsis (robust) --- */
/*
  Owner values are rendered as `.badge muted` inside the 3rd column.
  For `text-overflow: ellipsis` to work we need:
  - a constrained width (max-width: 100% of the cell)
  - overflow hidden + nowrap
  - the table to honor col widths (table-layout: fixed)
*/
.table-wrap table{
  table-layout: fixed;
}

/* 3rd column = Owner */
.table-wrap table td:nth-child(3){
  overflow: hidden;          /* keep badge inside the column */
}

.table-wrap table td:nth-child(3) .badge{
  display: inline-block; /* override inline-flex for reliable ellipsis */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Status badges (calm) - works with existing HTML (.badge + status-XXX) --- */
.badge[class*="status-"]{
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.03);
  color: rgba(15, 23, 42, 0.78);
}

/* In progress / review */
.badge.status-IN_PROGRESS,
.badge.status-REVIEW{
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.16);
  color: rgba(30, 64, 175, 0.92);
}

/* Waiting / pending */
.badge.status-WAITING,
.badge.status-ON_HOLD{
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.18);
  color: rgba(146, 64, 14, 0.92);
}

/* Done */
.badge.status-DONE,
.badge.status-COMPLETED,
.badge.status-FINALIZED,
.badge.status-APPROVED{
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.18);
  color: rgba(6, 95, 70, 0.92);
}

/* Draft / new */
.badge.status-DRAFT,
.badge.status-NEW{
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.16);
  color: rgba(30, 41, 59, 0.82);
}

.badge[class*="state-"]{
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.03);
  color: rgba(15, 23, 42, 0.78);
}

.badge.state-ACTIVE{
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.14);
  color: rgba(30, 64, 175, 0.92);
}

.badge.state-NOT_STARTED{
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.16);
  color: rgba(30, 41, 59, 0.82);
}

.badge.state-WAITING{
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.16);
  color: rgba(146, 64, 14, 0.92);
}

.badge.state-BLOCKED{
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.16);
  color: rgba(153, 27, 27, 0.9);
}

.badge.state-DONE,
.badge.state-COMPLETED{
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.16);
  color: rgba(6, 95, 70, 0.92);
}

.process-condition-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  font-size: 12px;
  line-height: 1;
  color: rgba(71, 85, 105, 0.9);
  cursor: help;
  user-select: none;
}

/* --- Button: Reset (LunaDocu calm accent) --- */
#resetBtn.button{
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.35); /* soft indigo */
  color: #3f46e5;
  font-weight: 550;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#resetBtn.button:hover{
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.60);
}

#resetBtn.button:active{
  background: rgba(99, 102, 241, 0.10);
}

#resetBtn.button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

/* ---------- Print / PDF snapshot ---------- */

.print-meta {
  display: none;
  margin: 10px 0 14px;
}

.print-meta .pm-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.print-meta .pm-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.tool:hover {
  border-color: var(--border-2);
}

#confirmStatusBtn{
  background: #f8fafc;
  border-color: #d8dee5;
  font-weight: 500;
}

#confirmStatusBtn:hover{
  background: #f1f5f9;
  border-color: #d8dee5;
}

#confirmStatusBtn .confirm-status-icon{
  font-size: 12px;
  line-height: 1;
  color: #4b5565;
}

.top-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media print {
  /* Hide interactive UI */
  .lang,
  .top-actions,
  .footer-note {
    display: none !important;
  }

  /* Show snapshot header */
  .print-meta {
    display: block !important;
  }

  /* Layout becomes a document */
  .container {
    max-width: none;
    padding: 0;
  }

  .item-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .item-history-panel {
    position: static !important;
    top: auto !important;
  }

  .item-history-panel__log {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Remove "app" look */
  .card {
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
  }

  a {
    text-decoration: none;
  }

  /* Avoid ugly page breaks */
  .step,
  .log-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ===== Public error page (link not available) ===== */

.ld-error {
  max-width: 720px;   /* как у тебя было inline */
}

.ld-error-inner {
  margin-top: 64px;   /* как у тебя было inline */
}

.ld-error-title {
  font-size: 44px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.ld-error-desc {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.ld-error-card {
  margin-top: 18px;
}

.ld-error-what {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.ld-error-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
}

.ld-error-list li {
  margin: 6px 0;
}



.lang-compact{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* сама плашка */
.lang-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 32px;                 /* ↓ было 36 */
  min-width: 44px;              /* ↓ компактнее */
  padding: 0 10px;

  border-radius: 10px;          /* мягче */
  border: 1px solid rgba(37, 99, 235, 0.18); /* ↓ менее контрастный */
  background: rgba(37, 99, 235, 0.035);      /* спокойнее */

  font-size: 13px;              /* ↓ меньше */
  font-weight: 500;             /* оставить */
  letter-spacing: 0.3px;        /* ↓ меньше “кодового” */

  color: #475569;               /* slate-700, РЅРµ СЃРёРЅРёР№ */
  cursor: default;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* hover — почти незаметный */
.lang-compact:hover .lang-pill{
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.25);
}

/* select поверх */
.lang-select-overlay{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

body {
  background: rgba(15, 23, 42, 0.03);
  color: #334155;
}


/* ===== Modal (LunaDocu calm) ===== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.modal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow: hidden;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

.modal__dialog {
  position: relative;
  width: min(640px, calc(100% - 32px));
  margin: 0;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 52px 12px 18px;
  border-bottom: none;
  flex: 0 0 auto;
}

.modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.modal__subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #64748b;
}

.modal__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  line-height: 0;
  font-size: 22px;
}

.modal__close:hover {
  background: rgba(15, 23, 42, 0.05);
  color: #64748b;
}

.modal__body {
  padding: 14px 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: none;
}

.modal__textarea {
  width: 100%;
  min-height: 120px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 10px 12px;
  font-size: 13px;
  resize: vertical;
}

.modal__text {
  font-size: 13px;
  color: #334155;
  white-space: pre-wrap;
}

.modal__counter {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #64748b;
  text-align: right;
}

/* When the close button is rendered directly inside the dialog (no header),
   anchor it to the top-right corner so it doesn't shift layout. */
.modal__dialog > .modal__close {
  position: absolute;
  top: 6px;
  right: 6px;
  left: auto;
}

.modal__body {
  padding: 16px 18px 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.formRow {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.formRow--2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  .formRow--2 { grid-template-columns: 1fr; }
  .modal.is-open { padding: 12px; }
  .modal__dialog { width: calc(100% - 24px); max-height: calc(100vh - 24px); }
}

.label {
  font-size: 12px;
  color: #475569;
}

.input, .select {
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #fff;
  padding: 0 12px;
  color: #0f172a;
  outline: none;
}

.input:focus, .select:focus {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: none;
  flex: 0 0 auto;
}

.modal__dialog--compact {
  max-width: 300px;
  padding: 6px;
}

.modal__dialog--compact .modal__header {
  padding-bottom: 8px;
}

.modal__dialog--compact .modal__footer {
  padding-top: 10px;
}

/* Buttons (if you already have btn styles — оставь только отсутствующее) */
.btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #fff;
  color: #0f172a;
  cursor: pointer;
}


.btn--primary{
  background: #2563eb;
  color: #fff;
  border-color: transparent;
}
.btn--primary:hover{
  background: #1d4ed8;
}
.btn:hover { background: rgba(15, 23, 42, 0.03); }

/* Keep primary CTA hover in blue (do not let generic .btn:hover gray override it). */
.btn.btn--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: none;
}

.btn-ghost {
  background: #fff;
  color: #334155;
}

.btn-primary {
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
}

.btn-primary:hover {
  background: rgba(37, 99, 235, 0.10);
}

.btn-danger {
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
}

.updated-cell{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.row-menu{
  position:relative;
  display:inline-block;
  overflow: visible;
}

.row-menu__trigger {
    border: 0;
    background: transparent;
    padding: 4px 0px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 0;
    color: inherit;
}

.row-menu__trigger:hover{
  background:rgba(0,0,0,0.05);
}

.row-menu__dropdown{
  display:none;
  position:absolute;
  right:0;
  top:100%;
  margin-top:6px;
  min-width:140px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,0.10);
  padding:6px;
  z-index:300;
}

/* Board row actions: open upward to avoid clipping on the last visible row. */
.updated-col .row-menu__dropdown{
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

.row-menu.is-open .row-menu__dropdown{
  display:block;
}

.row-menu__item{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
}

.row-menu__item:hover{
  background:rgba(0,0,0,0.05);
}

.row-menu__item--danger{
  color:#d11a2a;
}

/* Header right utilities (Print + Lang) */
.header-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Summary header row (title left, status right) */
.section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

/* Keep existing spacing of section title but avoid double margin in section-head */
.section-head .section-title{
  margin: 0;
}

/* Summary list: calm document passport */
.summary-list{
  display: grid;
 /* gap: 14px;*/
  margin-top: 6px;
}

.summary-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 12px;
  row-gap: 1px;
  margin-bottom: 10px;
  align-items: baseline;
}

.summary-label{ color: var(--muted); }
/* Summary values should be calm (passport, not content) */
.summary-value{
  font-weight: 500; /* если сейчас 600/700 — станет спокойнее */
}

.doc-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  text-decoration: none;
}

.doc-link:hover{
  border-color: rgba(15, 23, 42, 0.18);
}

.doc-link-title{
  font-weight: 600;
}

.doc-link-meta{
  font-size: 12px;
  opacity: 0.6;
}

.doc-link-hint{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-all;
}

/* Mobile: labels above values */
@media (max-width: 720px){
  .summary-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* =========================
   Item Summary: doc button
   ========================= */

/* Make "tool" links behave like buttons (no underline on hover) */
a.tool:hover,
a.doc-action:hover {
  text-decoration: none;
}

/* Summary card: allow footer to stick to bottom-right nicely */
.item-grid > .card:first-child .card-inner {
  display: flex;
  flex-direction: column;
}

/* Summary passport + footer layout */
.summary-list {
  margin-top: 6px;
}

/* Put the document action at bottom-right of the Summary block */
.summary-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* If you want it to "sit" closer to the divider */
.summary-footer + .hr {
  margin-top: 12px;
}

/* Slightly more “button-like” feel for the doc action */
a.doc-action.tool {
  padding: 8px 12px;
}

   /* Top-left back as icon-only (no button look) */
.back-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* big hit area, calm look */
  width: 36px;
  height: 36px;

  text-decoration: none;
  color: inherit;

  background: transparent;
  border: 0;
  border-radius: 999px; /* keeps a soft hit target, but invisible */
}

.back-icon:hover{
  background: rgba(0,0,0,0.04); /* subtle, not CTA */
}

.back-icon:focus-visible{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

.back-icon span{
  font-size: 18px;
  line-height: 1;
}

/* Kebab (⋯) icon-only menu — same calm behavior as back arrow */
.kebab{ position: relative; display: inline-flex; }

.kebab-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  background: transparent;
  border: 0;
  border-radius: 999px;

  color: inherit;
  cursor: pointer;
}

.kebab-btn:hover{ background: rgba(0,0,0,0.04); }

.kebab-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

.kebab-btn span{
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px); /* опционально: чуть ровнее по оптике */
}

/* Dropdown */
.kebab-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  min-width: 200px;          /* keep labels in one line for board/item actions */
  padding: 4px;              /* было 6 */

  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;       /* было 12 */
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);

  display: none;
  z-index: 50;
}

.kebab-menu.is-open{ display: block; }

.kebab-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 2px 10px;
  border: 0;
  border-radius: 10px;

  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  white-space: nowrap;
}

.kebab-item:hover{ background: rgba(0,0,0,0.04); }
.kebab-item:active{ background: rgba(0,0,0,0.06); }

.kebab-separator{
  height: 1px;
  margin: 6px 8px;
  background: rgba(15, 23, 42, 0.12);
}

.item-action-toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.90);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.item-action-toast.is-visible{
  opacity: 1;
}




/* Top-left: Open document should be calm (not a CTA button) */
.top-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Open document: link-like with soft hit area */
.doc-action{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 36px;
  padding: 0 10px;

  text-decoration: none;
  color: inherit;

  background: transparent;
  border-radius: 999px;
}

.doc-action:hover{
  background: rgba(0,0,0,0.04);
}

.doc-action:not(.tool):focus-visible{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

.doc-action span:last-child{
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.doc-action{
  padding: 0 8px;
  gap: 6px;
}
.doc-action span:last-child{
  font-size: 17px;
}

/* Transition from passport to process */
.summary-list + .steps-list,
.summary-list + .steps {
  margin-top: 16px;
}

.status-editor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.status-editor__main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.summary-status-stack {
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.steps-density {
  display: inline-flex;
  align-items: center;
}

.steps-density__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px;
}

.steps-density__btn {
  border: 0;
  background: transparent;
  color: rgba(15, 23, 42, 0.62);
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  line-height: 1;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.steps-density__line {
  width: 12px;
  border-radius: 999px;
  background: currentColor;
  display: block;
}

.steps-density__line--thin {
  height: 3px;
  border-radius: 999px;
}

.steps-density__line--thick {
  height: 7px;
}

.steps-density__btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

.steps-density__btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.25);
  outline-offset: 1px;
}

.steps-density__btn.is-active {
  background: rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.9);
}

.summary-row--meta-action .meta-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.step-options-gear {
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: rgba(15, 23, 42, 0.68);
  border-radius: 999px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#openItemStatsBtn {
  width: 25px;
  min-width: 25px;
  height: 25px;
  margin-right: 6px;
}

#openPublicItemStatsBtn {
  width: 25px;
  min-width: 25px;
  height: 25px;
  margin-right: 6px;
}

.step-options-gear__icon {
  width: 12px;
  height: 12px;
  display: block;
  color: rgba(15, 23, 42, 0.52);
  transform: translateY(-0.35px);
}

.step-options-gear__icon path,
.step-options-gear__icon circle,
.step-options-gear__icon line {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.item-stats-icon {
  width: 15px;
  height: 15px;
  display: block;
  transform: translateY(-0.8px);
}

.item-stats-icon line {
  stroke: currentColor;
  stroke-width: 3.6;
  stroke-linecap: round;
}

.public-time-chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.6);
  margin-right: 0;
  user-select: none;
  cursor: pointer;
  font-weight: 400;
}

.item-stats-header-meta .public-time-chart-toggle {
  margin-right: 0;
}

.public-time-chart-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.public-time-chart-toggle--placeholder {
  min-height: 14px;
  visibility: hidden;
  pointer-events: none;
}

.step-options-gear:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.22);
}

.step-options-gear--plain {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.step-options-gear--plain .step-options-gear__icon {
  width: 20px;
  height: 20px;
  transform: translateY(-0.25px);
  color: rgba(15, 23, 42, 0.56);
}

.step-options-gear--plain .step-options-gear__icon path,
.step-options-gear--plain .step-options-gear__icon circle {
  fill: currentColor;
  stroke: none;
}

.step-options-gear--plain:hover {
  background: transparent;
  border-color: transparent;
  color: rgba(15, 23, 42, 0.74);
}

.step-options-gear:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.25);
  outline-offset: 1px;
}

.key-step-star {
  color: var(--color-key-step);
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.key-step-star.is-hidden {
  display: none;
}

.step-options-modal {
  max-width: min(1090px, 67vw);
  width: 67vw;
  max-height: calc(100vh - 48px);
}

.step-options-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 16px;
  min-height: 0;
}

.step-options-modal__left,
.step-options-modal__right {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  min-height: 0;
}

.step-options-modal__section-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.76);
}

.step-options-modal__list {
  max-height: 420px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

.step-options-row {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.step-options-row .key-step-star {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translate(-50%, -50%);
  justify-self: start;
  font-size: 11px;
}

.step-options-row:hover {
  background: rgba(15, 23, 42, 0.03);
}

.step-options-row.is-selected {
  border-color: rgba(15, 23, 42, 0.28);
  background: rgba(15, 23, 42, 0.04);
}

.step-options-row__index {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.6);
}

.step-options-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-options-row__state {
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.7);
}

.step-options-row__delegated-badge {
  font-size: 10px;
  padding: 1px 7px;
}

.step-options-row__delegated-badge.is-hidden {
  display: none;
}

.step-options-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 2px 0 12px;
}

.step-options-tab {
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  background: #fff;
  color: rgba(15, 23, 42, 0.72);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}

.step-options-tab.is-active {
  border-color: rgba(15, 23, 42, 0.24);
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.9);
}

.step-options-panel {
  display: none;
}

.step-options-panel.is-active {
  display: block;
}

.step-options-delegate-state {
  display: grid;
  gap: 10px;
}

.step-options-delegate-actions {
  display: inline-flex;
  gap: 8px;
}

.step-options-form {
  display: grid;
  gap: 16px;
}

.step-options-section h5 {
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.85);
}

.step-options-field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
}

.step-options-field input[type="text"],
.step-options-field select,
.step-options-field textarea {
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.step-options-field textarea {
  min-height: 86px;
  resize: vertical;
}

#stepOptionsTriggerState {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
}

.step-options-field--check {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.step-options-help {
  margin: 0;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.58);
}

.step-options-error {
  margin-top: 8px;
  color: #b91c1c;
  font-size: 12px;
}

.step-options-error--neutral {
  color: rgba(15, 23, 42, 0.68);
}

.item-stats-modal {
  max-width: min(980px, 78vw);
  width: min(980px, 78vw);
  max-height: calc(100vh - 48px);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.item-stats-modal .modal__header {
  padding-right: 18px;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.item-stats-modal .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.item-stats-header-main {
  min-width: 0;
}

.item-stats-sort {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.item-stats-sort__label {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.66);
}

.item-stats-sort__select {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(15, 23, 42, 0.88);
  font-size: 12px;
  line-height: 1.2;
  padding: 3px 8px;
}

.item-stats-header-meta {
  margin-left: auto;
  text-align: right;
}

.item-stats-header-grid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 24px;
  row-gap: 6px;
  align-items: center;
  justify-items: end;
}

.item-stats-header-meta__duration {
  font-size: 15px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.9);
  text-align: right;
}

.item-stats-header-meta__date {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.58);
  text-align: right;
}

.item-stats-sort--header {
  margin-top: 0;
}

.item-stats-sort--header .item-stats-sort__label {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.56);
}

.item-stats-asof {
  margin-left: 8px;
  color: rgba(15, 23, 42, 0.58);
  font-size: 12px;
}

.item-stats-content {
  display: grid;
  gap: 10px;
}

.item-stats-empty {
  padding: 14px 12px;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  color: rgba(15, 23, 42, 0.58);
  font-size: 13px;
  text-align: center;
}

.item-stats-row {
  display: grid;
  grid-template-columns: minmax(170px, 240px) 1fr auto;
  align-items: center;
  gap: 12px;
}

.item-stats-row__label {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.86);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-stats-row__bar-wrap {
  display: grid;
  gap: 0;
}

.item-stats-row__bar {
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
  display: flex;
}

.item-stats-row__segment {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.item-stats-row__segment--active {
  background: rgba(59, 130, 246, 0.55);
}

.item-stats-row__segment--waiting {
  background: rgba(245, 158, 11, 0.55);
}

.item-stats-row__segment--blocked {
  background: rgba(239, 68, 68, 0.55);
}

.item-stats-row__segment--done {
  background: rgba(22, 163, 74, 0.5);
}

.item-stats-row__total {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.78);
  min-width: 48px;
  text-align: right;
}

.item-stats-row__segment-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  opacity: 0;
}

.item-stats-row__segment:hover .item-stats-row__segment-label {
  opacity: 1;
}

@media (max-width: 860px) {
  .step-options-modal__grid {
    grid-template-columns: 1fr;
  }
  .step-options-modal__list {
    max-height: 220px;
  }
  .item-stats-modal {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
  .item-stats-header-meta {
    margin-left: 0;
    text-align: left;
    justify-items: start;
  }
  .item-stats-header-grid {
    grid-template-columns: 1fr;
    row-gap: 8px;
    justify-items: stretch;
  }
  .item-stats-sort {
    width: 100%;
    justify-content: flex-start;
  }
  .item-stats-header-meta__duration,
  .item-stats-header-meta__date {
    text-align: left;
  }
  .public-time-chart-toggle {
    justify-self: start;
  }
  .item-stats-sort__select {
    max-width: 100%;
  }
  .item-stats-row {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }
  .item-stats-row__label {
    grid-column: 1 / -1;
  }
}

/* --- Item: Owner row carries Status badge (best alignment) --- */
.summary-row--top{
  grid-template-columns: 120px 1fr auto; /* label | value | status */
  align-items: center;
}

.summary-status{
  justify-self: end;
  align-self: center;
}

/* Make sure the badge doesn't visually jump */
.summary-row--top .badge{
  margin-left: 12px; /* optical breathing room from owner value */
}

/* Mobile: stack neatly */
@media (max-width: 720px){
  .summary-row--top{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .summary-status{
    justify-self: start; /* badge under owner on mobile */
  }

  .summary-row--top .badge{
    margin-left: 0;
  }

  .summary-status-stack,
  .status-editor,
  .summary-row--meta-action .meta-actions {
    justify-self: start;
    align-items: flex-start;
  }
}

.summary-row--top{
  grid-template-columns: 120px 1fr auto;
  align-items: center; /* важнее, чем baseline для бейджа */
}
.summary-status{
  justify-self: end;
  align-self: center;
}

/* --- Item: Owner row carries Status badge (best alignment) --- */
.summary-row--top{
  grid-template-columns: 120px minmax(0, 1fr) auto; /* важно: minmax(0,1fr) */
  align-items: center;
  column-gap: 14px; /* гарантированный “воздух” до статуса */
}

/* чтобы value-колонка реально могла сжиматься и не “распирала” грид */
.summary-row--top .summary-value{
  min-width: 0;
}

.summary-row--meta-action .meta-label {
  color: var(--muted);
}

.summary-row--meta-action .summary-value {
  white-space: nowrap;
}

.summary-row--meta-action .meta-date {
  color: var(--text);
}

.summary-row--meta-action .meta-time {
  color: rgba(100, 116, 139, 0.72);
  margin-left: 8px;
}

/* чтобы инпут не раздувал колонку и красиво вписывался */
.summary-row--top input[type="text"],
.summary-row--top .inline-edit input[type="text"]{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* этот margin теперь можно уменьшить или убрать — gap уже делает воздух */
.summary-row--top .badge{
  margin-left: 0; /* было 12px — из-за этого иногда выглядит “странно” вместе с gap */
}

/* ===== Document links modal ===== */
.doclinks-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.doclinks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Added: align doclinks header with rows (item.html uses .doclinks-head/.doclinks-rows) */
.doclinks-table {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doclinks-head {
  display: grid;
  grid-template-columns: 1fr 90px 140px 90px 120px;
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  color: rgba(11, 20, 38, 0.6);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.doclinks-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.doclink-row {
  display: grid;
  grid-template-columns: 1fr 120px 130px 84px 84px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.doclink-row--header {
  background: transparent;
  border: none;
  padding: 0 4px;
  grid-template-columns: 1fr 120px 130px 84px 84px;
}

.doclink-row--header span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.doclink-url {
  min-width: 0;
}

.doclink-url a {
  color: var(--link);
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doclink-edit input[type="text"]{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

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

.doclink-actions .tool{
  padding: 6px 10px;
}

.doclink-public{
  display: flex;
  justify-content: center;
}

/* --- Document links modal (doclinks) --- */
.doclinks-help { margin-top: 6px; color: #64748b; font-size: 14px; }
.doclinks-error { margin-top: 10px; color: #b91c1c; font-size: 14px; }

.doclinks-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.doclinks-row {
  display: grid;
  grid-template-columns: 1fr 90px 140px 90px 120px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.doclinks-row.header {
  border-style: dashed;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.doclinks-row.header > div { padding: 0; border: 0; background: transparent; }

.doclinks-url a { color: #0f172a; text-decoration: none; }
.doclinks-url a:hover { text-decoration: underline; }

.doclinks-url input,
.doclinks-version input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
}
.doclinks-added { color: #64748b; font-size: 13px; }
.doclinks-public { display: flex; align-items: center; justify-content: flex-start; }
.doclinks-public input[type="checkbox"] { width: 16px; height: 16px; }

.doclinks-row-actions { display: flex; justify-content: flex-end; gap: 8px; }
.doclinks-row-actions button {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 13px;
}
.doclinks-row-actions button:hover { background: #f8fafc; }

.doclinks-actions { margin-top: 14px; display: flex; gap: 10px; }
.doclinks-actions button { /* inherit your base button styles; keep minimal here */ }

@media (max-width: 980px) {
  .doclinks-row { grid-template-columns: 1fr 80px 110px 70px 110px; }
}
@media (max-width: 760px) {
  .doclinks-row { grid-template-columns: 1fr; align-items: start; }
  .doclinks-row.header { display: none; }
  .doclinks-row-actions { justify-content: flex-start; }
}


/* ==========================
   Document links modal grid
   ========================== */

.doclinks-grid{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px 150px 90px auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  width: 100%;
}

.doclinks-grid > div{ min-width: 0; } /* allow ellipsis / shrink */

.doclinks-grid--head{
  margin-top: 8px;
  padding: 8px 0 6px 0;
  border-bottom: 1px solid #eef1f6;
  font-size: 12px;
  color: #6b7280;
}

.doclinks-grid--row{
  padding: 10px 0;
  border-bottom: 1px solid #f1f4f9;
}

.doclinks-grid--row:last-child{
  border-bottom: none;
}

.doclinks-url{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doclinks-grid input[type="text"],
.doclinks-grid input[type="url"]{
  width: 100%;
  min-width: 0;
}

.doclinks-actions{
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Make the checkbox column visually centered */
.doclinks-grid .doclinks-public{
  display: flex;
  justify-content: center;
}

/* Slightly denser layout on narrow screens */
@media (max-width: 760px){
  .doclinks-grid{
    grid-template-columns: 1fr 90px 120px 70px auto;
    column-gap: 10px;
  }
}

/* ===============================
   Doc links modal v2 (scoped)
   =============================== */
.doclinks2 {
  padding: 11px 22px 18px;
}

.doclinks2__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  order: 2;
}

.doclinks2__header {
  display: none;
}

.doclinks2__h { align-self: end; text-align: left; }

.doclinks2__row {}

.doclinks2__card{
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) 86px 110px 70px 30px;
  gap: 12px;
  align-items: center;
  padding: 6px 10px;
  background: #f1f1f1;
  border-radius: 12px;
}

.doclinks2__input{
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 10px;
  background: #f1f1f1;
  font-size: 13px;
  line-height: 1.3;
  box-shadow: inset 0 0 0 1px #f1f1f1;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.doclinks2__input:hover {
  background: #ffffff;
}

.doclinks2__input:focus {
  background: #ffffff;
  border-color: rgba(148, 163, 184, .6);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}

.doclinks2__input--version {
  text-transform: none;
}

.doclinks2__added {
  color: #111827;
  font-size: 13px;
  padding: 0 2px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.doclinks2__time {
  color: #9ca3af;
  margin-left: auto;
}

.doclinks2__httpHint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #6b7280;
}

.doclinks2__httpHint--public {
  color: #6b7280;
}

.doclinks2__trash {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background-color: transparent;
  background-image: url("https://ssl.gstatic.com/ui/v1/icons/mail/gm3/2x/delete_baseline_nv700_20dp.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  color: #6b7280;
}

.doclinks2__trashIcon{ display: none; }

.doclinks2__trash:hover{
  background: rgba(15, 23, 42, 0.06) url("https://ssl.gstatic.com/ui/v1/icons/mail/gm3/2x/delete_baseline_nv700_20dp.png") center/18px 18px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.doclinks2__trash:hover { background: rgba(0,0,0,.04); color: #111827; }

.doclinks2__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.doclinks2__note-btn {
  margin-left: 0;
  margin-right: 0;
}

.doclinks2__note-btn--filled {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #334155;
}

.doclinks2__note-btn--filled:hover {
  background: #cbd5e1;
  border-color: #94a3b8;
  color: #1f2937;
}

.doclinks2__switch{
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.doclinks2__switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.doclinks2__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #d1d5db;
  transition: .18s;
  border-radius: 999px;
}

.doclinks2__slider:before{
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: .2s;
}
.doclinks2__switch input:checked + .doclinks2__slider:before{transform: translateX(16px);}


.doclinks2__switch input:checked + .doclinks2__slider {
  background-color: #34c759; /* Apple green */
}

.doclinks2__switch input:checked + .doclinks2__empty{
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  padding-top: 18px;
}

.doclinks2__addCentered,
.doclinks2__addCentered:hover,
.doclinks2__addFloating:hover {
  background: #f9fafb;
}

.doclinks2__footer{display:flex; justify-content:flex-end; gap:12px; padding-top:10px;}

.doclinks2__error {
  margin-top: 10px;
  color: #6b7280;
  font-size: 13px;
}

/* --- DocLinks modal: compact + aligned (v2) --- */
.modal__dialog--doclinks {
  position: relative;
  width: min(638px, calc(100vw - 48px));
  padding: 12px;
}

.modal__dialog--doclinks .modal__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.modal__dialog--doclinks.is-shaking {
  animation: modalShake 220ms ease-in-out;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

@keyframes modalShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* tighter list area */
.doclinks2 { padding-top: 8px; }
.doclinks2__header { padding-right: 10px; } /* keep aligned with row padding */

/* card (row) – narrower and calmer */
.doclinks2__card {
  padding: 4px 6px;
  column-gap: 12px;
  border-radius: 14px;
  background: #f4f4f4;
}

/* inputs inside card */
.doclinks2__input,
.doclinks2__pill {
  height: 26px;
  border-radius: 10px;
  background: #f4f4f4;
}

/* make link column slightly narrower than full-width */
.doclinks2__card { grid-template-columns: minmax(260px, 1.6fr) 86px 110px 70px 30px; }

/* Add (+) button */
.doclinks2__addCentered {
  width: 40px;
  height: 40px;
  margin: 14px auto 0;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.doclinks2__addCentered:hover { background: #f9fafb; }

/* empty state aligns with first row */
.doclinks2__empty {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  order: 2;
}
.doclinks2__emptyText{
  height: 26px;
  padding: 0 10px;
  border-radius: 12px;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  display: flex;
  align-items: center;
  width: 100%;
}

/* footer buttons alignment */
.doclinks2__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
}

/* ensure primary is blue like other places */
.btn--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* toggle alignment (ensure knob is centered) */
.doclinks2__switch {
  width: 36px;
  height: 20px;
  border-radius: 999px;
}
.doclinks2__slider:before{
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}
.doclinks2__switch input:checked + .doclinks2__slider:before{
  transform: translateX(16px);
}

.doclinks2__listWrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 320px;
  padding: 12px;
  position: relative;
}

.doclinks2__add{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-size:19px;
  line-height:32px;
  cursor:pointer;
  color:#6b7280;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.doclinks2__add:hover{background:#f3f4f6;}
.doclinks2__add--empty{margin-top:0;}

.doclinks2__footer .btn{white-space:nowrap;}

.doclinks2__row--pending .doclinks2__card{
  background: #f1f1f1;
  opacity: 0.72;
}
.doclinks2__row--pending .doclinks2__input,
.doclinks2__row--pending .doclinks2__switch input{
  pointer-events: none;
}
.doclinks2__pendingLabel{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

/* ===== Doclinks2 final overrides (align + overflow + icon) ===== */
.modal__dialog--doclinks {
  max-height: calc(100vh - 160px);
  overflow: hidden;
}

.modal__dialog--doclinks-public{
  width: min(520px, calc(100vw - 48px));
  padding: 10px;
}

.doclinks2--public .doclinks2__card--public{
  grid-template-columns: minmax(200px, 1.2fr) 60px 100px;
  gap: 8px;
}

.doclinks2--public .doclinks2__listWrap{
  padding: 12px;
}

.doclinks2--public{
  padding-left: 0;
  padding-right: 0;
}

.doclinks2 {
  padding: 26px 22px 18px;
}

.doclinks2__list {
  gap: 10px;
}

.doclinks2__card {
  gap: 12px;
  padding: 6px 10px;
  background: #f1f1f1;
}

.doclinks2__input,
.doclinks2__pill {
  background: #f1f1f1;
}

.doclinks2__listWrap{
  overflow-y: auto;
  max-height: calc(100vh - 360px);
  padding-left: 44px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 12px;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* Minimal scrollbar: thumb only */
.doclinks2__listWrap::-webkit-scrollbar{
  width: var(--scrollbar-size) !important;
}
.doclinks2__listWrap::-webkit-scrollbar-track{
  background: transparent;
}
.doclinks2__listWrap::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 999px;
  border: 0;
  background-clip: border-box;
}

.doclinks2__add{
  top: 8px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doclinks2--public .doclinks2__listWrap{
  padding: 10px;
}

.doclinks2--public .doclinks2{
  padding: 10px;
}

.doclinks2__trash {
  display: flex;
  align-items: center;
  justify-content: center;
}

.doclinks2__trashIcon{
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Doclinks modal padding fixes (public + internal) --- */
.modal__dialog--doclinks .doclinks2 {
  padding: 14px;
}

.modal__dialog--doclinks .doclinks2__listWrap {
  padding: 14px;
}

.modal__dialog--doclinks .doclinks2__add {
  top: 12px;
  left: 12px;
}

.modal__dialog--doclinks-public {
  padding: 12px;
}

.modal__dialog--doclinks-public .doclinks2 {
  padding: 14px;
}

.modal__dialog--doclinks-public .doclinks2__listWrap {
  padding: 12px;
}
.doclinks2__undo {
  margin-left: 6px;
  font-size: 12px;
  color: #6b7280;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.doclinks2__undo:hover {
  text-decoration: none;
  background: rgba(15, 23, 42, 0.06);
}
.doclinks2__undoIcon {
  width: 24px;
  height: 24px;
  display: block;
}

/* ===== Doclinks2 trash hover fix (force icon to stay visible) ===== */
.doclinks2__trash{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

/* Internal doclinks: revert trash hover to default */
.modal__dialog--doclinks .doclinks2__trash{
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.modal__dialog--doclinks .doclinks2__trash::before{
  background-size: 18px 18px;
}
.modal__dialog--doclinks .doclinks2__trash:hover{
  background-color: rgba(15, 23, 42, 0.06);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.doclinks2__trash::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://ssl.gstatic.com/ui/v1/icons/mail/gm3/2x/delete_baseline_nv700_20dp.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  pointer-events: none;
}
.doclinks2__trash:hover{
  background-color: rgba(15, 23, 42, 0.06);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* ===== Public doclinks modal ===== */
.doclinks2--public .doclinks2__listWrap{
  padding-left: 22px;
}
.doclinks2__card--public{
  grid-template-columns: minmax(260px, 1.6fr) 90px 120px;
}
.doclinks2__noteCell {
  width: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.doclinks2__link{
  color: #0f172a;
  text-decoration: none;
  font-weight: 500;
}
.doclinks2__link:hover{
  text-decoration: underline;
}
.doclinks2__version{
  color: #475569;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.doclinks2__note-btn--public {
  margin-left: 0;
  margin-right: 0;
}

/* --- Doclinks modal spacing (final overrides) --- */
.modal__dialog--doclinks .doclinks2,
.modal__dialog--doclinks .doclinks2__listWrap {
  padding: 12px !important;
}
.modal__dialog--doclinks .doclinks2__add {
  top: 14px !important;
  left: 14px !important;
}
.modal__dialog--doclinks-public,
.modal__dialog--doclinks-public .doclinks2,
.modal__dialog--doclinks-public .doclinks2__listWrap {
  padding: 14px !important;
}

/* --- Public doclinks modal: equal padding + compact columns --- */
.modal__dialog--doclinks-public {
  padding: 12px !important;
}
.modal__dialog--doclinks-public .doclinks2--public {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.modal__dialog--doclinks-public .doclinks2--public .doclinks2__listWrap {
  padding: 12px !important;
}
.modal__dialog--doclinks-public .doclinks2__card--public {
  grid-template-columns: minmax(170px, 1fr) 22px 52px 90px !important;
  gap: 6px !important;
}

/* tighten public modal width without touching card padding */
.modal__dialog--doclinks-public {
  width: min(420px, calc(100vw - 48px)) !important;
}

/* prevent public modal from showing scrollbars/track */
.modal__dialog--doclinks-public .doclinks2__listWrap {
  overflow: visible !important;
}
.modal__dialog--doclinks-public .doclinks2__listWrap::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* --- Public doclinks modal: equal padding + tighter label/version gap --- */
.modal__dialog--doclinks-public {
  width: min(400px, calc(100vw - 48px)) !important;
  padding: 0 !important;
}
.modal__dialog--doclinks-public .doclinks2,
.modal__dialog--doclinks-public .doclinks2__listWrap {
  padding: 12px !important;
  box-sizing: border-box;
}
.modal__dialog--doclinks-public .doclinks2__card--public {
  width: 100%;
  grid-template-columns: minmax(0, 160px) 22px 44px 86px !important;
  column-gap: 6px !important;
}

/* --- Public doclinks modal: final equal padding + tighter label/version gap --- */
.modal__dialog--doclinks-public {
  width: min(460px, calc(100vw - 48px)) !important;
  padding: 0 !important;
}
.modal__dialog--doclinks-public .doclinks2,
.modal__dialog--doclinks-public .doclinks2__listWrap {
  padding: 12px !important;
  box-sizing: border-box;
}
.modal__dialog--doclinks-public .doclinks2--public .doclinks2__listWrap {
  padding: 12px !important;
}
.modal__dialog--doclinks-public .doclinks2__card--public {
  grid-template-columns: minmax(0, 180px) 22px 56px 120px !important;
  column-gap: 10px !important;
}

/* --- Public doclinks modal: thin scrollbar + datetime widths --- */
.modal__dialog--doclinks-public .doclinks2__listWrap {
  overflow-y: auto !important;
  max-height: calc(100vh - 360px);
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.modal__dialog--doclinks-public .doclinks2__listWrap::-webkit-scrollbar {
  width: var(--scrollbar-size) !important;
}

/* Ensure internal doclinks modal scrollbar stays extra thin */
.modal__dialog--doclinks .doclinks2__listWrap {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.modal__dialog--doclinks .doclinks2__listWrap::-webkit-scrollbar {
  width: var(--scrollbar-size) !important;
}
.modal__dialog--doclinks-public .doclinks2__listWrap::-webkit-scrollbar-track {
  background: transparent !important;
}
.modal__dialog--doclinks-public .doclinks2__listWrap::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  border-radius: 999px !important;
  border: 0 !important;
  background-clip: border-box !important;
}
.modal__dialog--doclinks-public .doclinks2__listWrap.is-scrolling,
.modal__dialog--doclinks .doclinks2__listWrap.is-scrolling {
  scrollbar-color: var(--scrollbar-thumb-color) transparent;
}
.modal__dialog--doclinks-public .doclinks2__listWrap.is-scrolling::-webkit-scrollbar-thumb,
.modal__dialog--doclinks .doclinks2__listWrap.is-scrolling::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color) !important;
}

/* Wider date column for datetime */
/* Wider date column for datetime */
.modal__dialog--doclinks .doclinks2__card {
  grid-template-columns: 200px 80px 140px 46px 22px;
  column-gap: 14px;
  padding: 4px 12px !important;
  min-height: 36px;
}
.modal__dialog--doclinks .doclinks2__input {
  height: 22px;
  padding: 3px 8px;
}
.modal__dialog--doclinks .doclinks2__input:not(.doclinks2__input--version) {
  width: 100%;
}

/* --- Internal doclinks modal: enforce compact row height (final) --- */
.modal__dialog--doclinks .doclinks2__card {
  padding: 2px 10px !important;
  min-height: 32px !important;
}
.modal__dialog--doclinks .doclinks2__input {
  height: 20px !important;
  padding: 2px 8px !important;
}
.modal__dialog--doclinks .doclinks2__input--version {
  width: 10ch;
  text-align: left;
}
.modal__dialog--doclinks .doclinks2__list {
  gap: 12px;
}

/* Internal doclinks: add button like step-plus, left of first row (no layout shift) */
.modal__dialog--doclinks .doclinks2__listWrap {
  padding-left: 12px !important;
  position: relative;
  overflow: visible;
}
.modal__dialog--doclinks .doclinks2__add {
  position: absolute;
  top: 14px !important;
  left: 15px !important;
  transform: translateX(calc(-100% - 8px)) translateY(4px) !important;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: transparent;
  cursor: pointer;
  color: transparent;
  box-shadow: none;
  z-index: 2;
}
.modal__dialog--doclinks .doclinks2__add::before,
.modal__dialog--doclinks .doclinks2__add::after {
  pointer-events: none;
}
.modal__dialog--doclinks .doclinks2__add::before,
.modal__dialog--doclinks .doclinks2__add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #94a3b8;
  border-radius: 999px;
}
.modal__dialog--doclinks .doclinks2__add::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.modal__dialog--doclinks .doclinks2__add::after {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.modal__dialog--doclinks .doclinks2__link,
.modal__dialog--doclinks .doclinks2__version {
  white-space: nowrap;
}
.modal__dialog--doclinks-public .doclinks2__link,
.modal__dialog--doclinks-public .doclinks2__version,
.modal__dialog--doclinks-public .doclinks2__added {
  white-space: nowrap;
}
.modal__dialog--doclinks-public .doclinks2__card--public {
  grid-template-columns: minmax(0, 240px) 22px 70px 140px !important;
  padding: 8px 12px;
}

.modal__dialog--doclinks-public .doclinks2__list {
  gap: 12px;
}

/* ===== Calm reports ===== */
.page--calm-reports {
  max-width: 1040px;
}

.reports-composer-header {
  margin-bottom: 12px;
}

.reports-subhead {
  margin: 4px 0 0;
  color: #637088;
  font-size: 14px;
}

.reports-composer-form {
  margin-bottom: 14px;
}

.reports-composer-panel {
  padding: 14px;
}

.reports-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.reports-filter-row--compact {
  align-items: flex-end;
}

.reports-filter-label {
  margin: 0;
  min-width: 56px;
  font-size: 13px;
  color: #5f6d85;
}

.reports-preset-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-preset-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #4f5f79;
  background: #fff;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.reports-preset-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reports-preset-chip.is-active {
  border-color: #d5dfed;
  background: #eef3f9;
  color: #273a57;
}

.reports-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  font-size: 12px;
  color: #5b6a83;
}

.reports-field--board {
  min-width: 260px;
}

.reports-customize {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.reports-customize summary {
  cursor: pointer;
  color: #2f405b;
  font-size: 13px;
  font-weight: 600;
}

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

.reports-widget-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #34445e;
  font-size: 13px;
}

.reports-widget-option small {
  display: block;
  margin-top: 2px;
  color: #6b7b94;
  font-size: 12px;
}

.reports-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.reports-widget {
  margin-bottom: 12px;
  padding: 14px;
}

.reports-widget-head h2 {
  margin: 0;
  font-size: 16px;
  color: #283a57;
}

.reports-widget-head p {
  margin: 4px 0 0;
  color: #6a7a93;
  font-size: 12px;
}

.reports-state-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.reports-state-card {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px;
  background: #fbfcff;
}

.reports-state-label {
  margin: 0;
  color: #5e6d85;
  font-size: 12px;
}

.reports-state-value {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 650;
  color: #23324e;
}

.reports-total {
  margin: 10px 0 0;
  color: #62718a;
  font-size: 12px;
}

.reports-signal-list,
.reports-simple-list,
.reports-attention-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.reports-signal-list li,
.reports-simple-list li,
.reports-attention-list li {
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0;
  color: #31425f;
  font-size: 13px;
}

.reports-signal-list li:last-child,
.reports-simple-list li:last-child,
.reports-attention-list li:last-child {
  border-bottom: 0;
}

.reports-empty {
  margin: 10px 0 0;
  color: #697890;
  font-size: 13px;
}

.reports-attention-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.reports-attention-main {
  min-width: 0;
}

.reports-attention-main a {
  color: #2a3c58;
  text-decoration: none;
}

.reports-attention-main a:hover {
  text-decoration: underline;
}

.reports-attention-main small {
  display: block;
  margin-top: 2px;
  color: #6e7d95;
}

.reports-attention-side {
  display: flex;
  flex-direction: column;
  text-align: right;
  color: #5e6d86;
  font-size: 12px;
  gap: 2px;
}

.reports-flag {
  color: #324661;
  font-weight: 600;
}

.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.reports-kpi-label {
  margin: 0;
  color: #5f6e86;
  font-size: 12px;
}

.reports-kpi-value {
  margin: 4px 0;
  color: #21314d;
  font-size: 24px;
  font-weight: 680;
}

.reports-kpi-grid small {
  color: #6f7f97;
  font-size: 12px;
}

.reports-flow-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
}

.reports-flow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.reports-flow-table th,
.reports-flow-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  color: #32435f;
}

.reports-flow-table th {
  color: #64748e;
  font-size: 12px;
  font-weight: 600;
}

.reports-simple-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.reports-copy-summary {
  margin-bottom: 20px;
}

.reports-copy-area {
  width: 100%;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  resize: vertical;
  color: #32435f;
  font-size: 13px;
  background: #fbfcff;
}

@media (max-width: 900px) {
  .reports-widget-grid,
  .reports-state-grid,
  .reports-kpi-grid {
    grid-template-columns: 1fr;
  }

  .reports-attention-list li {
    flex-direction: column;
  }

  .reports-attention-side {
    text-align: left;
  }
}

@media print {
  .reports-composer-form,
  .reports-print-btn {
    display: none !important;
  }

  .page--calm-reports {
    max-width: none;
  }

  .reports-widget {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ===== Calm reports v2 ===== */
.page--calm-reports-v2 {
  max-width: 1180px;
}

.reports-headline {
  margin-bottom: 14px;
}

.reports-headline-sub {
  margin: 4px 0 0;
  color: #65748d;
  font-size: 14px;
}

.report-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.report-bar__left {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.report-bar__right {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.report-range-segment {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.report-range-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  color: #4d5d78;
  background: #fff;
  cursor: pointer;
}

.report-range-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.report-range-chip.is-active {
  background: #eef3f9;
  border-color: #d6e0ee;
  color: #263b59;
}

.report-custom-range {
  display: inline-flex;
  gap: 8px;
  align-items: flex-end;
}

.report-custom-range.is-hidden {
  display: none;
}

.report-custom-range label,
.report-scope-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #5e6d86;
  font-size: 12px;
}

.report-custom-range input {
  min-width: 188px;
}

.report-scope-field {
  min-width: 220px;
}

.report-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

.report-main-col,
.report-side-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.report-block {
  padding: 14px;
}

.report-block__head {
  margin-bottom: 10px;
}

.report-block__head h2 {
  margin: 0;
  color: #243653;
  font-size: 16px;
}

.report-block__head p {
  margin: 4px 0 0;
  color: #6a7a94;
  font-size: 12px;
}

.report-block__head--split {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.report-link {
  color: #476489;
  text-decoration: none;
  font-size: 12px;
}

.report-link:hover {
  text-decoration: underline;
}

.status-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.status-tile {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 9px;
  background: #fcfdff;
}

.status-tile__label {
  margin: 0;
  font-size: 11px;
  color: #60718d;
  letter-spacing: .02em;
}

.status-tile__value {
  margin: 5px 0 0;
  font-size: 24px;
  line-height: 1;
  color: #223452;
  font-weight: 650;
}

.status-stack {
  display: flex;
  margin-top: 10px;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #edf1f7;
}

.status-stack__seg {
  min-width: 1.5%;
}

.status-stack__seg--draft,
.status-tile--draft {
  background: #dce8f6;
}

.status-stack__seg--in_progress,
.status-tile--in_progress {
  background: #b8d2ef;
}

.status-stack__seg--waiting,
.status-tile--waiting {
  background: #c9d8c9;
}

.status-stack__seg--finalized,
.status-tile--finalized {
  background: #ced2df;
}

.report-meta {
  margin: 8px 0 0;
  color: #687996;
  font-size: 12px;
}

.signal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.signal-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  color: #324560;
  font-size: 13px;
  line-height: 1.35;
}

.signal-list li:last-child {
  border-bottom: 0;
}

.signal-dot {
  color: #8aa0bf;
  font-size: 14px;
  line-height: 1;
  transform: translateY(1px);
}

.report-empty {
  margin: 0;
  color: #6d7d96;
  font-size: 13px;
}

.flow-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.flow-tile {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px;
  background: #fcfdff;
}

.flow-tile__label {
  margin: 0;
  font-size: 12px;
  color: #62728c;
}

.flow-tile__value {
  margin: 4px 0;
  font-size: 24px;
  line-height: 1;
  font-weight: 650;
  color: #243755;
}

.flow-tile small {
  color: #6d7d95;
  font-size: 12px;
}

.flow-mini-chart {
  margin-top: 10px;
  min-height: 78px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
  gap: 5px;
  align-items: end;
}

.flow-mini-chart__col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  align-items: end;
}

.flow-mini-chart__bar {
  border-radius: 3px 3px 0 0;
  min-height: 6px;
}

.flow-mini-chart__bar--created {
  background: #b8d3ee;
}

.flow-mini-chart__bar--finalized {
  background: #c4cddc;
}

.flow-details {
  margin-top: 8px;
}

.flow-details summary {
  cursor: pointer;
  color: #4a6387;
  font-size: 12px;
}

.flow-details__table-wrap {
  margin-top: 8px;
  overflow: auto;
}

.flow-details__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.flow-details__table th,
.flow-details__table td {
  text-align: left;
  padding: 7px 6px;
  border-bottom: 1px solid var(--line-soft);
  color: #334661;
}

.flow-details__table th {
  color: #657590;
}

.attention-table {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attention-table li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.attention-table li:last-child {
  border-bottom: 0;
}

.attention-main {
  min-width: 0;
}

.attention-title {
  display: block;
  color: #29405f;
  text-decoration: none;
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-title:hover {
  text-decoration: underline;
}

.attention-main small {
  display: block;
  margin-top: 2px;
  color: #6d7d95;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-side {
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.status-badge {
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  font-weight: 600;
  border: 1px solid transparent;
}

.status-badge--draft {
  background: #edf3fb;
  color: #3c5679;
  border-color: #d8e4f3;
}

.status-badge--in_progress {
  background: #e4effb;
  color: #2f4f76;
  border-color: #d2e2f7;
}

.status-badge--waiting {
  background: #e7efe7;
  color: #3e5b3f;
  border-color: #d6e4d6;
}

.status-badge--finalized {
  background: #edf0f5;
  color: #4f5f75;
  border-color: #dbe1ea;
}

.attention-label,
.attention-flag {
  font-size: 11px;
  color: #6a7a93;
}

.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  color: #344862;
  font-size: 13px;
}

.side-list li:last-child {
  border-bottom: 0;
}

.report-kpi {
  margin: 0;
  font-size: 30px;
  color: #243754;
  font-weight: 660;
}

.reports-modal {
  max-width: 640px;
}

.reports-modal-group h4 {
  margin: 0 0 8px;
  color: #31445f;
  font-size: 13px;
}

.reports-modal-group + .reports-modal-group {
  margin-top: 14px;
}

.reports-modal-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reports-modal-group li + li {
  margin-top: 8px;
}

.reports-modal-group label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #334762;
}

.reports-modal-group strong {
  display: block;
  font-size: 13px;
}

.reports-modal-group small {
  display: block;
  margin-top: 2px;
  color: #6e7e97;
  font-size: 12px;
}

.reports-copy-text {
  width: 100%;
  min-height: 190px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  color: #324560;
  background: #fbfcff;
}

@media (max-width: 1040px) {
  .report-layout-grid {
    grid-template-columns: 1fr;
  }

  .report-bar {
    align-items: stretch;
  }

  .report-bar__right {
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .status-tiles,
  .flow-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .report-custom-range {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .report-custom-range input,
  .report-scope-field,
  .report-scope-field select {
    width: 100%;
    min-width: 0;
  }

  .status-tiles,
  .flow-tiles {
    grid-template-columns: 1fr;
  }

  .attention-table li {
    flex-direction: column;
  }

  .attention-side {
    align-items: flex-start;
    min-width: 0;
  }
}

@media print {
  .report-bar,
  #reportsCustomizeModal,
  #reportsCopyModal {
    display: none !important;
  }

  .page--calm-reports-v2 {
    max-width: none;
  }

  .report-layout-grid {
    grid-template-columns: 1fr;
  }

  .report-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ===== Landing and Demo Layer ===== */
.auth-entry-page {
  background: #f4f4f2;
  color: #0f172a;
}

.auth-entry-shell {
  width: min(468px, calc(100% - 28px));
  margin: 0 auto;
  padding: 36px 0 48px;
}

.auth-entry-brand {
  margin-bottom: 18px;
}

.auth-entry-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.auth-entry-card h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  color: #0f172a;
}

.auth-entry-card > p {
  margin: 10px 0 0;
  color: #4b5563;
  line-height: 1.5;
}

.auth-entry-notice {
  margin-top: 14px;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 10px;
  background: rgba(247, 248, 249, 0.95);
  padding: 10px 12px;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.auth-entry-form {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.auth-entry-form label {
  font-size: 13px;
  color: #475569;
}

.auth-entry-form input {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(26, 26, 26, 0.14);
  background: #fff;
  color: #0f172a;
  padding: 0 12px;
  font-size: 14px;
}

.auth-entry-form input:focus {
  outline: none;
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.auth-entry-form button {
  margin-top: 2px;
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #d6e2ff;
  background: #e8f0fe;
  color: #2f5bd3;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.auth-entry-form button:hover {
  background: #dce8ff;
}

.auth-entry-switch {
  margin: 14px 0 0;
  font-size: 13px;
  color: #475569;
}

.auth-entry-switch a {
  color: #334155;
  text-underline-offset: 2px;
}

.landing-page {
  background: #f4f4f2;
  color: #0f172a;
}

.landing-shell {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 20px 0 56px;
  display: grid;
  gap: 0;
}

.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.landing-signin-link {
  color: #475569;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}

.landing-signin-link:hover {
  color: #334155;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #22314d;
}

.landing-brand-mark {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #DDB532;
  transform: translateY(1px);
  flex: 0 0 13px;
}

.landing-brand-text {
  font-size: 18px;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
  align-items: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.landing-hero-intro {
  max-width: 47ch;
}

.landing-hero-surface {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  padding-top: 0;
  margin-top: 0;
}

.landing-hero-board {
  width: min(100%, 920px);
  margin-left: auto;
  min-width: 0;
}

.landing-hero-board #board-items-section {
  margin: 0;
}

.landing-hero-board #tableWrap {
  margin-top: 0;
}

.landing-hero-board .table-wrap {
  margin-top: 0;
  border-color: var(--border);
  border-radius: 14px;
  box-shadow: none;
}

.landing-hero-board table {
  min-width: 700px;
}

.landing-hero-board .col-status {
  width: 18%;
}

.landing-hero-board col.col-updated,
.landing-hero-board th.col-updated,
.landing-hero-board td.updated-col {
  display: none;
}

.landing-hero-board .board-pagination-summary,
.landing-hero-board .board-pagination {
  display: none;
}

.landing-hero-board .row-menu {
  display: none;
}

.landing-hero-board td.item-cell .t {
  cursor: pointer;
  transition: color 120ms ease;
}

.landing-hero-board #board-items-tbody tr {
  cursor: pointer;
}

.landing-hero-board #board-items-tbody td {
  transition: background-color 120ms ease;
}

.landing-hero-board tbody tr:hover td {
  background: rgba(15, 23, 42, 0.045);
}

.landing-hero-board #board-items-tbody tr:focus-within td {
  background: rgba(15, 23, 42, 0.045);
}

.landing-hero-board #board-items-tbody tr:hover td.item-cell .t {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-hero-copy {
  padding: 2px 0 0;
  max-width: 52ch;
}

.landing-hero-copy h1 {
  margin: 0;
  font-size: clamp(32px, 4.1vw, 50px);
  line-height: 1.1;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.landing-hero-copy p {
  margin: 14px 0 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.48;
  max-width: 42ch;
}

.landing-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.landing-actions .btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  line-height: 1;
}

.landing-value-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 2px 4px 0;
}

.landing-value {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.landing-value h2 {
  margin: 0;
  font-size: 14px;
  color: #1f2937;
  font-weight: 650;
}

.landing-value p {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.52;
}

.landing-section {
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 18px;
  box-shadow: none;
}

.landing-section h2 {
  margin: 0;
  font-size: 22px;
  color: #0f172a;
}

.landing-section p {
  margin: 10px 0 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.56;
}

.landing-section--story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 640px);
  gap: 14px;
  align-items: start;
  padding: 20px 18px 18px;
}

.landing-section--interactive {
  padding: 0;
  border: 0;
  background: transparent;
}

.landing-interactive-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.landing-explain-toggle {
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: #4b5563;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.landing-explain-toggle:hover {
  background: #f5f6f7;
}

.landing-live-demo {
  position: relative;
}

.landing-live-surface {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.landing-live-grid {
  margin-top: 0;
}

.landing-live-grid > .item-history-panel {
  position: static;
  top: auto;
}

.landing-live-grid .item-history-panel__log {
  max-height: none;
}

.landing-explain-note {
  position: absolute;
  max-width: 246px;
  background: rgba(233, 239, 247, 0.96);
  border: 1px solid rgba(100, 116, 139, 0.30);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  color: #3f4d5f;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.42;
  padding: 9px 11px;
  z-index: 4;
  transition: opacity 240ms ease;
  opacity: 0;
  animation: landing-hint-appear 220ms ease forwards;
}

.landing-explain-note::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(233, 239, 247, 0.96);
  border-right: 1px solid rgba(100, 116, 139, 0.30);
  border-bottom: 1px solid rgba(100, 116, 139, 0.30);
  transform: rotate(45deg);
}

@keyframes landing-hint-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.landing-explain-note--waiting {
  background: rgba(224, 234, 246, 0.99);
  border-color: rgba(93, 116, 145, 0.42);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.11);
  color: #28384b;
  font-weight: 560;
  animation-delay: 0s;
}

.landing-explain-note--reason {
  animation-delay: 80ms;
}

.landing-explain-note--steps,
.landing-explain-note--history {
  background: rgba(235, 240, 247, 0.90);
  border-color: rgba(100, 116, 139, 0.25);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05);
  color: #516072;
  font-weight: 440;
  animation-delay: 170ms;
}

.landing-live-demo[data-explanations="hidden"] .landing-explain-note {
  opacity: 0;
  animation: none;
  pointer-events: none;
}

.landing-explain-note--tail-bottom::after {
  left: var(--tail-x, 20px);
  bottom: -6px;
}

.landing-explain-note--tail-top::after {
  left: 20px;
  top: -6px;
  transform: rotate(225deg);
}

.landing-explain-note--tail-left::after {
  left: -6px;
  top: var(--tail-y, 50%);
  transform: translateY(-50%) rotate(135deg);
}

.landing-explain-note--tail-right::after {
  right: -6px;
  top: var(--tail-y, 50%);
  transform: translateY(-50%) rotate(-45deg);
}

.landing-section--bridge {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 2px 2px;
}

.landing-bridge-copy {
  max-width: 70ch;
}

.landing-bridge-transition {
  margin-top: 12px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

.landing-section-kicker {
  margin: 0 0 6px;
  color: #6b7280;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.landing-section--waiting {
  background: #fff;
  border-color: rgba(26, 26, 26, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.landing-section--history {
  background: #fcfcfb;
  border-color: rgba(26, 26, 26, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.landing-section-copy {
  padding: 2px 2px 2px;
}

.landing-section-copy--story {
  max-width: 56ch;
}

.landing-section-preview {
  width: min(100%, 640px);
  margin-top: 0;
  justify-self: end;
  align-self: start;
}

.landing-section-preview--waiting {
  width: min(100%, 640px);
}

.landing-section-preview--history {
  width: min(100%, 560px);
}

.landing-preview-card {
  border-radius: 12px;
  overflow: clip;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(26, 26, 26, 0.05);
  background: rgba(255, 255, 255, 0.86);
  transition: transform 140ms ease, box-shadow 160ms ease, border-color 140ms ease;
}

.landing-preview-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.landing-preview-viewport {
  position: relative;
  background: transparent;
  padding: 8px;
}

.landing-preview-scene {
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.landing-preview-scene--board {
  padding: 8px;
  overflow: hidden;
}

.landing-board-mini__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.landing-board-mini__title {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
}

.landing-board-mini__readonly {
  font-size: 10px;
  color: #64748b;
}

.landing-board-mini__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.landing-board-mini__table th,
.landing-board-mini__table td {
  text-align: left;
  padding: 6px 7px;
  border-bottom: 1px solid #e7edf4;
  font-size: 11px;
  color: #475569;
  vertical-align: middle;
  line-height: 1.25;
}

.landing-board-mini__table th {
  font-weight: 600;
  color: #334155;
}

.landing-board-mini__table th:first-child,
.landing-board-mini__table td:first-child {
  width: 38%;
}

.landing-board-mini__table th:nth-child(2),
.landing-board-mini__table td:nth-child(2) {
  width: 24%;
}

.landing-board-mini__table th:nth-child(3),
.landing-board-mini__table td:nth-child(3) {
  width: 23%;
}

.landing-board-mini__table th:nth-child(4),
.landing-board-mini__table td:nth-child(4) {
  width: 15%;
  min-width: 64px;
}

.landing-board-mini__table th:nth-child(n + 2),
.landing-board-mini__table td:nth-child(n + 2) {
  white-space: nowrap;
}

.landing-board-mini__table td:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-board-mini__table tbody tr:last-child td {
  border-bottom: 0;
}

.landing-board-mini__item {
  color: #0f172a;
  font-weight: 500;
}

.landing-preview-scene--waiting {
  padding: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.landing-preview-scene--history {
  padding: 8px;
  max-height: 320px;
  position: relative;
  overflow: hidden;
}

.landing-preview-scene--history::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}

.landing-real-item-preview {
  padding: 0;
}

.landing-preview-scene--waiting .landing-real-item-preview {
  width: 100%;
}

.landing-preview-scene--waiting .item-panel--summary {
  margin: 0;
}

.landing-preview-scene--history .landing-real-item-preview {
  width: 100%;
}

.landing-preview-scene--history .item-panel--history {
  margin: 0;
}

.landing-preview-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(250, 250, 249, 0.82);
  color: #4b5563;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.landing-preview-card:hover,
.landing-preview-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  border-color: rgba(26, 26, 26, 0.12);
}

.landing-preview-trigger:hover .landing-preview-hint,
.landing-preview-trigger:focus-visible .landing-preview-hint,
.landing-preview-trigger:focus-within .landing-preview-hint {
  opacity: 0.8;
  transform: translateY(0);
}

.landing-preview-card--hero-board .landing-preview-viewport {
  padding: 8px 10px;
}

.landing-preview-card--waiting-item .landing-preview-viewport,
.landing-preview-card--history-item .landing-preview-viewport {
  padding: 6px;
}

.landing-preview-card--waiting-item {
  width: min(100%, 640px);
}

.landing-preview-card--waiting-item .landing-preview-trigger {
  width: 100%;
}

.landing-preview-card--history-item {
  width: min(100%, 560px);
}

.landing-preview-card--history-item .landing-preview-trigger {
  width: 100%;
}

.landing-pricing h2 {
  margin: 0;
  font-size: 24px;
  color: #0f172a;
}

.landing-pricing {
  scroll-margin-top: 24px;
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.landing-pricing.is-highlighted {
  background: rgba(37, 99, 235, 0.035);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.landing-pricing-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.landing-plan-card {
  padding: 14px;
  border-color: rgba(26, 26, 26, 0.07);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.landing-plan-card--solo {
  border-color: rgba(37, 99, 235, 0.16);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08);
}

.landing-plan-card h3 {
  margin: 0;
  font-size: 18px;
  color: #0f172a;
}

.landing-plan-card p {
  margin: 9px 0 0;
  color: #5b6471;
  font-size: 14px;
  line-height: 1.48;
}

.landing-plan-points {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.landing-plan-points li {
  position: relative;
  padding-left: 14px;
  color: #334155;
  font-size: 13px;
  line-height: 1.42;
}

.landing-plan-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.53em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.34);
}

.landing-plan-cta {
  margin-top: 17px;
  height: auto;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

.landing-plan-cta--solo {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.landing-plan-cta--solo:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.landing-plan-cta--team {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: #334155;
}

.landing-plan-cta--team:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.2);
  color: #1f2937;
}

.landing-plan-compare {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows 260ms ease, opacity 220ms ease, transform 220ms ease;
}

.landing-pricing.is-comparison-expanded .landing-plan-compare {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.landing-plan-compare-list {
  overflow: hidden;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.landing-plan-compare-list li {
  font-size: 13px;
  line-height: 1.4;
  color: #334155;
}

.landing-plan-compare-list li.is-positive {
  color: #1f2937;
}

.landing-plan-compare-list li.is-negative {
  color: #64748b;
}

.landing-final-cta {
  padding: 18px;
  border-color: rgba(26, 26, 26, 0.07);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025);
}

.landing-final-cta h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.18;
  color: #0f172a;
}

.landing-final-cta p {
  margin: 12px 0 0;
  color: #4b5563;
  line-height: 1.52;
}

.landing-shell > .landing-hero {
  margin-top: 12px;
}

.landing-shell > .landing-value-strip {
  margin-top: 30px;
}

.landing-shell > .landing-section--bridge {
  margin-top: 44px;
}

.landing-shell > .landing-section--waiting {
  margin-top: 76px;
}

.landing-shell > .landing-section--interactive {
  margin-top: 42px;
}

.landing-shell > .landing-pricing {
  margin-top: 80px;
}

.landing-shell > .landing-final-cta {
  margin-top: 70px;
}

body.landing-modal-open {
  overflow: hidden;
}

.landing-modal__dialog {
  width: min(1100px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
}

.landing-modal__body {
  padding: 0;
}

.landing-modal__frame {
  width: 100%;
  height: min(72vh, 720px);
  border: 0;
  background: #fff;
}

.landing-modal__dialog--hero-board .landing-modal__frame {
  height: min(64vh, 570px);
}

.landing-modal__dialog--waiting-item .landing-modal__frame {
  height: min(72vh, 700px);
}

.landing-modal__dialog--history-item .landing-modal__frame {
  height: min(66vh, 610px);
}

.landing-demo-page {
  margin: 0;
  background: #f8fafc;
  color: #1f2937;
}

.landing-demo-page--embed {
  background: #fff;
}

.landing-demo-shell {
  width: min(1060px, calc(100% - 20px));
  margin: 0 auto;
  padding: 10px 0;
}

.landing-demo-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.landing-demo-header h1 {
  margin: 0;
  font-size: 20px;
  color: #0f172a;
}

.landing-demo-header p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.landing-demo-screen {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}

.landing-demo-screen__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.landing-demo-table-wrap {
  margin-top: 0;
  border: 0;
  border-radius: 0;
}

.landing-demo-item-meta {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.landing-demo-steps {
  padding: 10px 12px 12px;
}

.landing-demo-history-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px 12px;
  display: grid;
  gap: 8px;
}

.landing-demo-history-row {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.landing-demo-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.landing-demo-history-content strong {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #0f172a;
}

.landing-demo-history-content p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #475569;
}

/* Demo embed focus modes for landing previews */
.public-board-view.demo-embed .header,
.public-view.demo-embed #publicItemPage > .header,
.public-view.demo-embed #publicItemPage .top-actions,
.public-view.demo-embed #publicItemPage .print-meta {
  display: none;
}

.public-board-view.demo-embed .container,
.public-view.demo-embed #publicItemPage.container {
  max-width: none;
  padding: 4px 8px 8px;
}

.public-board-view.demo-embed .card-inner {
  padding: 8px;
}

.public-board-view.demo-embed.demo-view-preview-board #filters,
.public-board-view.demo-embed.demo-view-preview-board .board-pagination-summary,
.public-board-view.demo-embed.demo-view-preview-board .board-pagination {
  display: none;
}

.public-board-view.demo-embed.demo-view-preview-board #tableWrap {
  margin-top: 0;
}

.public-board-view.demo-embed.demo-view-preview-board .card {
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: none;
}

.public-board-view.demo-embed.demo-view-preview-board td,
.public-board-view.demo-embed.demo-view-preview-board th {
  padding-top: 8px;
  padding-bottom: 8px;
}

.public-view.demo-embed .item-grid {
  gap: 8px;
}

.public-view.demo-embed.demo-view-preview-waiting .item-grid,
.public-view.demo-embed.demo-view-preview-history .item-grid {
  grid-template-columns: minmax(0, 1fr);
}

.public-view.demo-embed.demo-view-preview-waiting .item-grid > .card:last-child {
  display: none;
}

.public-view.demo-embed.demo-view-preview-history .item-grid > .card:first-child {
  display: none;
}

.public-view.demo-embed.demo-view-preview-history .item-history-panel__log {
  max-height: none;
}

.public-view.demo-embed .item-preview-scene {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #ffffff;
  padding: 8px 9px;
}

.public-view.demo-embed .item-preview-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.public-view.demo-embed .item-preview-summary-title {
  font-size: 13px;
  font-weight: 650;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-view.demo-embed .item-preview-waiting-reason {
  margin-top: 7px;
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.09);
  padding: 6px 8px;
}

.public-view.demo-embed .item-preview-waiting-reason:nth-of-type(n + 2) {
  display: none;
}

.public-view.demo-embed .item-preview-waiting-reason__label {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(120, 53, 15, 0.8);
  letter-spacing: 0.03em;
}

.public-view.demo-embed .item-preview-waiting-reason__value {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.32;
  color: #7c2d12;
}

.public-view.demo-embed .item-preview-steps {
  margin-top: 7px;
  display: grid;
  gap: 5px;
}

.public-view.demo-embed .item-preview-step {
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 9px;
  background: #f8fafc;
  padding: 5px 7px;
}

.public-view.demo-embed .item-preview-step__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.public-view.demo-embed .item-preview-step__label {
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-view.demo-embed .item-preview-step__context {
  margin-top: 3px;
  display: grid;
  gap: 2px;
}

.public-view.demo-embed .item-preview-step__context-line {
  font-size: 10px;
  color: #64748b;
}

.public-view.demo-embed .item-preview-step:not(.is-expanded) .item-preview-step__context {
  display: none;
}

.public-view.demo-embed .item-preview-scene--history {
  padding-top: 6px;
  padding-bottom: 6px;
}

.public-view.demo-embed .item-preview-history-list {
  display: grid;
  gap: 5px;
}

.public-view.demo-embed .item-preview-history-row {
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  background: #f8fafc;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  column-gap: 8px;
}

.public-view.demo-embed .item-preview-history-row__when {
  font-size: 10px;
  color: rgba(100, 116, 139, 0.82);
  line-height: 1.25;
}

.public-view.demo-embed .item-preview-history-row__what {
  min-width: 0;
}

.public-view.demo-embed .item-preview-history-row__message {
  font-size: 12px;
  color: #1e293b;
  line-height: 1.3;
}

.public-view.demo-embed .item-preview-history-row__meta {
  margin-top: 1px;
  font-size: 10px;
  color: #64748b;
}

.public-view.demo-embed .item-preview-history-row:nth-of-type(n + 5) {
  display: none;
}

@media (max-width: 980px) {
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .landing-section--story {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .landing-value-strip,
  .landing-pricing-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-shell > .landing-value-strip,
  .landing-shell > .landing-section--bridge,
  .landing-shell > .landing-section--interactive,
  .landing-shell > .landing-pricing,
  .landing-shell > .landing-final-cta {
    margin-top: 36px;
  }

  .landing-interactive-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-live-surface {
    padding: 0;
  }

  .landing-explain-note {
    position: static;
    max-width: none;
    margin-top: 8px;
  }

  .landing-preview-viewport {
    padding: 9px;
  }

  .landing-section-preview,
  .landing-section-preview--waiting,
  .landing-section-preview--history,
  .landing-preview-card--waiting-item,
  .landing-preview-card--history-item {
    width: 100%;
    justify-self: stretch;
  }

  .landing-preview-card--hero-board .landing-preview-viewport {
    padding: 10px;
  }

  .landing-preview-card--waiting-item .landing-preview-viewport,
  .landing-preview-card--history-item .landing-preview-viewport {
    padding: 7px;
  }
}