/* The printable sheets. Everything here is in real paper units (inches and
 * points) so the preview and the printout are the same thing. Themes are
 * classes on the sheet: .theme-cute, .theme-modern.
 */

@font-face { font-family: 'Graduate'; src: url('/fonts/graduate.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('/fonts/oswald.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/lora.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }

.sheet {
  --ink: #3A3A3C;
  --line: #9E9EA3;
  --alt: #E8702A;
  --num: #2E4A8C;
  --fs: 8.5pt;          /* event text, before fitting */
  --icon: 0.3in;        /* event icon, before fitting */
  position: relative;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  background: #fff; color: var(--ink);
  /* Every theme sets these two: a headline face for the title, key, weekdays
     and numbers, and a reading face made for longer event words. */
  --head: 'Fredoka', 'Nunito', sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  font-family: var(--body);
  overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet.is-portrait { --icon: 0.27in; --fs: 8pt; }
.sheet.kind-week { --icon: 0.46in; --fs: 11pt; }
.sheet.content-images { --icon: 0.42in; }
.sheet.content-images.kind-week { --icon: 0.62in; }
.sheet.content-text { --fs: 9.5pt; }

/* ------------------------------- header ---------------------------------- */

.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.2in; margin-bottom: 0.1in; }
.sh-head.is-continued { margin-bottom: 0.06in; }
.is-portrait .sh-head { flex-direction: column; align-items: flex-start; gap: 0.06in; }
/* The title keeps its natural size in the corner; the key takes the rest. */
.sh-title { display: flex; align-items: baseline; gap: 0.12in; flex: 0 1 auto; min-width: 0; max-width: 62%; }
.is-portrait .sh-title { max-width: 100%; }
.sh-title.has-art { align-items: center; }

/* The seasonal pictures: three tumbled together in front of the name like
   stickers, inside the title's corner. */
.sh-art { position: relative; flex-shrink: 0; width: 0.98in; height: 0.62in; }
.sh-art img { position: absolute; object-fit: contain; }
.sh-art-0 { width: 0.44in; height: 0.44in; left: 0; top: 0.12in; transform: rotate(-12deg); }
.sh-art-1 { width: 0.5in; height: 0.5in; left: 0.27in; top: 0; transform: rotate(6deg); z-index: 1; }
.sh-art-2 { width: 0.4in; height: 0.4in; left: 0.58in; top: 0.2in; transform: rotate(-4deg); }

.sh-main, .sh-sub, .sh-dow, .sh-num, .sh-dayname, .key-chip { font-family: var(--head); }
.sh-text, .sh-more { font-family: var(--body); }
/* A little room inside the title's box, so outlined letters (Cute, Sports)
   aren't trimmed at the edges. The box still hides anything genuinely too
   wide, which fitSheets shrinks to fit. */
.sh-main { margin: 0; font-size: 40pt; line-height: 1.15; padding: 0.04em 0.06em; white-space: nowrap; overflow: hidden; min-width: 0; }
.sh-sub { font-size: 16pt; font-weight: 700; opacity: .7; }
.is-continued .sh-main { font-size: 16pt; }
.is-continued .sh-sub { font-size: 11pt; }

.sh-key { display: flex; flex-direction: column; align-items: flex-end; gap: 0.04in; flex: 1 1 0; min-width: 0; }
.is-portrait .sh-key { align-items: flex-start; max-width: 100%; }
.key-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.04in 0.14in; }
.is-portrait .key-row { justify-content: flex-start; }
.key-chip { display: inline-flex; align-items: center; gap: 0.05in; font-size: 10pt; font-weight: 800; color: var(--t); white-space: nowrap; }
.key-chip i { width: 0.14in; height: 0.14in; border-radius: 50%; background: var(--c); border: 1.2pt solid var(--ink); }
.key-cals .key-chip { font-size: 8.5pt; font-weight: 700; }
.key-cals .key-chip i { border-radius: 3pt; }

/* -------------------------------- grid ----------------------------------- */

.sh-grid { flex: 1; min-height: 0; display: grid; border: 1.5pt solid var(--line); }
.sh-grid.is-month {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--rows), minmax(0, 1fr));
}
.sh-grid.is-week {
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.sh-dow {
  text-align: center; padding: 0.03in 0;
  font-size: 13pt; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1.5pt solid var(--line);
  border-right: 0.75pt solid var(--line);
}
.sh-dow:nth-child(7n) { border-right: 0; }

.sh-day {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0.04in;
  border-right: 0.75pt solid var(--line);
  border-bottom: 0.75pt solid var(--line);
  overflow: hidden;
}
.is-month .sh-day:nth-child(7n) { border-right: 0; }
.is-week .sh-day:last-child { border-right: 0; }
.is-week .sh-day { border-bottom: 0; }
/* No shading on weekends or anywhere else: plain white saves printer ink. */

.sh-num { font-size: 15pt; font-weight: 800; line-height: 1; color: var(--num); }
.sh-day.is-alt .sh-num { color: var(--alt); }
.sh-mon { font-size: 1em; }
.sh-dayhead { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.05in; margin-bottom: 0.05in; border-bottom: 0.75pt solid var(--line); }
.sh-dayname { font-size: 13pt; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.kind-week .sh-num { font-size: 20pt; }

/* ------------------------------- events ---------------------------------- */

.sh-items {
  --s: 1;
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: calc(0.03in * var(--s));
  padding-top: 0.02in;
}
.sh-item { --z: 1; display: flex; align-items: center; gap: calc(0.05in * var(--s)); min-width: 0; }
.sh-icon { flex-shrink: 0; width: calc(var(--icon) * var(--s) * var(--z)); height: calc(var(--icon) * var(--s) * var(--z)); object-fit: contain; }
.sh-text {
  min-width: 0; color: var(--t);
  font-size: calc(var(--fs) * var(--s) * var(--z)); font-weight: 800; line-height: 1.12;
  /* Wrap only between words, never mid-word; a word too long for its day
     makes the day's text smaller instead (see fitSheets). */
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}

.sh-item[hidden] { display: none; }

/* Events showing just a picture sit side by side in one row at the top of
   the day, rather than each taking a whole line. */
.sh-iconrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(0.04in * var(--s)); }
.sh-iconrow .sh-item { flex: 0 0 auto; }
.sh-more { font-size: 7pt; font-weight: 800; color: #6E6E75; text-align: right; }

/* Pictures only: icons flow side by side and fill the day. */
.content-images .sh-items { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; }

/* A day with just one thing stacks the icon over its words, like a sticker. */
.content-both .sh-items[data-count="1"] .sh-item { flex-direction: column; text-align: center; }

/* Weekly columns have room to stack everything that way. */
.kind-week.content-both .sh-items { justify-content: flex-start; gap: calc(0.08in * var(--s)); }

/* An event that belongs to someone: their color traces around the picture,
   like a sticker outline, since full-color icons can't simply be recolored.
   With several people the outline alternates between their colors.

   How: a layer just behind the picture is filled with the color (or the
   striped mix) and cut to the picture's own shape, eight times over, each
   copy nudged a little in a different direction. Together they make the
   shape slightly bigger than the picture, so only a thin rim shows. */
.sh-pic { --d: 1.6pt; position: relative; display: inline-flex; flex-shrink: 0; }
.sh-ring {
  position: absolute; inset: calc(var(--d) * -1);
  background: var(--ring);
  -webkit-mask-image: var(--src), var(--src), var(--src), var(--src), var(--src), var(--src), var(--src), var(--src);
          mask-image: var(--src), var(--src), var(--src), var(--src), var(--src), var(--src), var(--src), var(--src);
  -webkit-mask-size: calc(100% - 2 * var(--d)) calc(100% - 2 * var(--d));
          mask-size: calc(100% - 2 * var(--d)) calc(100% - 2 * var(--d));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 var(--d), calc(2 * var(--d)) var(--d), var(--d) 0, var(--d) calc(2 * var(--d)),
                         0 0, calc(2 * var(--d)) 0, 0 calc(2 * var(--d)), calc(2 * var(--d)) calc(2 * var(--d));
          mask-position: 0 var(--d), calc(2 * var(--d)) var(--d), var(--d) 0, var(--d) calc(2 * var(--d)),
                         0 0, calc(2 * var(--d)) 0, 0 calc(2 * var(--d)), calc(2 * var(--d)) calc(2 * var(--d));
}
.sh-pic .sh-icon { position: relative; }

/* On screen only: events and empty space can be clicked to edit or add. */
@media screen {
  .sheets .sh-item { cursor: pointer; border-radius: 4pt; }
  .sheets .sh-item:hover { outline: 1.5pt dashed #3D7FD9; outline-offset: 1pt; background: rgb(112 178 226 / .12); }
  .sheets .sh-day[data-date] { cursor: copy; }
  .sheets .sh-art { cursor: pointer; border-radius: 6pt; }
  .sheets .sh-art:hover { outline: 1.5pt dashed #3D7FD9; outline-offset: 2pt; background: rgb(112 178 226 / .12); }
  .sheets .sh-day[data-date]:hover { box-shadow: inset 0 0 0 2pt rgb(112 178 226 / .55); }
}

/* -------------------------------- themes --------------------------------- */

/* Cute: the logo's rounded letters and a rainbow of weekdays. */
.theme-cute { --head: 'Fredoka', 'Nunito', sans-serif; --body: 'Nunito', system-ui, sans-serif; }
.theme-cute .sh-main, .theme-cute .sh-dow, .theme-cute .sh-num, .theme-cute .sh-dayname, .theme-cute .sh-sub, .theme-cute .key-chip { font-weight: 600; }
.theme-cute .sh-main span { -webkit-text-stroke: 0.035em var(--ink); paint-order: stroke fill; }
.theme-cute .sh-main span:nth-child(4n+1) { color: #81C884; }
.theme-cute .sh-main span:nth-child(4n+2) { color: #70B2E2; }
.theme-cute .sh-main span:nth-child(4n+3) { color: #E57373; }
.theme-cute .sh-main span:nth-child(4n+4) { color: #F4C64E; }
.theme-cute .sh-dow, .theme-cute .sh-dayname { -webkit-text-stroke: 0.6pt var(--ink); paint-order: stroke fill; }
.theme-cute .dow-0 { color: #E57373; }
.theme-cute .dow-1 { color: #F28C38; }
.theme-cute .dow-2 { color: #F4C64E; }
.theme-cute .dow-3 { color: #5DB463; }
.theme-cute .dow-4 { color: #4FB3E8; }
.theme-cute .dow-5 { color: #8E5CC7; }
.theme-cute .dow-6 { color: #9E9EA3; }
.theme-cute .sh-dayhead .sh-num { -webkit-text-stroke: 0; }
.theme-cute .sh-grid { border-radius: 8pt; }

/* Modern: clean and quiet, thin lines. */
.theme-modern { --line: #C9C9CE; --num: #3A3A3C; --alt: #9E9EA3; --head: 'Outfit', sans-serif; --body: 'Manrope', sans-serif; }
.theme-modern .sh-main { font-weight: 300; letter-spacing: .08em; text-transform: uppercase; font-size: 34pt; }
.theme-modern .sh-sub { font-weight: 300; }
.theme-modern .key-chip { font-weight: 500; letter-spacing: .04em; }
.theme-modern .sh-dow { font-size: 9pt; font-weight: 500; letter-spacing: .16em; color: #6E6E75; }
.theme-modern .sh-num { font-size: 11pt; font-weight: 500; }
.theme-modern .sh-grid { border-width: 0.75pt; }
.theme-modern .sh-text { font-weight: 700; }

/* Sports: varsity lettering, team navy and red, a scoreboard weekday bar. */
.theme-sports { --line: #1F3A68; --num: #1F3A68; --alt: #C8102E; --head: 'Graduate', 'Oswald', serif; --body: 'Oswald', sans-serif; }
.theme-sports .sh-main, .theme-sports .sh-sub, .theme-sports .sh-dow, .theme-sports .sh-num,
.theme-sports .sh-dayname, .theme-sports .key-chip { font-weight: 400; }
.theme-sports .sh-text { font-weight: 500; letter-spacing: .01em; line-height: 1.08; }
.theme-sports .sh-main { color: #1F3A68; text-transform: uppercase; letter-spacing: .02em; -webkit-text-stroke: 0.03em #C8102E; paint-order: stroke fill; }
.theme-sports .sh-sub { color: #C8102E; opacity: 1; }
.theme-sports .sh-grid { border-width: 2pt; }
/* Weekday headers are navy lettering on white with a bold navy underline:
   the scoreboard look without a solid bar of ink. */
.theme-sports .sh-dow { color: #1F3A68; border-bottom: 2.5pt solid #1F3A68; font-size: 11pt; letter-spacing: .08em; }
.theme-sports .sh-dayhead { color: #1F3A68; border-bottom: 2.5pt solid #1F3A68; }
.theme-sports .sh-num { font-size: 13pt; }

/* Classic: a serif title and burgundy small caps. */
.theme-classic { --line: #B9AFA3; --num: #6B2737; --alt: #A38F7A; --head: 'Playfair Display', Georgia, serif; --body: 'Lora', Georgia, serif; }
.theme-classic .sh-main, .theme-classic .sh-sub, .theme-classic .sh-num, .theme-classic .sh-dayname, .theme-classic .key-chip { font-weight: 400; }
.theme-classic .sh-text { font-weight: 600; }
.theme-classic .sh-main { font-style: italic; color: #6B2737; font-size: 38pt; }
.theme-classic .sh-sub { font-size: 14pt; letter-spacing: .12em; }
.theme-classic .sh-dow { font-variant: small-caps; text-transform: none; font-weight: 400; letter-spacing: .14em; font-size: 12pt; color: #6B2737; }
.theme-classic .sh-dayname { font-variant: small-caps; text-transform: none; color: #6B2737; }
.theme-classic .sh-num { font-size: 13pt; }
.theme-classic .sh-grid { border-width: 1pt; }

/* ------------------------------- printing -------------------------------- */

#print-root { display: none; }

@media print {
  html, body { background: #fff !important; margin: 0; padding: 0; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; }
  #print-root .sheet { break-after: page; page-break-after: always; transform: none !important; }
  #print-root .sheet:last-child { break-after: auto; page-break-after: auto; }
}