:root {
  --cell: 12px;
  --gutter: calc(var(--cell) * 4);
  --lh: calc(var(--cell) * 2);
  --paper: #FBFBF7;
  --grid: #D5DDEA;
  --grid-strong: #B3C0D6;
  --margin: #D2372B;
  --ink: #1D3A9E;
  --ink-strong: #14297A;
  --ink-soft: #4A5A94;
  --red: #C0392B;
  --graphite: #2B2B2B;
  --graphite-soft: #5C5C5C;
  --white: #FFFFFF;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 900px) { :root { --cell: 14px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--graphite);
  font: 16px/var(--lh) var(--font);
  font-variant-numeric: tabular-nums;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}
::selection { background: var(--ink); color: var(--paper); }
html { caret-color: var(--ink); accent-color: var(--ink); }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink-strong); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.sheet { position: relative; max-width: calc(var(--cell) * 52); margin: 0 auto; padding: var(--lh) 0 calc(var(--cell) * 6); }
.sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--gutter); width: 2px; background: var(--margin); opacity: .8; }

.line { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); align-items: start; }
.line > .m { text-align: right; padding-right: calc(var(--cell) / 2 + 3px); color: var(--ink); font-weight: 600; }
.line > .c { padding: 0 var(--cell) 0 calc(var(--cell) * 1.5); min-width: 0; }

h1 { font-size: 28px; line-height: calc(var(--cell) * 3); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: var(--lh); font-weight: 700; margin-top: var(--lh); }
h2 .c { border-bottom: 2px solid var(--graphite); padding-bottom: 0; }
h3 { font-size: 14px; line-height: var(--lh); font-weight: 700; margin-top: var(--cell); color: var(--graphite-soft); text-transform: uppercase; letter-spacing: .06em; }
.small, .note, .payer, .kind, .meta { font-size: 16px; line-height: var(--lh); color: var(--graphite-soft); }
.muted { color: var(--graphite-soft); }
.ink { color: var(--ink); }
.red { color: var(--red); }
.date-inline { font-weight: 400; color: var(--graphite-soft); }
.when { color: var(--graphite-soft); }

/* обкладинка */
.cover-c { padding-top: var(--cell); }
.label-box { display: inline-block; background: var(--white); border: 2px solid var(--graphite); padding: var(--cell) calc(var(--cell) * 1.5); }
.sub { font-size: 16px; line-height: var(--lh); color: var(--graphite-soft); }
.date { text-align: right; font-size: 20px; margin-top: var(--lh); }
.status { margin-top: 0; }
.toc { display: flex; flex-wrap: wrap; gap: calc(var(--cell) / 2) var(--cell); margin-top: var(--lh); }
.toc a { font-size: 16px; line-height: var(--lh); }

/* уроки дня і тижня */
.lessons .lesson { position: relative; }
.lesson .subject { font-weight: 500; }
.lesson.done .subject, .lesson.done .when { color: var(--graphite-soft); }
.lesson.done .n { color: var(--graphite-soft); }
.lesson.done .n::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.5l2.6 2.6L10 3.5' fill='none' stroke='%231D3A9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.lesson.now .n, .lesson.now .subject { color: var(--red); }
.lesson .cursor { position: absolute; left: calc(var(--gutter) + 2px); right: var(--cell); height: 2px; background: var(--red); pointer-events: none; }
.lesson .cursor::before { content: ""; position: absolute; left: calc(var(--cell) * -1); top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
@media (prefers-reduced-motion: no-preference) { .lesson .cursor { transition: top 600ms ease; } }

.tabs { display: flex; gap: calc(var(--cell) / 2); margin-bottom: var(--cell); }
.tab { min-height: 44px; padding: 0 var(--cell); background: var(--white); border: 2px solid var(--grid-strong); color: var(--graphite); cursor: pointer; }
.tab[aria-selected="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.day h3 { display: none; }
.day li { display: grid; grid-template-columns: calc(var(--cell) * 2) auto 1fr; gap: 0 calc(var(--cell) / 2); }
.day li .n { color: var(--ink); font-weight: 600; text-align: right; }
.bells { display: flex; flex-wrap: wrap; gap: 0 var(--cell); }
@media (min-width: 900px) {
  .tabs { display: none; }
  .week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 var(--cell); }
  .day[hidden] { display: block; }
  .day h3 { display: block; margin-top: 0; }
  .day li { grid-template-columns: calc(var(--cell) * 1.5) 1fr; }
  .day li .when { display: none; }
}

/* на завтра */
.notice { color: var(--red); }
.pack-lessons > li { margin-top: var(--cell); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--cell) * 11), 1fr)); gap: var(--cell); margin-top: calc(var(--cell) / 2); }
.card { position: relative; display: block; cursor: pointer; min-height: 44px; }
.card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.card .box { position: absolute; z-index: 1; top: calc(var(--cell) / 2); left: calc(var(--cell) / 2); width: var(--lh); height: var(--lh); background: var(--white); border: 2px solid var(--ink); }
.card input:checked ~ .box::after { content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.card input:focus-visible ~ .box { outline: 3px solid var(--ink); outline-offset: 2px; }
.card .photo { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--cover, var(--grid)); border: 2px solid var(--graphite); box-shadow: 2px 3px 8px rgba(43, 43, 43, .25); overflow: hidden; }
.card .photo img { width: 100%; height: 100%; object-fit: cover; }
.card .photo.landscape { aspect-ratio: 4 / 3; }
.cover-title { padding: var(--cell); color: var(--white); font-weight: 700; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cap { display: block; margin-top: calc(var(--cell) / 2); line-height: 1.3; }
.cap b { display: block; font-weight: 600; }
.item.packed .photo { opacity: .45; }
.item.packed .cap b { text-decoration: line-through; color: var(--graphite-soft); }
.unknown { margin-top: calc(var(--cell) / 2); color: var(--ink); }
.did { margin-top: var(--cell); }
.raw { white-space: pre-wrap; font: 16px/var(--lh) var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--grid-strong); padding: var(--cell); }
details summary { cursor: pointer; color: var(--ink); min-height: 44px; display: flex; align-items: center; }

/* іменини */
.bday.today .name { font-weight: 700; }
.month { margin-top: calc(var(--cell) / 2); }
.month li { display: grid; grid-template-columns: calc(var(--cell) * 8) 1fr; }

/* фонд */
.row { display: flex; justify-content: space-between; gap: var(--cell); align-items: baseline; }
.row .who { display: flex; flex-direction: column; min-width: 0; }
.row .amt { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.sum .amt { font-weight: 600; }
.sum.total .c { border-bottom: 3px double var(--ink); font-weight: 700; }
.ledger .line { border-bottom: 1px solid var(--grid-strong); }
.ok { color: var(--graphite-soft); }
.expense { margin-top: var(--cell); }
.expense .title { white-space: pre-wrap; }
.receipt { display: inline-block; margin-top: calc(var(--cell) / 2); border: 2px solid var(--graphite); box-shadow: 2px 3px 8px rgba(43, 43, 43, .25); padding: 0; background: var(--white); cursor: pointer; }
.receipt img { width: calc(var(--cell) * 8); height: calc(var(--cell) * 10); object-fit: cover; }
.payments li { display: flex; flex-wrap: wrap; gap: 0 calc(var(--cell) / 2); }
dialog { border: 2px solid var(--graphite); padding: var(--cell); max-width: min(94vw, 760px); background: var(--white); }
dialog::backdrop { background: rgba(43, 43, 43, .6); }
dialog img { max-height: 80vh; margin: 0 auto; }
dialog .row { margin-top: var(--cell); }

/* документи, кнопки, стани */
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--cell); background: var(--white); border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--white); }
.doc { margin-top: var(--cell); }
.doc .actions { display: flex; gap: calc(var(--cell) / 2); margin-top: calc(var(--cell) / 2); }
.sk { height: var(--cell); margin: calc(var(--cell) / 2) 0; background: var(--grid-strong); opacity: .6; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: sk 1.2s ease-in-out infinite; } @keyframes sk { 50% { opacity: .3; } } }
.error { color: var(--red); }
footer { margin-top: calc(var(--cell) * 3); }