/* Задачник — «бумага и штампы». Mobile-first.
   Шрифты: Marcellus (грифы), Mulish (текст), Courier Prime (печатная машинка),
   Mr Stupidhead (лейбл — вендорится в static/fonts/). */

@font-face {
  font-family: "Mr Stupidhead";
  src: url("fonts/mrstupidhead.woff2") format("woff2"),
       url("fonts/mrstupidhead.ttf") format("truetype");
  font-display: swap;
}

:root {
  --desk: #2b2620;
  --paper: #faf6ed;
  --ink: #283a6b;            /* шариковая ручка */
  --ink-soft: #8a90a6;
  --rule: #e7e0cf;
  --stamp: #6b6355;
  --green: #14c23e;          /* ярко-зелёная галочка */
  --display: "Marcellus", Georgia, serif;
  --body: "Mulish", system-ui, sans-serif;
  --stamp-font: "Courier Prime", "Courier New", monospace;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.28'/%3E%3C/svg%3E");
  --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.32' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font-family: var(--body); font-size: 16px; padding: 10px; min-height: 100vh;
}
@media (min-width: 720px) { body { padding: 24px 0; } }

.sheet {
  position: relative; max-width: 660px; margin: 0 auto;
  min-height: calc(100vh - 20px); overflow: hidden; padding: 0;
  background-color: var(--paper); background-image: var(--grain); background-blend-mode: multiply;
  box-shadow: 0 14px 46px rgba(0,0,0,.5);
}
@media (min-width: 720px) { .sheet { min-height: calc(100vh - 48px); } }

/* штампы: серые, крупные, печатная машинка, слегка неровные */
.stamps { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.stamp {
  position: absolute; font-family: var(--stamp-font); font-weight: 400;
  font-size: clamp(1.5rem, 8vw, 2.8rem); text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap; color: var(--stamp); opacity: .16; filter: blur(.35px);
}

/* хедер: насыщенная маркерная заливка + белый текст */
.masthead { position: relative; padding: 30px 22px 18px; text-align: center; overflow: hidden; background: var(--rank, #6b6355); }
.masthead::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(16,12,26,.30); }
.masthead > * { position: relative; z-index: 1; }

/* угловой лейбл-«язычок» с названием приложения */
.applabel {
  position: absolute; top: 16px; left: 0; z-index: 6;
  background: var(--ink); color: var(--paper);
  font-family: "Mr Stupidhead", "Comic Sans MS", "Marker Felt", cursive;
  font-size: 1.15rem; line-height: 1; letter-spacing: .5px;
  padding: 6px 15px 7px 20px; border-radius: 0 14px 14px 0;
  box-shadow: 2px 3px 7px rgba(0,0,0,.3);
}
.masthead .name { font-family: var(--display); font-size: 2.35rem; line-height: 1.05; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.masthead .status { font-family: var(--display); font-size: 1.35rem; margin-top: 4px; color: #fff; opacity: .95; letter-spacing: .5px; }
.masthead .options { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; }
.masthead .options a, .masthead .options button {
  color: #fff; background: none; border: none; padding: 0; margin: 0; opacity: .9;
  font-family: var(--body); font-size: .92rem; cursor: pointer; text-decoration: none;
}
.masthead .options a:hover, .masthead .options button:hover { opacity: 1; text-decoration: underline; }

/* админ-панель выбора шрифтов */
.design-panel { position: relative; z-index: 1; margin: 10px 22px 0; padding: 10px 12px; background: #efe9d8; border: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-family: var(--body); font-size: .85rem; }
.design-panel label { display: flex; gap: 6px; align-items: center; color: var(--ink); }
.design-panel select { font-family: var(--body); font-size: .85rem; padding: 3px 4px; max-width: 150px; }
.design-panel button { background: none; border: 1px solid var(--ink-soft); border-radius: 2px; padding: 4px 10px; cursor: pointer; color: var(--ink); font-family: var(--body); }
.design-panel button:hover { border-color: var(--ink); }

.page { position: relative; z-index: 1; padding: 16px 22px 46px; }

.flash { background: #efe6cf; border-left: 3px solid var(--rank, #bf5a50); padding: 9px 12px; margin: 0 0 14px; font-size: .95rem; word-break: break-word; }

/* новая строка */
.new-line { margin: 2px 0 10px; }
.new-line .field { margin-bottom: 12px; }
.new-line .row { display: flex; gap: 10px; align-items: center; }
.new-line input {
  background: transparent; border: none; border-bottom: 1px solid var(--ink-soft);
  padding: 7px 2px; font-family: var(--body); font-size: 1.05rem; color: var(--ink); width: 100%;
}
.new-line input::placeholder { color: var(--ink-soft); }
.new-line input:focus { outline: none; border-bottom-color: var(--ink); }
.new-line input[type=datetime-local] { flex: 1; color: var(--ink-soft); }
.btn-primary {
  background: var(--ink); color: var(--paper); border: none; border-radius: 2px;
  padding: 9px 18px; font-family: var(--display); font-size: .98rem; letter-spacing: .5px; cursor: pointer; white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.3); }

/* реестр задач */
.register { list-style: none; margin: 6px 0 0; padding: 0; }
.entry { display: flex; align-items: center; gap: 16px; padding: 15px 2px; border-bottom: 1px solid var(--rule); }
.check-form, .extend-form { display: contents; }
.check { position: relative; width: 30px; height: 34px; flex: none; background: none; border: none; cursor: pointer; padding: 0; overflow: visible; }
.box { position: absolute; left: 2px; top: 6px; width: 24px; height: 24px; border: 2px solid var(--ink-soft); }
.check:hover .box { border-color: var(--ink); }
.tick { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-46%, -54%); opacity: 0; pointer-events: none; transition: opacity .12s; }
.check:hover .tick { opacity: 1; }
.tick path { fill: none; stroke: var(--green); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
.entry .body { flex: 1; min-width: 0; }
.entry .t-title { font-family: var(--body); font-size: 1.35rem; font-weight: 500; line-height: 1.25; word-break: break-word; }
.entry .due { font-size: .9rem; color: var(--ink-soft); margin-top: 4px; }
.entry .due b { font-weight: 700; color: var(--ink); }
.entry .due.soon { color: #9a7b2e; }
.entry .due.urgent { color: #b5462f; }
.entry .due.urgent b, .entry .due.overdue b { color: inherit; }
.entry .due.overdue { color: #a5402f; font-weight: 500; }
.extend {
  align-self: center; background: none; border: 1px solid var(--ink-soft); color: var(--ink);
  padding: 5px 10px; border-radius: 2px; font-family: var(--body); font-size: .82rem; cursor: pointer; white-space: nowrap;
}
.extend:hover { border-color: var(--ink); }

.empty { color: var(--ink-soft); font-style: italic; padding: 24px 2px; font-size: 1.05rem; }
.overdue-title { font-family: var(--display); color: #a5402f; margin: 26px 0 4px; font-size: 1.3rem; letter-spacing: .5px; }
.struck .t-title { text-decoration: line-through; color: var(--ink-soft); }

/* процент уровня — притаился в правом нижнем углу, цветом хедера */
.pct { position: absolute; right: 14px; bottom: 10px; z-index: 1; font-family: var(--display); font-size: 1.1rem; letter-spacing: .5px; color: var(--rank, #8f8371); opacity: .85; }

/* вход */
.login { max-width: 340px; margin: 12vh auto 0; position: relative; z-index: 1; padding: 0 22px; }
.login h1 { font-family: var(--display); font-size: 2.6rem; margin: 0 0 4px; }
.login .sub { color: var(--ink-soft); font-style: italic; margin: 0 0 24px; font-size: 1.05rem; }
.login form { display: flex; flex-direction: column; gap: 16px; }
.login input { background: transparent; border: none; border-bottom: 1px solid var(--ink-soft); padding: 9px 2px; font-family: var(--body); font-size: 1.05rem; color: var(--ink); }
.login input:focus { outline: none; border-bottom-color: var(--ink); }
.login .btn-primary { margin-top: 8px; align-self: flex-start; }

/* профиль / настройки */
.settings { max-width: 420px; position: relative; z-index: 1; }
.settings label { display: block; font-family: var(--body); color: var(--ink-soft); font-size: .85rem; margin: 16px 0 4px; }
.settings input, .settings select { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--ink-soft); padding: 8px 2px; font-family: var(--body); font-size: 1.1rem; color: var(--ink); }
.settings input:focus, .settings select:focus { outline: none; border-bottom-color: var(--ink); }
.settings select { cursor: pointer; }
.settings .btn-primary { margin-top: 20px; }

/* люди */
.people-h { font-family: var(--display); font-size: 2.1rem; margin: 4px 0 2px; }
.people { list-style: none; padding: 0; margin: 14px 0 0; }
.people li { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--rule); }
.people .chip { width: 14px; height: 14px; border-radius: 2px; flex: none; background: var(--rank, #8f8371); }
.people .p-name { font-family: var(--display); font-size: 1.3rem; }
.people .p-rank { font-family: var(--display); color: var(--ink-soft); margin-left: auto; }
.back { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.back:hover { color: var(--ink); }