:root {
  color-scheme: light;
  --ink: #241c16;
  --pine: #1e4636;
  --paper: #f3ecdf;
  --card: #fffdf8;
  --line: #e4d7c4;
  --clay: #a33b2b;
  --muted: #6d6256;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h1, h2, h3 { font-family: Palatino, Georgia, serif; font-weight: 600; margin: 0; }

button, input, textarea, select { font: inherit; }

button {
  background: var(--pine);
  color: #f6f1e7;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

button.ghost { background: transparent; color: var(--pine); border: 1px solid var(--pine); }
button.warn { background: transparent; color: var(--clay); border: 1px solid #e7c4be; }

.band { background: var(--pine); color: #f6f1e7; }
.band-inner, .wrap { max-width: 1120px; margin: 0 auto; }
.band-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  padding: 18px 16px 20px;
}
.band h1 { font-size: 1.8rem; }
.dates, .band .clockbox span { color: #d7e4da; margin: 0; }
.clockbox { text-align: right; }
.clockbox time { font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 600; }
.wrap { padding: 14px 16px 48px; }

.nowline {
  display: block;
  width: 100%;
  text-align: left;
  background: #fffdf8;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.week { margin-top: 6px; }
.week h2 {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 16px 0 8px;
  padding: 0 20px;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cols {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  padding: 4px 20px 20px;
}
.cols::-webkit-scrollbar { height: 10px; }
.cols::-webkit-scrollbar-thumb { background: #d4c4ae; border-radius: 99px; }

.col {
  flex: 0 0 340px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 72vh;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
.col.is-today { border-color: var(--pine); box-shadow: 0 0 0 1px var(--pine); }
.col header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: #f6f0e4;
}
.col.is-today header { background: var(--pine); color: #f6f1e7; }
.col header b { display: block; font-size: 2.4rem; line-height: 0.9; font-family: Palatino, Georgia, serif; }
.col header span { color: var(--muted); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.12em; }
.col.is-today header span, .col.is-today header em { color: #d7e4da; }
.col header em { display: block; font-style: normal; font-weight: 650; margin-top: 6px; font-size: 1.15rem; }
.col header[data-act], .day[data-act] { cursor: pointer; }
.day { display: flex; flex-direction: column; flex: 1; }

.part h3 {
  margin: 0;
  padding: 14px 18px 2px;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.part.morn { background: #fffdf8; }
.part.quiet { background: #e7eef2; }
.part.after { background: #f3f7f1; }
.part.eve { background: #f7f0e6; }
.part + .part { border-top: 1px solid var(--line); }

button.ev {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 2px 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 12px 18px 13px 16px;
  box-shadow: inset 3px 0 0 var(--k, var(--pine));
}
.part .ev + .ev { box-shadow: inset 3px 0 0 var(--k, var(--pine)), inset 0 1px 0 var(--line); }
button.ev time {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
button.ev time b { font-weight: 700; font-size: 0.95rem; }
button.ev time i { font-style: normal; color: var(--muted); font-size: 0.8rem; font-weight: 500; }
button.ev span { font-family: Palatino, Georgia, serif; font-size: 1.28rem; font-weight: 600; line-height: 1.15; }
button.ev.is-now { background: #fff1d6; }

.k-meal { --k: #c47b2b; }
.k-gym { --k: #b4532a; }
.k-english { --k: #2a5a8a; }
.k-pe { --k: #1e4636; }
.k-music { --k: #6b4c8a; }
.k-draw { --k: #8a6232; }
.k-clay { --k: #8a4b32; }
.k-blocks { --k: #3d5a73; }
.k-walk { --k: #2f6b45; }
.k-sandbox { --k: #a6843a; }
.k-bike { --k: #1f6b62; }
.k-sleep { --k: #3d5a73; }
.k-hygiene { --k: #5d6e75; }
.k-evening { --k: #5c4a78; }
.k-arrival, .k-departure { --k: #a33b2b; }
.k-free { --k: #6d6256; }

.footer, .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer { margin-top: 16px; }
.basis, .hint, .muted { color: var(--muted); }
.basis { flex-basis: 100%; margin: 0; font-size: 0.92rem; }
.status { color: var(--pine); font-weight: 650; }

.palette { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.palette h2 { font-family: inherit; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 8px 0 6px; }
.types { display: flex; flex-wrap: wrap; gap: 6px; }
button.type {
  background: #fffdf8;
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--k, var(--pine));
  border-radius: 8px;
  padding: 0.28rem 0.5rem;
}
button.type.is-on { background: var(--pine); color: #f6f1e7; border-color: var(--pine); }
button.x { background: transparent; color: var(--clay); border-radius: 8px; padding: 0.2rem 0.4rem; }

.tools { margin-top: 14px; }
.tools select { width: auto; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(36, 28, 22, 0.35);
  display: grid;
  place-items: end center;
  z-index: 5;
  padding: 12px;
}
.sheet {
  width: min(440px, 100%);
  background: var(--card);
  border-radius: 18px;
  padding: 16px;
  max-height: min(86vh, 720px);
  overflow: auto;
}
.sheet h2 { font-size: 1.7rem; margin: 0.2rem 0 0.6rem; }
.sheet p { margin: 0.35rem 0; }
.kicker { margin: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); }
.sheet .do { font-size: 1.15rem; }
.fields { display: grid; gap: 8px; margin: 10px 0; }
label { display: grid; gap: 3px; font-size: 0.82rem; color: var(--muted); }
input, textarea, select {
  width: 100%;
  background: #fff;
  border: 1px solid #ddcfb8;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  color: var(--ink);
  font-size: 16px;
}
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.login { max-width: 420px; margin: 8vh auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; }
.err { color: var(--clay); min-height: 1.2em; margin: 0; }
.sheetpack { display: none; }

@media (min-width: 800px) {
  .modal { place-items: center; }
}

@media (max-width: 720px) {
  .band-inner { display: grid; }
  .clockbox { text-align: left; }
  .col { flex-basis: 86vw; min-height: 70vh; }
}

@media print {
  body { background: white; color: black; }
  .screen, .modal { display: none !important; }
  .sheetpack { display: block !important; }
  .sheet-cover, .sheet-day { break-after: page; page-break-after: always; }
  .sheet-day:last-child, body.print-one .sheet-day.on { break-after: auto; page-break-after: auto; }
  body.print-one .sheet-cover, body.print-one .sheet-day { display: none !important; }
  body.print-one .sheet-day.on { display: block !important; }
  .block { break-inside: avoid; page-break-inside: avoid; margin: 0 0 7px; }
  .block time { font-weight: 650; }
  .block h3 { font-size: 12pt; font-family: Palatino, Georgia, serif; }
  .block p { margin: 1px 0 0; font-size: 10.5pt; }
  .sheet-kicker { letter-spacing: 0.12em; text-transform: uppercase; font-size: 9pt; margin: 0; }
}