/* ============================================================
   Calendar Maker
   Screen: a control bar + paper-like month previews.
   Print:  each month = one portrait US-Letter page.
   ============================================================ */

:root {
  --ink: #1a1a1a;
  --muted: #6b7280;
  --line: #c9c9c9;
  --frame: #333333;
  --paper: #ffffff;
  --weekend: #f6f6f6;
  --bg: #eceef1;
  --accent: #2563eb;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
}

/* ---------- Control bar (screen only) ---------- */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #dcdfe4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px 20px;
}

.app-bar__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.app-bar__mark { font-size: 20px; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.field > span { font-weight: 600; }

.field input[type="number"],
.field input[type="text"],
.field select {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 7px 9px;
  border: 1px solid #cfd3da;
  border-radius: 6px;
  background: #fff;
  min-width: 120px;
}

.field input[type="number"] { min-width: 90px; }

.field--check {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding-bottom: 8px;
}

.field--check input { width: 16px; height: 16px; }

.field--grow { flex: 1; min-width: 180px; }
.field--grow input { width: 100%; }

.field__buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--ghost {
  background: #fff;
  border-color: #cfd3da;
  color: var(--ink);
}

.btn--ghost:hover { background: #f5f6f8; }

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover { background: #1d4ed8; }

/* ---------- Preview area (screen) ---------- */
.preview {
  padding: 28px 16px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* One sheet of paper. Letter aspect ratio 8.5 : 11. */
.month-page {
  background: var(--paper);
  width: 8.5in;
  max-width: 100%;
  aspect-ratio: 8.5 / 11;
  padding: 0.25in;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ---------- The calendar itself ---------- */
.month {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.month-title {
  margin: 0 0 6px;
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-bottom: 3px;
}

.weekday {
  font-size: 12px;
  color: var(--ink);
  padding-left: 2px;
}

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  /* Thin light inner separators via a 1px gap over a line-colored bg; the
     outer frame is a heavier, darker border. */
  gap: 1px;
  background: var(--line);
  border: 2px solid var(--frame);
}

.day {
  background: var(--paper);
  padding: 3px 4px;
  min-height: 0; /* let 1fr rows shrink to share height evenly */
}

.day--not-current { color: var(--muted) }

/* Weekend dates (Sat/Sun) get a light gray fill, on screen and in print. */
.day--weekend { background: var(--weekend); }

.day__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}

.day__holiday {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 72%;
}

.day__num {
  font-size: 12px;
  margin-left: auto;
}

/* ---------- Mobile (screen only; the print layout is unaffected) ---------- */
@media screen and (max-width: 640px) {
  .app-bar { padding: 10px 14px; }
  .app-bar__title { font-size: 16px; margin-bottom: 10px; }

  .controls { gap: 10px 12px; }

  /* Buttons were a large block shoved to the right. On a phone give them a
     full-width row and let them share it evenly as one tidy toolbar. */
  .field__buttons {
    margin-left: 0;
    width: 100%;
    gap: 8px;
  }

  .btn {
    flex: 1 1 auto;
    font-size: 13px;
    padding: 8px 6px;
    white-space: nowrap;
  }

  .preview { padding: 16px 10px 40px; }

  /* Keep the day numbers on a clean grid: clip each cell and rein in the
     holiday label so long names ("Martin Luther King Day") can't wrap far
     enough to blow out the row height and knock the numbers out of line. */
  .day { overflow: hidden; }

  .month-title { font-size: 20px; }
  .weekday { font-size: 9px; }
  .day__num { font-size: 10px; }

  .day__holiday {
    font-size: 8px;
    line-height: 1.1;
    max-width: 62%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* ---------- Print ----------
   Zero the page margin so the browser has no room to inject its own
   header/footer (title, URL, page number, timestamp). The visual margin
   is applied as padding on the sheet instead. */
@page {
  size: Letter portrait;
  margin: 0;
}

@media print {
  html, body { background: #fff; }

  .app-bar { display: none !important; }

  .preview {
    padding: 0;
    gap: 0;
    display: block;
  }

  .month-page {
    width: 8.5in;
    max-width: none;
    aspect-ratio: auto;
    height: 11in;      /* full page; @page margin is 0 */
    padding: 0.5in;    /* the visual margin lives here now */
    box-shadow: none;
    overflow: hidden;  /* guard against sub-pixel overflow spilling a page */
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }

  .month-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  /* Keep gridlines crisp when printing. */
  .grid, .day, .month-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}