/* доска: стена со стикерами. стиль утверждён по мокапу v2 (06.09.2026) */

@font-face{
  font-family:"Caveat"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/static/fonts/caveat-700-cyr.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Caveat"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/static/fonts/caveat-700-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --wall:#141416;
  --ink:#1c1a17;
  --ink-2:#4b463d;
  --ink-3:#6b6559;
  --text:#ecebe6;
  --dim:#8d8c94;
  --line:rgba(255,255,255,.08);
  --hand:"Caveat","Marker Felt","Comic Sans MS",cursive;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
/* иначе display:flex у .sheet/.f-actions перебивает атрибут hidden и шторка торчит при загрузке */
[hidden]{display:none !important}

/* ── стена: бетон с шумом, виньетка, лампа сверху ────────────── */
body{
  position:relative;
  background:var(--wall);
  color:var(--text);
  font:15px/1.45 var(--sys);
  min-height:100vh;
  padding-bottom:84px;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.9;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 45% at 50% -8%, rgba(255,232,190,.16), rgba(255,232,190,0) 70%),
    radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
header,main,nav{ position:relative; z-index:1 }

/* ── шапка ──────────────────────────────────────────────────── */
header{
  padding:18px 18px 6px;
  display:flex; align-items:center; gap:12px;
}
header h1{
  margin:0; font:700 34px/1 var(--hand); letter-spacing:.01em;
  color:#f3f1ea; text-shadow:0 2px 0 rgba(0,0,0,.5);
}
header .meta{
  margin-left:auto; font-size:12px; color:var(--dim);
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
header .plus{
  flex:0 0 auto; width:38px; height:38px; border:0; border-radius:3px;
  background:#efe6cc; color:#26221b; font:700 28px/1 var(--hand);
  box-shadow:0 2px 4px rgba(0,0,0,.45); transform:rotate(3deg);
}
header .plus:active{ transform:rotate(3deg) scale(.94) }

/* ── полоса ─────────────────────────────────────────────────── */
.lane{ padding:10px 16px 4px }
.lane-head{ display:flex; align-items:center; gap:10px; margin:6px 0 14px }

/* ярлык - полоска малярной ленты */
.tag{
  font:700 17px/1 var(--hand); color:#2a2620; background:#e9dfc6;
  padding:6px 12px 5px; transform:rotate(-1.2deg);
  box-shadow:0 2px 4px rgba(0,0,0,.45); position:relative; letter-spacing:.02em;
}
.tag::before,.tag::after{
  content:""; position:absolute; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, transparent 0 20%, #e9dfc6 20% 35%, transparent 35% 55%, #e9dfc6 55% 80%, transparent 80%);
}
.tag::before{ left:-6px } .tag::after{ right:-6px }
.lane-now .tag{ background:#f7b4a0; color:#4a1c10 }
.lane-month .tag{ background:#f3d98b }
.lane-later .tag{ background:#cfcabb; color:#3a372f }
.count{ font-size:12px; color:var(--dim) }
.rule{ flex:1; height:1px; background:var(--line) }
.lane-later{ opacity:.88 }
.lane.is-empty .grid{ min-height:0 }

.empty{
  margin:40px 24px; text-align:center; color:var(--dim);
  font:700 20px/1.3 var(--hand);
}

/* ── стикеры ────────────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px }

.note{
  position:relative; padding:18px 12px 11px; min-height:120px;
  display:flex; flex-direction:column; gap:6px;
  color:var(--ink); text-align:left; border:0; font-family:var(--sys);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%, rgba(0,0,0,.06)),
    repeating-linear-gradient(100deg, rgba(0,0,0,.018) 0 1px, transparent 1px 4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 2px 2px rgba(0,0,0,.35),
    0 10px 18px -6px rgba(0,0,0,.6);
  border-radius:1px;
  transform:rotate(var(--tilt, 0deg));
  transition:transform .12s ease;
}
.note:active{ transform:rotate(var(--tilt,0deg)) scale(.97) }

/* скотч сверху */
.note::before{
  content:""; position:absolute; top:-9px; left:50%; width:58px; height:18px;
  transform:translateX(-50%) rotate(var(--tape, -3deg));
  background:rgba(255,255,255,.42);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  border-left:1px dashed rgba(255,255,255,.5);
  border-right:1px dashed rgba(255,255,255,.5);
}

.c-yellow{ background-color:#f4d76d }
.c-peach { background-color:#f4a98a }
.c-mint  { background-color:#a5d6ae }
.c-sky   { background-color:#a3c4ec }
.c-lilac { background-color:#cbb4e6 }
.c-sand  { background-color:#e3d4ad }
.c-pink  { background-color:#f2b6c9 }

.note h3{ margin:0; font:700 21px/1.05 var(--hand); letter-spacing:.005em; word-break:break-word }
.note .status{
  margin:0; font-size:12.5px; line-height:1.35; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word;
}
.note .foot{
  margin-top:auto; padding-top:4px; display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--ink-3);
}
.note .who{ font:700 14px/1 var(--hand); color:#2c2822; border-bottom:1.5px solid rgba(0,0,0,.25) }
.note .when{ margin-left:auto; font-variant-numeric:tabular-nums }
.note .when.soon{
  color:#fff; background:#c9472a; padding:2px 7px; border-radius:3px;
  font-weight:700; transform:rotate(2deg);
}
.note .when.past{ text-decoration:line-through; opacity:.7 }
.note .links{ font-size:11px; color:#2f4a7a; text-decoration:underline; margin-left:auto }

/* стикер, который давно не трогали - выцветает */
.note.stale{ filter:saturate(.35) brightness(.9) }
.note.stale::after{
  content:attr(data-stale); position:absolute; right:2px; top:8px;
  font:700 12px/1 var(--hand); color:#6b6559;
  background:#f0eee7; padding:3px 7px; transform:rotate(6deg);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* «+ направление» - карандашный контур */
.add{
  min-height:120px; border:1.5px dashed rgba(255,255,255,.22); border-radius:2px;
  background:rgba(255,255,255,.03); color:#8f8e96;
  font:700 18px/1 var(--hand);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(.6deg);
}

/* ── календарь ─────────────────────────────────────────────── */
.events{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.events li{
  display:grid; grid-template-columns:54px 1fr; gap:10px; align-items:center;
  padding:10px 12px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:4px;
}
.events .d{ font:700 22px/1 var(--hand); color:#f3f1ea; text-align:center }
.events .d small{ display:block; font:600 11px/1.2 var(--sys); color:var(--dim); margin-top:3px; text-transform:lowercase }
.events .t{ font-size:14px; font-weight:600 }
.events .s{ font-size:12px; color:var(--dim); margin-top:2px }

/* ── навигация: две закладки ───────────────────────────────── */
nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:8px; padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(20,20,22,.98) 55%, rgba(20,20,22,0));
}
nav button{
  flex:1; padding:11px 0 9px; border:0; border-radius:3px;
  background:#24242a; color:#a6a5ad; font:700 19px/1 var(--hand);
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
nav button.on{ background:#efe6cc; color:#26221b; transform:rotate(-.6deg) }

/* ── шторка ────────────────────────────────────────────────── */
.sheet-backdrop{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55) }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-height:92vh; overflow:auto;
  background:#1f1f24; border-radius:14px 14px 0 0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 -10px 30px rgba(0,0,0,.6);
  animation:up .18s ease-out;
}
@keyframes up{ from{ transform:translateY(40px); opacity:0 } }
.sheet-grip{ width:40px; height:4px; border-radius:2px; background:#3a3a44; margin:2px auto 4px }

.sheet input,.sheet textarea{
  width:100%; border:0; border-radius:6px; background:#2a2a31; color:var(--text);
  font:15px/1.4 var(--sys); padding:11px 12px;
}
.sheet input:focus,.sheet textarea:focus{ outline:2px solid #efe6cc55 }
.f-title{ font:700 24px/1.1 var(--hand) !important; }
.f-status,.f-links{ resize:none }
.f-date{ width:auto !important; color-scheme:dark }

.f-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.f-label{ font-size:12px; color:var(--dim); min-width:64px }

.chips,.seg{ display:flex; gap:6px; flex-wrap:wrap }
.chips button,.seg button{
  border:1px solid #3a3a44; background:#26262c; color:#c9c8d0;
  border-radius:20px; padding:6px 12px; font:600 13px/1 var(--sys);
}
.seg button{ border-radius:6px }
.chips button.on{ background:#efe6cc; color:#26221b; border-color:#efe6cc }
.seg button.on{ background:#efe6cc; color:#26221b; border-color:#efe6cc }

.swatches{ display:flex; gap:8px }
.swatches button{
  width:28px; height:28px; border-radius:50%; border:2px solid transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.swatches button.on{ border-color:#fff; transform:scale(1.12) }

.link-btn{ border:0; background:none; color:var(--dim); font-size:12px; text-decoration:underline }

.f-actions{ display:flex; gap:8px; margin-top:4px }
.f-secondary{ margin-top:0 }
.btn-main{
  flex:1; border:0; border-radius:6px; padding:13px; background:#efe6cc; color:#26221b;
  font:700 20px/1 var(--hand); box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.btn-ghost{
  flex:1; border:1px solid #3a3a44; border-radius:6px; padding:11px 8px;
  background:transparent; color:#c9c8d0; font:600 13px/1 var(--sys);
}
.btn-danger{ flex:1.4; border:1px solid #6e2a1f; border-radius:6px; padding:11px 8px; background:transparent; color:#e0705a; font:600 13px/1 var(--sys) }
.btn-main:disabled{ opacity:.5 }
.f-meta{ margin:0; font-size:11px; color:var(--dim); text-align:center }

/* ── тост ──────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:60;
  background:#efe6cc; color:#26221b; padding:9px 14px; border-radius:4px;
  font:700 15px/1.2 var(--hand); box-shadow:0 3px 8px rgba(0,0,0,.5);
  max-width:86vw; text-align:center;
}
.toast.err{ background:#c9472a; color:#fff }

@media (min-width:640px){
  .grid{ grid-template-columns:repeat(3,1fr) }
  body{ max-width:900px; margin:0 auto }
  .sheet{ max-width:560px; margin:0 auto }
}