/*
  CHELABS Unified UI v2 — components
  Version: 2.5.0

  Core components are ported from
  docs/design-system/v2-reference/chelabs-ui.css; the editor and uploader
  below follow the approved 2026-09-29 CHELABS UI handoff. Every colour, shadow
  and structural size is a token from tokens.css; the remaining px
  literals are the reference's own internal paddings and type sizes.

  Only components with a real consumer exist here (ADR-006's "no CSS
  ahead of a consumer" rule is kept under v2 — the contract test fails
  on a class no template uses). Not ported for that reason: the
  reference's tabs, count pill, toggle switch, chart, stat cards,
  billing / referral / pricing blocks, project-row list and the
  select-like chip — none has a Control Plane consumer today. Add a
  component together with the first screen that needs it.

  Variants are named by meaning, not by colour, so that a product can
  never pick "orange" for a success: .success / .warning / .danger /
  .accent map onto the reference's .green / .orange / .red / .purple.
*/

/* ============= BUTTONS ============= */
.chelabs-btn {
  height: var(--cl-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: var(--cl-r-btn);
  background: var(--cl-gradient);
  color: var(--cl-on-accent);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--cl-shadow-btn);
  transition: transform var(--cl-fast), box-shadow var(--cl-fast), filter var(--cl-fast), background var(--cl-fast), color var(--cl-fast);
}
.chelabs-btn:hover { transform: translateY(-1px); box-shadow: var(--cl-shadow-brand-glow); filter: saturate(1.03); }
.chelabs-btn:active { transform: translateY(0); box-shadow: var(--cl-shadow-btn-active); }
.chelabs-btn.secondary {
  background: var(--cl-surface);
  color: var(--cl-ink);
  border-color: var(--cl-line);
  box-shadow: var(--cl-shadow-secondary);
}
.chelabs-btn.secondary:hover { background: var(--cl-surface-soft); box-shadow: var(--cl-shadow-secondary-hover); }
.chelabs-btn.ghost {
  background: transparent;
  color: var(--cl-ghost-text);
  border-color: transparent;
  box-shadow: none;
}
.chelabs-btn.ghost:hover { background: var(--cl-nav-hover-bg); color: var(--cl-nav-hover); box-shadow: none; transform: none; }
/* Destructive actions only (revoke, archive, purge, regenerate). The
   reference defines no destructive button; this is its .badge.red
   treatment applied to the button shape — the same red the reference
   uses for anything alarming, without the primary's purple shadow. */
.chelabs-btn.danger {
  background: var(--cl-badge-red-bg);
  color: var(--cl-red);
  border-color: transparent;
  box-shadow: none;
}
.chelabs-btn.danger:hover { background: var(--cl-red-soft); box-shadow: var(--cl-shadow-secondary-hover); }
.chelabs-btn.small {
  height: var(--cl-control-h-sm);
  padding: 0 15px;
  border-radius: var(--cl-r-btn-sm);
  font-size: 13px;
}
.chelabs-btn.block { width: 100%; }
.chelabs-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}
/* last, so it outranks the variant :hover rules of equal specificity */
.chelabs-btn[disabled]:hover { transform: none; box-shadow: none; filter: none; background: var(--cl-gradient); color: var(--cl-on-accent); }
.chelabs-btn.secondary[disabled]:hover { background: var(--cl-surface); color: var(--cl-ink); }
.chelabs-btn.ghost[disabled]:hover { background: transparent; color: var(--cl-ghost-text); }
.chelabs-btn.danger[disabled]:hover { background: var(--cl-badge-red-bg); color: var(--cl-red); }
.chelabs-btn .icon { width: 18px; height: 18px; stroke-width: 1.9; }

/* ============= CARDS ============= */
.chelabs-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-card-line);
  border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-shadow-card);
  padding: var(--cl-card-pad);
  min-width: 0;
}
.chelabs-card[data-density="compact"] { padding: var(--cl-card-pad-compact); }
.chelabs-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--cl-card-head-line);
}
.chelabs-card-head:not(:first-child) { margin-top: 28px; }
.chelabs-card-head h2 {
  margin: 0;
  color: var(--cl-ink);
  font-size: var(--cl-text-card-title);
  font-weight: 730;
  letter-spacing: -.015em;
}
.chelabs-card-subtitle { color: var(--cl-muted); font-size: 13px; margin-top: 5px; font-weight: 500; }
.chelabs-card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chelabs-card-actions form { margin: 0; }

/* ============= BADGES ============= */
.chelabs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--cl-r-badge);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  background: var(--cl-gray-soft);
  color: var(--cl-th-text);
}
.chelabs-badge.accent { background: var(--cl-badge-accent-bg); color: var(--cl-badge-accent-text); }
.chelabs-badge.success { background: var(--cl-badge-green-bg); color: var(--cl-badge-green-text); }
.chelabs-badge.warning { background: var(--cl-badge-orange-bg); color: var(--cl-badge-orange-text); }
.chelabs-badge.danger { background: var(--cl-badge-red-bg); color: var(--cl-badge-red-text); }

/* ============= FORMS ============= */
.chelabs-form-row { margin-bottom: 18px; min-width: 0; }
.chelabs-form-row label,
.chelabs-form-row .label {
  display: block;
  margin-bottom: 8px;
  color: var(--cl-label);
  font-size: 13px;
  font-weight: 650;
}
.chelabs-input, .chelabs-select, .chelabs-textarea {
  width: 100%;
  height: var(--cl-input-h);
  border: 1px solid var(--cl-input-line);
  border-radius: var(--cl-r-btn);
  background: var(--cl-surface);
  padding: 0 14px;
  color: var(--cl-td-text);
  box-shadow: var(--cl-shadow-input);
  outline: none;
  transition: border-color var(--cl-fast), box-shadow var(--cl-fast);
}
.chelabs-input::placeholder, .chelabs-textarea::placeholder { color: var(--cl-placeholder); }
.chelabs-input:focus, .chelabs-select:focus, .chelabs-textarea:focus {
  border-color: var(--cl-input-focus-line);
  box-shadow: var(--cl-input-focus-ring);
}
.chelabs-input:disabled, .chelabs-select:disabled, .chelabs-textarea:disabled {
  background: var(--cl-input-disabled-bg);
  color: var(--cl-input-disabled-text);
  cursor: not-allowed;
}
.chelabs-input.is-error, .chelabs-select.is-error, .chelabs-textarea.is-error { border-color: var(--cl-red); }
.chelabs-textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.chelabs-select {
  appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--cl-muted) 50%), linear-gradient(135deg, var(--cl-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.chelabs-code-input {
  letter-spacing: .36em;
  font-size: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chelabs-form-error { font-size: 13px; color: var(--cl-red); margin: 8px 0 0; font-weight: 600; }
.chelabs-hint { font-size: 13px; color: var(--cl-muted); margin: 12px 0 0; line-height: 1.55; }
.chelabs-hint a, .chelabs-form-error a { color: var(--cl-link); font-weight: 650; }
.chelabs-caption { display: block; color: var(--cl-caption); font-size: 12px; margin-top: 3px; font-weight: 500; }

/* an inline row of fields + submit (filters, short actions) */
.chelabs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin: 0;
}
.chelabs-filters .chelabs-form-row { margin-bottom: 0; min-width: 240px; flex: 1 1 240px; }
.chelabs-filters .chelabs-textarea { min-height: 0; }
.chelabs-filters .chelabs-btn { flex: 0 0 auto; }
.chelabs-filters + .chelabs-filters,
.chelabs-hint + .chelabs-filters,
.chelabs-form-error + .chelabs-filters,
.chelabs-table-wrap + .chelabs-filters { margin-top: 18px; }
.chelabs-hint + .chelabs-table-wrap,
.chelabs-form-error + .chelabs-table-wrap,
.chelabs-field-row + .chelabs-table-wrap { margin-top: 16px; }
.chelabs-actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0; }
.chelabs-actions-row:first-child { margin-top: 0; }
.chelabs-actions-row form { margin: 0; }

/* ============= KEY / VALUE ROWS (the reference's .info-row) ============= */
.chelabs-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 8px 0;
}
.chelabs-field-row + .chelabs-field-row { border-top: 1px solid var(--cl-row-line); }
.chelabs-field-row > .label { color: var(--cl-info-key); flex: 0 0 auto; }
.chelabs-value {
  color: var(--cl-info-value);
  font-weight: 700;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.chelabs-value.empty { color: var(--cl-muted); font-weight: 500; }
.chelabs-value.danger { color: var(--cl-red); }
.chelabs-value a { color: var(--cl-link); }
.chelabs-value a:hover { color: var(--cl-brand-text-hover); }
.chelabs-value .chelabs-caption { text-align: right; }

/* ============= MESSAGES / NOTICES ============= */
.chelabs-message {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 17px 19px;
  border: 1px solid var(--cl-brand-line);
  border-radius: var(--cl-r-notice);
  background: var(--cl-brand-soft-2);
  color: var(--cl-brand-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.chelabs-message .icon { font-weight: 800; flex: 0 0 auto; }
.chelabs-message a { color: inherit; font-weight: 700; text-decoration: underline; }
.chelabs-message.success { border-color: var(--cl-green-soft); background: var(--cl-green-soft); color: var(--cl-message-success-text); }
.chelabs-message.success .icon { color: var(--cl-green); }
.chelabs-message.warning { border-color: var(--cl-notice-line); background: var(--cl-notice-bg); color: var(--cl-notice-text); }
.chelabs-message.warning strong { color: var(--cl-notice-strong); }
.chelabs-message.error { border-color: var(--cl-red-soft); background: var(--cl-red-soft); color: var(--cl-message-error-text); }
.chelabs-message.error .icon { color: var(--cl-red); }

/* ============= TABLES ============= */
/* The wrap bleeds to the card's edges (the reference's .table-card has
   the table flush with the card) and scrolls horizontally on narrow
   screens instead of breaking the layout. */
.chelabs-table-wrap {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--cl-card-pad));
}
.chelabs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.chelabs-table th {
  padding: 13px 16px;
  text-align: left;
  color: var(--cl-th-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .035em;
  font-weight: 700;
  border-bottom: 1px solid var(--cl-th-line);
}
.chelabs-table td {
  padding: 17px 16px;
  color: var(--cl-td-text);
  font-size: 14px;
  border-bottom: 1px solid var(--cl-td-line);
  vertical-align: middle;
}
.chelabs-table th:first-child, .chelabs-table td:first-child { padding-left: var(--cl-card-pad); }
.chelabs-table th:last-child, .chelabs-table td:last-child { padding-right: var(--cl-card-pad); }
.chelabs-table tbody tr:last-child td { border-bottom: 0; }
.chelabs-table tbody tr { transition: background var(--cl-fast); }
.chelabs-table tbody tr:hover { background: var(--cl-row-hover); }
.chelabs-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chelabs-table td.right { text-align: right; }
.chelabs-table td.right form { display: inline-flex; justify-content: flex-end; }
.chelabs-table td a { color: var(--cl-link); font-weight: 700; }
.chelabs-table td a:hover { color: var(--cl-brand-text-hover); }
.chelabs-table td b { color: var(--cl-strong-text); }
.chelabs-table td a b { color: inherit; }
.chelabs-table .chelabs-caption { margin-top: 3px; }
/* an inline action form inside a cell stays compact and right-aligned */
.chelabs-table td.right .chelabs-filters { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
.chelabs-table .chelabs-form-row { min-width: 0; flex: 0 0 160px; }
.chelabs-table .chelabs-form-row .chelabs-input { height: var(--cl-control-h-sm); }

/* ============= PAGINATION ============= */
.chelabs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--cl-muted);
}
.chelabs-pager > span:last-child { display: inline-flex; gap: 8px; }

/* ============= EMPTY STATE ============= */
.chelabs-empty {
  text-align: center;
  padding: 56px var(--cl-card-pad);
  background: var(--cl-surface);
  border: 1px dashed var(--cl-line-strong);
  border-radius: var(--cl-r-lg);
}
.chelabs-empty h3 { font-size: 20px; font-weight: 730; color: var(--cl-ink); letter-spacing: -.015em; margin: 0 0 8px; }
.chelabs-empty p { color: var(--cl-muted); font-size: 15px; margin: 0 auto 20px; max-width: 46ch; line-height: 1.55; }
.chelabs-empty form { margin: 0; }

/* ============= SECRET / CODE BLOCK ============= */
.chelabs-secret {
  display: block;
  padding: 16px 18px;
  margin: 16px 0;
  font-family: var(--cl-font-mono);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
  background: var(--cl-page);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-sm);
  color: var(--cl-ink);
}

/* ============= AVATAR ============= */
.chelabs-avatar {
  width: var(--cl-avatar-size);
  height: var(--cl-avatar-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cl-brand-soft);
  color: var(--cl-avatar-text);
  font-weight: 750;
  font-size: 14px;
}

/* ============= TABS =============
   Ported from the reference's .tabs / .tab / .count-pill, which DS-02
   left out for want of a consumer. The consumer is the entity page:
   one top-level record, its related entities in tabs (the approved
   ui-reference/02_entity_tabs.png).

   Tabs here are LINKS, not a JavaScript widget. Each tab is a real URL,
   so a tab can be shared, bookmarked and opened in a new window, the
   back button works. The bounded 2.4.0 modules do not change tab state. */
.chelabs-tabs {
  display: flex;
  align-items: center;
  gap: var(--cl-tabs-gap);
  padding: 0 var(--cl-card-pad);
  border-bottom: 1px solid var(--cl-th-line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.chelabs-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 18px 0 14px;
  color: var(--cl-tab-text);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: color var(--cl-fast);
}
.chelabs-tab:hover { color: var(--cl-brand-text); }
.chelabs-tab.active { color: var(--cl-tab-active-text); }
.chelabs-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--cl-tab-underline-h);
  background: var(--cl-brand);
  border-radius: var(--cl-r-pill);
}
.chelabs-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: var(--cl-pill-size);
  height: var(--cl-pill-size);
  padding: 0 6px;
  border-radius: var(--cl-r-pill);
  background: var(--cl-pill-bg);
  color: var(--cl-pill-text);
  font-size: 11px;
  font-weight: 800;
}
.chelabs-tab.active .chelabs-tab-count {
  background: var(--cl-brand-soft);
  color: var(--cl-brand-text);
}

/* ============= SEARCH =============
   The reference's .search: a bordered box with a leading glyph and a
   borderless input inside it, so the glyph is part of the field rather
   than sitting next to it. */
.chelabs-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 380px;
  max-width: 100%;
  height: var(--cl-search-h);
  padding: 0 15px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-search-line);
  border-radius: var(--cl-r-nav);
  color: var(--cl-search-icon);
}
.chelabs-search:focus-within {
  border-color: var(--cl-input-focus-line);
  box-shadow: var(--cl-input-focus-ring);
}
.chelabs-search .icon { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.9; }
.chelabs-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cl-text);
  font: inherit;
}
.chelabs-search input::placeholder { color: var(--cl-placeholder); }

/* ============= AN ICON-LED CELL =============
   The Registry Pattern's identity column (icon/logo/avatar + name) and
   the change history's "Раздел" column are the same shape, so they are
   one class rather than two that drift apart. */
.chelabs-cell-lead {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* The label rides on ONE line and truncates. Letting it wrap makes a
     narrow column break "Root Owner" across two lines and pushes the
     row taller than its neighbours, which reads as a rendering fault
     rather than as a long name. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chelabs-cell-lead .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--cl-brand-text);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============= BEFORE -> AFTER =============
   The change history's two value columns, per the approved
   ui-reference/03_change_history.png. A value is a chip so that an
   empty string, a space and a missing value are visibly different
   things rather than three kinds of nothing.

   `.before` is neutral and `.after` carries the brand tint: the eye
   should land on what the value BECAME, which is what the row is
   about. A value that is itself a status uses .chelabs-badge instead,
   because its own semantic colour carries more than the position. */
/* NOWRAP, and this is load-bearing rather than tidy. Wrapping put the
   arrow on one line and the value it points at on the next, which
   reads as a broken cell instead of as a change. A long value
   truncates instead -- the row says WHICH field changed, and the full
   value belongs to the record, not to the log line. */
.chelabs-diff { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.chelabs-diff-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--cl-r-xs);
  font-size: 13px;
  font-weight: 600;
}
.chelabs-diff-value.before { background: var(--cl-pill-bg); color: var(--cl-td-text); }
.chelabs-diff-value.after { background: var(--cl-brand-soft); color: var(--cl-brand-text); }
.chelabs-diff-value.empty { background: transparent; color: var(--cl-muted); font-weight: 500; }
.chelabs-diff-arrow { color: var(--cl-diff-arrow); flex: 0 0 auto; }

/* ============= A GROUP OF SETTINGS =============
   The approved ui-reference/04_settings.png: settings are grouped into
   semantic cards, and inside a card the fields lay out in columns
   rather than one long single-file form. Each field keeps its label,
   its control and its helper text together. */
.chelabs-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px var(--cl-gap);
  align-items: start;
}
.chelabs-form-grid .chelabs-form-row { margin-bottom: 0; }
.chelabs-form-grid .chelabs-hint { margin-top: 7px; }
/* A field that needs the full width of the group (a description, a
   reason) rather than one column of it. */
.chelabs-form-grid .chelabs-form-row.wide { grid-column: 1 / -1; }

/* ============= RESPONSIVE ============= */
@media (max-width: 640px) {
  .chelabs-table { min-width: 720px; }
  .chelabs-filters .chelabs-form-row { min-width: 100%; }
  .chelabs-tabs { gap: 22px; padding: 0 18px; }
  .chelabs-form-grid { grid-template-columns: 1fr; }
  .chelabs-field-row { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 12px 0; }
  .chelabs-value { text-align: left; }
  .chelabs-value .chelabs-caption { text-align: left; }
}

/* CHELABS rich text editor and image uploader: reusable, theme driven controls. */
.chelabs-editor {
  border: 1px solid var(--cl-input-line);
  border-radius: var(--cl-r-lg);
  background: var(--cl-surface);
  overflow: hidden;
}
.chelabs-editor:focus-within { border-color: var(--cl-input-focus-line); box-shadow: var(--cl-input-focus-ring); }
.chelabs-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cl-line);
}
.chelabs-editor-tool {
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--cl-r-btn-sm);
  background: transparent;
  color: var(--cl-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.chelabs-editor-tool:hover, .chelabs-editor-tool.active { background: var(--cl-brand-soft); color: var(--cl-brand-text); }
.chelabs-editor-tool:focus-visible, .chelabs-upload-remove:focus-visible,
.chelabs-upload-add:focus-visible { outline: 2px solid var(--cl-brand); outline-offset: 2px; }
.chelabs-editor-tool:disabled { opacity: .4; cursor: not-allowed; }
.chelabs-editor-separator { width: 1px; height: 24px; margin: 0 4px; background: var(--cl-line-strong); }
.chelabs-editor-emoji { padding: 6px 10px; border-bottom: 1px solid var(--cl-line); }
.chelabs-editor-surface { min-height: 210px; padding: 16px; color: var(--cl-text); font-size: 16px; }
.chelabs-editor-surface .tiptap { min-height: 178px; outline: none; white-space: pre-wrap; }
.chelabs-editor-surface .tiptap p { margin: 0 0 8px; }
.chelabs-editor-surface .tiptap blockquote { border-left: 3px solid var(--cl-brand); margin: 8px 0; padding-left: 12px; }
.chelabs-editor-surface .tiptap code, .chelabs-editor-surface .tiptap pre { font-family: var(--cl-font-mono); }
.chelabs-editor-surface .tiptap tg-spoiler { background: var(--cl-brand-soft); }
.chelabs-editor-footer { display: flex; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--cl-line); color: var(--cl-muted); font-size: 13px; }
.chelabs-editor-footer .is-error { color: var(--cl-red); font-weight: 700; }
.chelabs-editor > .chelabs-textarea { border: 0; border-radius: 0; box-shadow: none; }
.chelabs-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 30px 20px;
  border: 2px dashed var(--cl-line-strong);
  border-radius: var(--cl-r-lg);
  background: var(--cl-surface);
  color: var(--cl-muted);
  text-align: center;
}
.chelabs-upload-drop.drag-over { border-color: var(--cl-brand); background: var(--cl-brand-soft-2); }
.chelabs-upload-drop strong { color: var(--cl-ink); }
.chelabs-upload-drop .chelabs-btn { margin-top: 10px; }
.chelabs-upload-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: var(--cl-r-btn); background: var(--cl-brand-soft); color: var(--cl-brand-text); font-size: 24px; }
.chelabs-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.chelabs-upload-card, .chelabs-upload-add { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg); background: var(--cl-surface); }
.chelabs-upload-card[draggable="true"] { cursor: grab; }
.chelabs-upload-card.is-error { border-color: var(--cl-red); }
.chelabs-upload-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--cl-line); background: var(--cl-page); }
.chelabs-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.chelabs-upload-meta { display: grid; gap: 4px; padding: 12px; font-size: 12px; color: var(--cl-muted); }
.chelabs-upload-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 24px; color: var(--cl-text); font-size: 14px; }
.chelabs-upload-card.is-error .chelabs-upload-meta span { color: var(--cl-red); }
.chelabs-upload-remove { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn-sm); background: var(--cl-surface); color: var(--cl-ink); font-size: 20px; cursor: pointer; }
.chelabs-upload-add { min-height: 170px; border-style: dashed; color: var(--cl-brand-text); font: inherit; font-weight: 700; cursor: pointer; }
.chelabs-upload-add:hover { background: var(--cl-brand-soft-2); border-color: var(--cl-brand-line); }
.chelabs-upload-summary { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--cl-muted); font-size: 13px; }
.chelabs-editor-toolbar[hidden], .chelabs-editor-emoji[hidden], .chelabs-editor-surface[hidden],
.chelabs-upload-drop[hidden], .chelabs-upload-grid[hidden], .chelabs-upload-summary[hidden] { display: none; }

/* ============= REPORT REGISTER =============
   Dense, source-linked management reporting. The page never grows sideways:
   long work narratives scroll inside the table, with the first two columns
   and header fixed as orientation anchors. */
.chelabs-report-eyebrow {
  margin: 0 0 6px;
  color: var(--cl-brand-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.chelabs-report-search {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--cl-input-line);
  border-radius: 8px;
  background: var(--cl-surface);
}
.chelabs-report-search:focus-within {
  border-color: var(--cl-input-focus-line);
  box-shadow: var(--cl-input-focus-ring);
}
.chelabs-report-search input[type="search"] {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
}
.chelabs-report-search .icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chelabs-report-search .shortcut {
  color: var(--cl-muted-2);
  font-size: 10px;
  white-space: nowrap;
}
.chelabs-report-search-submit {
  display: none;
}
.chelabs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 6px 9px;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-pill);
  background: var(--cl-surface-soft);
  color: var(--cl-muted);
  font-size: 10.5px;
  line-height: 1.2;
}
.chelabs-filter-chip a { color: var(--cl-muted); font-size: 15px; line-height: 11px; }
.chelabs-report-filter-panel {
  align-items: stretch;
  gap: 0;
  margin: 12px calc(-1 * var(--cl-card-pad-compact)) calc(-1 * var(--cl-card-pad-compact));
  border-top: 1px solid var(--cl-line);
  overflow: hidden;
}
.chelabs-report-filter-panel > .chelabs-filter-presets {
  padding: 15px 11px;
  border-right: 1px solid var(--cl-line);
  background: var(--cl-surface-soft);
}
.chelabs-report-filter-panel .chelabs-filter-presets h2,
.chelabs-report-filter-panel .chelabs-filter-presets h3 {
  margin: 0 10px 10px;
  color: var(--cl-muted);
  font-size: 11px;
}
.chelabs-report-preset {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--cl-text);
  font-size: 12px;
  line-height: 1.25;
}
.chelabs-report-preset:hover { background: var(--cl-surface); }
.chelabs-report-preset.active {
  background: var(--cl-brand-soft);
  color: var(--cl-brand-text);
  font-weight: 750;
}
.chelabs-report-preset span {
  display: block;
  margin-top: 2px;
  color: var(--cl-muted);
  font-size: 10px;
  font-weight: 500;
}
.chelabs-report-filter-form { padding: 15px 17px 14px; }
.chelabs-report-filter-section + .chelabs-report-filter-section {
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px solid var(--cl-line);
}
.chelabs-report-filter-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.chelabs-report-filter-section-head h2 { margin: 0; font-size: 12px; }
.chelabs-report-filter-section-head span { color: var(--cl-muted); font-size: 10px; }
.chelabs-report-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 13px;
}
.chelabs-report-date-box {
  padding: 10px 11px 12px;
  border: 1px solid var(--cl-line);
  border-radius: 9px;
  background: var(--cl-surface-soft);
}
.chelabs-report-date-box.focus {
  border-color: var(--cl-brand-line);
  background: var(--cl-brand-soft-2);
}
.chelabs-report-date-box > strong { display: block; margin-bottom: 9px; font-size: 11px; }
.chelabs-report-date-box > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.chelabs-report-date-box .chelabs-form-row { margin: 0; }
.chelabs-report-date-box .chelabs-form-row label { margin-bottom: 4px; color: var(--cl-muted); font-size: 10px; }
.chelabs-report-date-box .chelabs-input { height: 35px; padding-inline: 10px; border-radius: 7px; font-size: 11px; }
.chelabs-report-filter-form > .chelabs-form-grid { gap: 10px 13px; }
.chelabs-report-filter-form > .chelabs-form-grid .chelabs-input,
.chelabs-report-filter-form > .chelabs-form-grid .chelabs-select { height: 37px; }
.chelabs-report-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
}
.chelabs-report-filter-actions .chelabs-hint { margin: 0 auto 0 0; }
.chelabs-report-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 1px;
  color: var(--cl-muted);
  font-size: 12px;
}
.chelabs-report-context strong { color: var(--cl-text); }
.chelabs-report-context .source { margin-left: auto; color: var(--cl-muted-2); font-size: 10px; }
.chelabs-report-table-card { padding: 0; overflow: hidden; }
.chelabs-report-table-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--cl-line);
}
.chelabs-report-table-head h2 { margin: 0; font-size: 14px; }
.chelabs-report-table-head .meta { color: var(--cl-muted); font-size: 10px; }
.chelabs-report-table-head .push { flex: 1; }
.chelabs-report-table-scroll {
  width: 100%;
  min-height: 235px;
  max-height: calc(100vh - 303px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.chelabs-report-table {
  width: 2120px;
  min-width: 2120px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.chelabs-report-table col.task { width: 326px; }
.chelabs-report-table col.link { width: 124px; }
.chelabs-report-table col.person { width: 155px; }
.chelabs-report-table col.status { width: 145px; }
.chelabs-report-table col.done { width: 398px; }
.chelabs-report-table col.remaining { width: 374px; }
.chelabs-report-table col.blockers { width: 402px; }
.chelabs-report-table col.deadline { width: 196px; }
.chelabs-report-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 44px;
  padding: 0 13px;
  border-bottom: 1px solid var(--cl-line);
  background: var(--cl-surface-soft);
  color: var(--cl-th-text);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .035em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
}
.chelabs-report-table td {
  padding: 13px;
  border-bottom: 1px solid var(--cl-td-line);
  background: var(--cl-surface);
  vertical-align: top;
  font-size: 12px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}
.chelabs-report-table th:nth-child(1),
.chelabs-report-table td:nth-child(1) { position: sticky; left: 0; z-index: 5; }
.chelabs-report-table th:nth-child(2),
.chelabs-report-table td:nth-child(2) {
  position: sticky;
  left: 326px;
  z-index: 5;
  box-shadow: 1px 0 var(--cl-line);
}
.chelabs-report-table th:nth-child(1),
.chelabs-report-table th:nth-child(2) { z-index: 7; background: var(--cl-surface-soft); }
.chelabs-report-table tbody tr:hover td { background: var(--cl-row-hover); }
.chelabs-report-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}
.chelabs-report-sort:hover { color: var(--cl-brand-text); }
.chelabs-report-sort:focus-visible {
  outline: 2px solid var(--cl-brand);
  outline-offset: 3px;
  border-radius: var(--cl-r-xs);
}
.chelabs-report-sort-indicator {
  color: var(--cl-muted-2);
  font-size: 13px;
  line-height: 1;
}
.chelabs-report-table th[aria-sort="ascending"] .chelabs-report-sort-indicator,
.chelabs-report-table th[aria-sort="descending"] .chelabs-report-sort-indicator {
  color: var(--cl-brand-text);
}
.chelabs-report-sort-order {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--cl-r-pill);
  background: var(--cl-brand-soft);
  color: var(--cl-brand-text);
  font-size: 9px;
  font-weight: 800;
}
.chelabs-report-task-title { display: block; color: var(--cl-strong-text); font-size: 12.5px; font-weight: 760; line-height: 1.45; }
.chelabs-report-task-meta { display: block; margin-top: 5px; color: var(--cl-muted); font-size: 10.5px; }
.chelabs-report-source-link { color: var(--cl-brand-text); font-weight: 760; white-space: nowrap; }
.chelabs-report-done { color: var(--cl-message-success-text); font-weight: 650; }
.chelabs-report-empty-value { color: var(--cl-muted-2); font-weight: 500; }
.chelabs-report-blocker { color: var(--cl-notice-text); }
.chelabs-report-deadline { display: inline-grid; gap: 2px; color: var(--cl-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chelabs-report-deadline small { color: inherit; font-size: 10px; }
.chelabs-report-deadline.overdue { color: var(--cl-red); }
.chelabs-report-deadline.today { color: var(--cl-notice-text); }
.chelabs-report-table-footer {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  color: var(--cl-muted);
  font-size: 11px;
}

@media (max-width: 980px) {
  .chelabs-report-filter-panel { grid-template-columns: 188px minmax(0, 1fr); }
  .chelabs-report-date-grid { grid-template-columns: 1fr; }
  .chelabs-report-table-scroll { max-height: 64vh; }
}
@media (max-width: 640px) {
  .chelabs-report-filter-panel { grid-template-columns: 1fr; }
  .chelabs-report-filter-panel > .chelabs-filter-presets {
    border-right: 0;
    border-bottom: 1px solid var(--cl-line);
  }
  .chelabs-report-filter-section-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .chelabs-report-filter-actions { flex-wrap: wrap; }
  .chelabs-report-filter-actions .chelabs-hint { width: 100%; }
  .chelabs-report-table-footer { align-items: flex-start; flex-direction: column; padding-block: 10px; }
}
@media print {
  .chelabs-report-table-scroll { max-height: none; overflow: visible; }
  .chelabs-report-table { width: 100%; min-width: 0; }
  .chelabs-report-table th, .chelabs-report-table td { position: static; }
  .chelabs-sidebar-collapse { display: none; }
}