/* Отрывной календарь: листок как главный экран, ниже год по месяцам, как газетные колонки */
:root{
  --paper:#EDEFEA; --sheet:#F9FAF7; --ink:#1B1E23; --muted:#5C6570; --rule:#CBD0C8;
  --red:#C2262D; --red-soft:#F3D9D8; --blue:#1F4FA8; --blue-soft:#DCE5F5; --amber:#A8650C; --amber-soft:#F4E6CF;
  --f-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"PT Sans","Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#131518; --sheet:#1C1F23; --ink:#E7E9E4; --muted:#9AA3AD; --rule:#33383F;
  --red:#F2595E; --red-soft:#3A1E21; --blue:#7FA6EE; --blue-soft:#1C2A44; --amber:#E2A24A; --amber-soft:#3A2C17; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px;display:flex;flex-direction:column;gap:28px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0;letter-spacing:.01em}
.label{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.c-red{color:var(--red)} .c-blue{color:var(--blue)} .c-amber{color:var(--amber)}

/* banners */
.banner{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper);
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-size:14px}
.banner .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.banner .btn.ghost{background:transparent;color:var(--paper)}
.banner.muted{background:var(--blue-soft);color:var(--ink)}
.banner.muted .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.banner.muted .btn.ghost{background:transparent;color:var(--ink)}
.banner .actions{display:flex;gap:8px}

/* top bar */
.top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.top h1{font-size:clamp(24px,4vw,34px);text-transform:uppercase;font-weight:700}
.top .who{font-family:var(--f-mono);font-size:12px;color:var(--muted);background:none;border:1px solid var(--rule);border-radius:999px;padding:4px 12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}}
.sheet{background:var(--sheet);border:1px solid var(--rule);box-shadow:0 3px 0 -1px var(--sheet),0 3px 0 0 var(--rule),0 6px 0 -2px var(--sheet),0 6px 0 -1px var(--rule);padding:0 0 18px;text-align:center;cursor:pointer}
.sheet .holes{height:18px;border-bottom:1px dashed var(--rule);display:flex;justify-content:center;gap:56px;align-items:center}
.sheet .holes i{width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--rule)}
.sheet .month{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.2em;font-size:15px;padding-top:12px;color:var(--muted)}
.sheet .num{font-family:var(--f-display);font-weight:700;font-size:clamp(110px,22vw,150px);line-height:.95;color:var(--red);font-variant-numeric:tabular-nums}
.sheet .when{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin:6px 0 10px;padding:0 12px}
.sheet .title{font-family:var(--f-display);font-size:24px;padding:0 18px}
.sheet .fandom{color:var(--muted);padding:2px 18px 0;font-style:italic}
.sheet .more{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:8px}
.upcoming{display:flex;flex-direction:column;gap:10px;min-width:0}
.upcoming h2{font-size:20px;text-transform:uppercase}
.uplist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.uplist li{border-bottom:1px solid var(--rule)}
.uprow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 2px;width:100%;background:none;border:0;text-align:left}
.uprow:hover .t{text-decoration:underline}
.uprow .d{font-family:var(--f-display);font-size:18px;font-variant-numeric:tabular-nums}
.uprow .t{font-weight:700}
.uprow .f{color:var(--muted);font-size:13px;display:block;font-weight:400}
.uprow .in{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.legend b{font-family:var(--f-display);font-size:16px;margin-right:4px}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);padding-block:10px;border-bottom:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rule);background:var(--sheet);border-radius:999px;padding:4px 11px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.search{flex:1 1 180px;min-width:0;padding:7px 10px;border:1px solid var(--rule);background:var(--sheet);border-radius:4px}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:7px 14px;border-radius:4px;font-weight:700}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{padding:4px 10px;font-size:13px}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn:disabled{opacity:.5;cursor:default}

/* year */
.year{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
@media (max-width:1000px){.year{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.year{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.year{grid-template-columns:minmax(0,1fr)}}
.mon h3{font-size:17px;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid var(--ink);padding-bottom:3px;display:flex;justify-content:space-between;align-items:baseline}
.mon h3 small{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:0}
.mon.current h3{border-color:var(--red);color:var(--red)}
.mon ul{list-style:none;margin:0;padding:0}
.mon li{border-bottom:1px solid var(--rule)}
.ev{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:6px 0;width:100%;background:none;border:0;text-align:left;align-items:baseline}
.ev .n{font-family:var(--f-display);font-size:18px;font-variant-numeric:tabular-nums;color:var(--red)}
.ev.mine .n{color:var(--blue)}
.ev.pending .n{color:var(--amber)}
.ev .t{font-weight:700;font-size:14px;line-height:1.25}
.ev .f{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.ev:hover .t{text-decoration:underline}
.ev.today{background:var(--red-soft)}
.empty-mon{color:var(--muted);font-size:13px;padding:6px 0;font-style:italic}
.tag{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:0 5px;border-radius:3px;vertical-align:1px;margin-left:4px}
.tag.mine{background:var(--blue-soft);color:var(--blue)}
.tag.pending{background:var(--amber-soft);color:var(--amber)}

/* panel */
.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);z-index:20;display:flex;justify-content:flex-end}
.panel{background:var(--sheet);width:min(440px,100%);height:100%;overflow:auto;padding:calc(18px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) 18px;display:flex;flex-direction:column;gap:14px;border-left:2px solid var(--ink)}
.panel h2{font-size:24px}
.panel .close{align-self:flex-end;background:none;border:1px solid var(--rule);border-radius:4px;padding:2px 10px}
.panel form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px}
.field input,.field select,.field textarea{padding:8px 9px;border:1px solid var(--rule);background:var(--paper);border-radius:4px;min-width:0;font-size:16px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.detail-date{font-family:var(--f-display);font-size:44px;color:var(--red);line-height:1}
.note{white-space:pre-wrap;margin:0}
.msg{font-size:13px;padding:8px 10px;border-radius:4px;background:var(--amber-soft);color:var(--ink)}
.msg.err{background:var(--red-soft)}
.msg.ok{background:var(--blue-soft)}
.prop{border:1px solid var(--amber);border-radius:4px;padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--sheet)}
.hint{font-size:13px;color:var(--muted)}
.foot{font-size:13px;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.ver{font-family:var(--f-mono);font-size:11px}
@media (prefers-reduced-motion:no-preference){.sheet{animation:drop .35s ease-out}@keyframes drop{from{transform:translateY(-6px)}to{transform:none}}}