/*
 * «Дневник художника» — стили виджета.
 *
 * Файл подключается только на страницах, где есть контейнер виджета
 * (`server/widgets/index.js`). Поэтому все правила можно держать в одном
 * пространстве имён `.widget-art-diary`, не боясь задеть сайт.
 *
 * Палитра «Пигменты»: светлая тема — бумажная страница, тёмная — чёрная
 * бумага с меловыми красками. Переменные объявлены на самом виджете, а не
 * в `:root`: виджет не должен менять цвета соседних блоков.
 */

.widget-art-diary {
  --ad-paper: #f3e9d2;
  --ad-paper-2: #eadfc6;
  --ad-paper-3: #fbf6ea;
  --ad-ink: #1f1a16;
  --ad-dim: #5e554a;
  --ad-faint: #8b8073;
  --ad-line: rgba(31, 26, 22, .16);
  --ad-line-strong: rgba(31, 26, 22, .34);
  --ad-dot: rgba(31, 26, 22, .10);
  --ad-accent: #d2432e;
  --ad-blue: #2e4a8f;
  --ad-ochre: #c98b2e;
  --ad-sage: #7e8f6a;
  --ad-on-accent: #fff8ec;
  --ad-shadow: 0 18px 40px rgba(31, 26, 22, .14);

  margin: 2rem 0;
  color: var(--ad-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

html[data-theme="dark"] .widget-art-diary {
  --ad-paper: #1b1714;
  --ad-paper-2: #221c17;
  --ad-paper-3: #171310;
  --ad-ink: #f2ede7;
  --ad-dim: #b3a89d;
  --ad-faint: #7d736a;
  --ad-line: rgba(242, 237, 231, .14);
  --ad-line-strong: rgba(242, 237, 231, .30);
  --ad-dot: rgba(242, 237, 231, .08);
  --ad-accent: #e8604a;
  --ad-blue: #6e8be0;
  --ad-ochre: #e0a94e;
  --ad-sage: #9fb08a;
  --ad-on-accent: #1a120f;
  --ad-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* ── Общее ──────────────────────────────────────────────────────────────── */

.widget-art-diary .diary {
  position: relative;
  padding: 1.35rem 1.35rem 1.15rem;
  background: var(--ad-paper-3);
  border: 1px solid var(--ad-line);
  border-radius: 10px;
  box-shadow: var(--ad-shadow);
}

.widget-art-diary .diary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--ad-accent);
  border-radius: 10px 0 0 10px;
}

.widget-art-diary .diary-label {
  display: inline-block;
  color: var(--ad-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.widget-art-diary .diary-title {
  margin: .25rem 0 .4rem;
  color: var(--ad-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
}

.widget-art-diary .diary-intro {
  margin: 0 0 1rem;
  color: var(--ad-dim);
  max-width: 46ch;
}

.widget-art-diary .diary-field {
  margin: 0 0 .9rem;
}

.widget-art-diary .diary-legend {
  display: block;
  margin-bottom: .35rem;
  color: var(--ad-ink);
  font-size: 13px;
  font-weight: 600;
}

.widget-art-diary .diary-legend em {
  color: var(--ad-faint);
  font-style: normal;
  font-weight: 400;
}

.widget-art-diary .diary-hint,
.widget-art-diary .diary-note {
  margin: .45rem 0 0;
  color: var(--ad-faint);
  font-size: 12.5px;
}

.widget-art-diary .diary-note {
  margin-top: 1rem;
  max-width: 48ch;
}

.widget-art-diary .diary-date input {
  display: block;
  width: 100%;
  max-width: 220px;
  padding: .45rem .55rem;
  color: var(--ad-ink);
  background: var(--ad-paper-3);
  border: 1px solid var(--ad-line-strong);
  border-radius: 6px;
  font: inherit;
  color-scheme: light;
}

html[data-theme="dark"] .widget-art-diary .diary-date input {
  color-scheme: dark;
}

/* ── Чипы выбора ────────────────────────────────────────────────────────── */

.widget-art-diary .diary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.widget-art-diary .diary-chip {
  padding: .3rem .7rem;
  color: var(--ad-dim);
  background: transparent;
  border: 1px solid var(--ad-line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.widget-art-diary .diary-chip:hover {
  color: var(--ad-ink);
  border-color: var(--ad-ink);
}

.widget-art-diary .diary-chip.is-on {
  color: var(--ad-on-accent);
  background: var(--ad-accent);
  border-color: var(--ad-accent);
}

.widget-art-diary .diary-chip:focus-visible,
.widget-art-diary .diary-btn:focus-visible,
.widget-art-diary .diary-day:focus-visible,
.widget-art-diary .diary-link:focus-visible {
  outline: 2px solid var(--ad-blue);
  outline-offset: 2px;
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.widget-art-diary .diary-start {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1rem;
}

.widget-art-diary .diary-start-center {
  justify-content: center;
}

.widget-art-diary .diary-btn {
  padding: .5rem 1rem;
  color: var(--ad-ink);
  background: var(--ad-paper);
  border: 1px solid var(--ad-line-strong);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.widget-art-diary .diary-btn:hover {
  border-color: var(--ad-ink);
}

.widget-art-diary .diary-btn:disabled {
  opacity: .45;
  cursor: default;
}

.widget-art-diary .diary-btn-primary {
  color: var(--ad-on-accent);
  background: var(--ad-accent);
  border-color: var(--ad-accent);
}

.widget-art-diary .diary-btn-primary:hover {
  filter: brightness(1.06);
  border-color: var(--ad-accent);
}

.widget-art-diary .diary-btn-ghost {
  background: transparent;
}

.widget-art-diary .diary-btn-sm {
  padding: .3rem .7rem;
  font-size: 13px;
}

/* ── Быстрая карточка ───────────────────────────────────────────────────── */

.widget-art-diary .diary-quick {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--ad-paper);
  border: 1px dashed var(--ad-line-strong);
  border-radius: 8px;
}

.widget-art-diary .diary-quick-subject {
  margin: .35rem 0 .3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
}

.widget-art-diary .diary-quick-note {
  margin: 0;
  color: var(--ad-dim);
}

.widget-art-diary .diary-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: .8rem;
}

/* ── Продолжение дневника ───────────────────────────────────────────────── */

.widget-art-diary .diary-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding: .75rem .9rem;
  background: var(--ad-paper);
  border: 1px solid var(--ad-line);
  border-radius: 8px;
}

.widget-art-diary .diary-resume-text {
  color: var(--ad-dim);
  font-size: 13px;
}

/* ── День: шапка и карточка ─────────────────────────────────────────────── */

.widget-art-diary .diary-run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.widget-art-diary .diary-run-sub {
  margin: .2rem 0 0;
  color: var(--ad-dim);
  font-size: 13px;
}

.widget-art-diary .diary-card {
  position: relative;
  padding: 1.15rem 1.15rem 1rem;
  background-color: var(--ad-paper);
  background-image: radial-gradient(var(--ad-dot) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid var(--ad-line-strong);
  border-radius: 8px;
}

.widget-art-diary .diary-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 1.1rem;
  width: 1px;
  height: 18px;
  background: var(--ad-line-strong);
}

.widget-art-diary .diary-card.is-new {
  animation: diary-card-in 260ms ease-out;
}

@keyframes diary-card-in {
  from {
    opacity: 0;
    transform: translateY(8px) rotate(-.6deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.widget-art-diary .diary-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}

.widget-art-diary .diary-card-day {
  color: var(--ad-accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.widget-art-diary .diary-card-weight {
  color: var(--ad-faint);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.widget-art-diary .diary-card-subject {
  margin: 0 0 .45rem;
  color: var(--ad-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.22;
}

.widget-art-diary .diary-card-note,
.widget-art-diary .diary-card-focus {
  margin: 0;
  color: var(--ad-dim);
  font-size: 14.5px;
}

.widget-art-diary .diary-card-focus {
  color: var(--ad-blue);
}

.widget-art-diary .diary-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .7rem;
  border-top: 1px solid var(--ad-line);
}

.widget-art-diary .diary-card-tech {
  color: var(--ad-faint);
  font-size: 11.5px;
}

.widget-art-diary .diary-card-stamp {
  display: inline-block;
  padding: .15rem .45rem;
  color: var(--ad-accent);
  border: 2px solid var(--ad-accent);
  border-radius: 3px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.widget-art-diary .diary-card.is-done .diary-card-stamp {
  color: var(--ad-blue);
  border-color: var(--ad-blue);
}

/* ── Действия и дни ─────────────────────────────────────────────────────── */

.widget-art-diary .diary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: .9rem 0;
}

.widget-art-diary .diary-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  margin: 1rem 0 .75rem;
}

.widget-art-diary .diary-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  color: var(--ad-dim);
  background: var(--ad-paper-3);
  border: 1px solid var(--ad-line);
  border-radius: 4px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  cursor: pointer;
}

.widget-art-diary .diary-day:hover:not(:disabled) {
  border-color: var(--ad-ink);
  color: var(--ad-ink);
}

.widget-art-diary .diary-day.is-done {
  color: var(--ad-on-accent);
  background: var(--ad-blue);
  border-color: var(--ad-blue);
}

.widget-art-diary .diary-day.is-current {
  outline: 2px solid var(--ad-accent);
  outline-offset: 1px;
}

.widget-art-diary .diary-day.is-today {
  color: var(--ad-accent);
  border-color: var(--ad-accent);
  font-weight: 700;
}

.widget-art-diary .diary-day.is-rerolled {
  border-style: dashed;
}

.widget-art-diary .diary-day.is-closed {
  color: var(--ad-faint);
  border-style: dashed;
  opacity: .5;
  cursor: default;
}

.widget-art-diary .diary-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .6rem;
  border-top: 1px solid var(--ad-line);
}

.widget-art-diary .diary-link {
  padding: 0;
  color: var(--ad-blue);
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.widget-art-diary .diary-foot-note {
  color: var(--ad-faint);
  font-size: 11.5px;
}

/* ── Финиш ──────────────────────────────────────────────────────────────── */

.widget-art-diary .diary-finish {
  padding: .75rem 0 .25rem;
  text-align: center;
}

.widget-art-diary .diary-finish-stamp {
  display: inline-block;
  padding: .2rem .6rem;
  color: var(--ad-accent);
  border: 2px solid var(--ad-accent);
  border-radius: 3px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.widget-art-diary .diary-finish-count {
  margin: .75rem 0 .4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 600;
}

.widget-art-diary .diary-finish-text {
  margin: 0 auto .9rem;
  color: var(--ad-dim);
  max-width: 38ch;
}

/* ── Строка состояния ───────────────────────────────────────────────────── */

.widget-art-diary .diary-status {
  min-height: 1.2em;
  margin: .6rem 0 0;
  color: var(--ad-faint);
  font-size: 12px;
}

.widget-art-diary .diary-status.is-error {
  color: var(--ad-accent);
}

/* ── Телефон ────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  .widget-art-diary .diary {
    padding: 1rem .95rem .9rem;
  }

  .widget-art-diary .diary-title {
    font-size: 1.25rem;
  }

  .widget-art-diary .diary-card {
    padding: .95rem .9rem .85rem;
  }

  .widget-art-diary .diary-card-subject {
    font-size: 1.2rem;
  }

  .widget-art-diary .diary-card-top,
  .widget-art-diary .diary-card-foot {
    flex-wrap: wrap;
  }

  .widget-art-diary .diary-days {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 5px;
  }

  .widget-art-diary .diary-day {
    min-height: 30px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget-art-diary .diary-card.is-new {
    animation: none;
  }
}