/* Бумажный стикер: спокойный лист, отрывная шапка сверху */
.sticker {
  position: absolute;
  width: var(--sticker-width, calc(var(--col-width) - 26px));
  min-height: var(--sticker-height, auto);
  z-index: 3;
  border-radius: 4px 12px 4px 10px / 10px 4px 12px 4px;
  padding: 0 0 8px;
  color: var(--paper-ink);
  cursor: grab;
  box-shadow: var(--shadow-sticker);
  border: none;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .14s ease, box-shadow .14s ease, filter .14s;
  user-select: none;
  overflow: hidden;
  background-color: var(--paper, var(--paper-0));
  background-image:
    /* волокна бумаги */
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .012) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 46%);
}

.sticker:hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-2px);
  box-shadow: var(--shadow-sticker-drag);
  z-index: 7;
}
.sticker.dragging { opacity: .4; cursor: grabbing; }
.sticker.link-source { outline: 2px dashed var(--accent-blue); outline-offset: 3px; }
.sticker.link-hover { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.sticker.selected { outline: 2px solid var(--accent-purple); outline-offset: 3px; }

/* ---------------------------------------------------- отрывная шапка листа */
.sticker .tear-head {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px 4px; min-height: 22px;
  background: var(--heat, #cfe3d5);
  border-bottom: 1px dashed rgba(0, 0, 0, .22);
  position: relative;
}
/* Перфорация отрыва: маленькие точки вдоль нижнего края шапки */
.sticker .tear-head .perf {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 45%, transparent 46%);
  background-size: 6px 2px; opacity: .8; pointer-events: none;
}
.sticker .tear-head .spacer { flex: 1; }
.sticker .stars {
  font-size: 10px; letter-spacing: -.5px; color: #7b4b2c; font-weight: 700;
  white-space: nowrap;
}
.sticker .stars.none { color: rgba(0, 0, 0, .28); font-weight: 400; }
/* Чем горячее шапка, тем темнее звёзды: перенос виден краем глаза */
.sticker[data-heat="3"] .stars, .sticker[data-heat="4"] .stars,
.sticker[data-heat="5"] .stars { color: #9a2f24; }

.sticker .head-tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.sticker:hover .head-tools, .sticker .head-tools:focus-within { opacity: 1; }
.sticker .head-btn {
  width: 19px; height: 18px; padding: 0; line-height: 1; font-size: 10.5px; font-weight: 700;
  border-radius: 5px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, .14);
  background: rgba(255, 255, 255, .7); color: rgba(0, 0, 0, .55);
}
.sticker .head-btn:hover { background: #fff; color: var(--paper-ink); }
.sticker .head-btn.on.done { background: #4bab7a; border-color: #3b8b62; color: #fff; }
.sticker .head-btn.on.transferred { background: #dd9a3c; border-color: #b57c2c; color: #fff; }
.sticker .head-btn.on.cancelled { background: #e0685f; border-color: #b4514a; color: #fff; }
/* Статус видно и без наведения, если он проставлен */
.sticker .head-btn.on { opacity: 1; }
.sticker .head-tools:has(.on) { opacity: 1; }

/* ------------------------------------------------------------ тело листа */
.sticker .title {
  font-weight: 600; font-size: 12.5px; word-break: break-word; letter-spacing: .1px;
  padding: 6px 10px 0;
}
.sticker.crossed .title { text-decoration: line-through; opacity: .6; }

.sticker .meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 5px; padding: 0 10px; font-size: 11px; color: var(--paper-ink-soft);
}
.sticker .who {
  background: rgba(0, 0, 0, .07); border-radius: 999px; padding: 0 7px; white-space: nowrap;
}
.sticker .hours { font-variant-numeric: tabular-nums; }

/* Закрытая задача уходит в неактивный цвет */
.sticker.closed { filter: saturate(.35) brightness(1.02); }
.sticker.closed .title { opacity: .6; }

.sticker .links { display: flex; gap: 4px; margin-top: 6px; padding: 0 10px; flex-wrap: wrap; }
.sticker .links a {
  font-size: 10px; text-decoration: none; color: var(--paper-ink);
  background: rgba(255, 255, 255, .72); border-radius: 5px; padding: 1px 6px;
  border: 1px solid rgba(0, 0, 0, .07); cursor: pointer;
}
.sticker .links a:hover { background: #fff; box-shadow: 0 1px 4px rgba(88, 108, 145, .2); }
.sticker .links a.sheet { background: rgba(75, 171, 122, .28); font-weight: 600; }
.sticker .links a.task { background: rgba(91, 141, 239, .28); font-weight: 600; }
.sticker .links a.doc { background: rgba(155, 127, 224, .26); font-weight: 600; }
.sticker .links a.file { background: rgba(221, 154, 60, .26); }
.sticker .links a.extra { background: rgba(255, 255, 255, .85); }

/* Метка типа задачи */
.sticker .type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 0 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); color: var(--paper-ink); white-space: nowrap;
}
.sticker .type-badge i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* --------------------------------------------------- канцелярская кнопка */
.pin-handle {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  cursor: crosshair; opacity: 0; pointer-events: none;
  transition: opacity .12s, transform .12s;
  background:
    radial-gradient(circle at 34% 30%, #fff, rgba(255, 255, 255, .1) 42%, transparent 46%),
    radial-gradient(circle at 50% 50%, var(--pin-color, var(--accent-blue)) 62%, rgba(0, 0, 0, .28));
  box-shadow: 0 2px 5px rgba(88, 108, 145, .45);
  z-index: 6;
}
/* Булавки появляются только при наведении на сам стикер */
.sticker:hover .pin-handle, .pin-handle.armed { opacity: .95; pointer-events: all; }
.pin-handle:hover { transform: scale(1.55); }
.pin-handle.top { top: -5px; left: 50%; margin-left: -5px; }
.pin-handle.right { right: -5px; top: 50%; margin-top: -5px; }
.pin-handle.bottom { bottom: -5px; left: 50%; margin-left: -5px; }
.pin-handle.left { left: -5px; top: 50%; margin-top: -5px; }

/* Растянутый лист лежит под обычными: иначе он накрывает соседние задачи */
.sticker.spanning { z-index: 2; }
.sticker.spanning:hover { z-index: 7; }
.sticker .resize {
  position: absolute; display: none; z-index: 5;
  background: rgba(0, 0, 0, .1); border-radius: 3px;
  width: 12px; height: 12px;
}
.sticker:hover .resize { display: block; }
.sticker .resize:hover { background: var(--accent-blue); }
.sticker .resize.se { right: 0; bottom: 0; cursor: nwse-resize; }
.sticker .resize.ne { right: 0; top: 24px; cursor: ew-resize; }
.sticker .resize.sw { left: 0; bottom: 0; cursor: ns-resize; }
.sticker.resizing { opacity: .9; }

/* Цепочка ответственных */
.sticker .chain { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.sticker .chain .step {
  background: rgba(0, 0, 0, .07); border-radius: 999px; padding: 0 7px; white-space: nowrap;
}
.sticker .chain .step.current { background: rgba(255, 255, 255, .8); font-weight: 600; }
.sticker .chain i { opacity: .5; font-style: normal; }

/* Призрак при перетаскивании */
.drag-ghost { position: fixed; pointer-events: none; z-index: 300; opacity: .92; }

/* Легенда */
.legend { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-secondary); }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 3px;
  vertical-align: -2px; border: 1px solid rgba(0, 0, 0, .16); }
.legend .line { display: inline-block; width: 16px; height: 0; border-top: 2px solid; margin-right: 3px;
  vertical-align: 4px; }

/* SMART-подсказка и срок */
.sticker .smart-line { display: flex; align-items: center; gap: 5px; margin-top: 5px;
  padding: 0 10px; font-size: 10px; }
.sticker .smart-badge {
  padding: 0 6px; border-radius: 5px; font-weight: 600;
  background: rgba(255, 255, 255, .7); color: var(--paper-ink);
}
.sticker .smart-badge.low { background: rgba(224, 104, 95, .28); }
.sticker .smart-badge.mid { background: rgba(221, 154, 60, .28); }
.sticker .smart-badge.ok { background: rgba(75, 171, 122, .28); }
.sticker .due { color: var(--paper-ink-soft); }
.sticker .due.overdue { color: #a8382f; font-weight: 700; }

/* --------------------------------------- палитра цветов в меню стикера */
.color-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.color-swatch {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.color-swatch.on { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ================================================== детализация стикера */
.sticker-editor { display: grid; gap: 12px; }

/* Шапка карточки — тот же «отрывной лист», что и на доске */
.sticker-editor .editor-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--paper, #fdfaef);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.sticker-editor .editor-head .stars { color: #9a2f24; font-weight: 700; font-size: 12px; }
.sticker-editor .editor-head-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.sticker-editor .editor-locked {
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12.5px;
  background: rgba(224, 104, 95, .12); border: 1px solid rgba(224, 104, 95, .35);
  color: #a8382f;
}

.sticker-editor .editor-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.sticker-editor .editor-tabs .btn.active {
  border-color: var(--accent-blue); color: #3f6ed0; background: var(--accent-blue-soft);
}
.sticker-editor .editor-pane { min-height: 220px; }
.sticker-editor .pane-grid { display: grid; gap: 11px; align-content: start; }

/* Лист заполняется как настоящий стикер: крупный заголовок и текст на бумаге */
.sticker-sheet {
  display: grid; gap: 10px; padding: 14px;
  border-radius: 6px 16px 6px 14px / 14px 6px 16px 6px;
  background-color: var(--paper, #fdfaef);
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .016) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 46%);
  box-shadow: var(--shadow-sticker);
  color: var(--paper-ink);
}
.sticker-sheet .sheet-title {
  font-size: 17px; font-weight: 650; background: transparent; border: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, .2); border-radius: 0;
  padding: 4px 2px; box-shadow: none; color: var(--paper-ink);
}
.sticker-sheet .sheet-title:focus { box-shadow: none; border-bottom-color: var(--accent-blue); }
.sticker-sheet .sheet-text {
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px; color: var(--paper-ink); min-height: 130px;
}
.sticker-sheet .sheet-foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.sticker-sheet .sheet-foot label { color: var(--paper-ink-soft); }

.sticker-editor .editor-color { display: flex; align-items: center; gap: 10px; }