/* Gulf Elementary PTO — production stylesheet
 * Ported from handoff/design_reference/styles.css with three changes:
 *   1. Body background = paper (not the dark canvas surround)
 *   2. .pto-page is max-width, not fixed-width (responsiveness added in Phase 6)
 *   3. Added .tag variants for academic / staff-appreciation / meeting
 */

:root {
  --ink:        oklch(0.22 0.04 255);
  --ink-soft:   oklch(0.42 0.04 255);
  --ink-faint:  oklch(0.52 0.035 255);
  --rule:       oklch(0.85 0.02 255);
  --rule-soft:  oklch(0.92 0.015 255);
  --paper:      oklch(0.985 0.008 85);
  --paper-warm: oklch(0.965 0.018 85);
  --navy:       oklch(0.55 0.14 235);
  --navy-deep:  oklch(0.42 0.15 240);
  --gold:       oklch(0.82 0.13 85);
  --gold-deep:  oklch(0.68 0.14 75);
  --crimson:    oklch(0.52 0.16 28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.pto-page {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  position: relative;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }

.label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rule { height: 1px; background: var(--rule); border: 0; }
.rule-thick { height: 3px; background: var(--ink); border: 0; }

/* ── Divider hierarchy ───────────────────────────────────────────────────────
 * Month boundaries must clearly out-weigh the within-month event separators.
 *   month   → heavy, dark rule under each month header (4px ink)
 *   event   → light hairline between rows (1px soft rule)
 * Keeping these two ranks far apart is what lets a month read as a strong break. */
.month-divider { border-bottom: 4px solid var(--ink); }
.event-row { border-top: 1px solid var(--rule-soft); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--navy);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease;
}
.btn-primary:hover { background: var(--navy-deep); }
.btn-primary .arrow { transition: transform 160ms ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.placeholder {
  position: relative;
  background: repeating-linear-gradient(135deg,
    oklch(0.85 0.02 255) 0 10px,
    oklch(0.90 0.02 255) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.tag.signature           { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.fundraiser          { border-color: var(--gold-deep); color: var(--gold-deep); }
.tag.community           { border-color: var(--ink-soft); color: var(--ink-soft); }
.tag.academic            { border-color: var(--navy); color: var(--navy); }
.tag.staff-appreciation  { background: var(--gold-deep); color: var(--paper); border-color: var(--gold-deep); }
.tag.meeting             { border-color: var(--ink-faint); color: var(--ink-faint); }

.slot-bar {
  height: 4px;
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.slot-bar > span {
  display: block;
  height: 100%;
  background: var(--gold-deep);
}
.slot-bar.full > span { background: var(--ink); }

/* ── Back-to-top control ─────────────────────────────────────────────────────
 * Circular, navy/gold, fixed bottom-right. Hidden until the user scrolls past
 * ~1 viewport (the .is-visible class is toggled from app.js), then it fades in.
 * Only transform + opacity animate, so reveal stays on the compositor. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--navy-deep);
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  cursor: pointer;
  box-shadow: 0 6px 18px oklch(0.22 0.04 255 / 0.3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease, background 140ms ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--navy-deep); }
.back-to-top:active { transform: translateY(1px); }
.back-to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.back-to-top__arrow { font-size: 20px; line-height: 1; font-weight: 700; }
.back-to-top__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 120ms ease; transform: none; }
  .back-to-top.is-visible { transform: none; }
}

/* Admin shortcut — small navy/gold pill pinned to the top-right corner that
 * opens the login-protected Event Manager (manage.html). Sits in the empty
 * top-right of the navy header band and, being fixed, stays readable over
 * white content while scrolling. */
.admin-link {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--navy-deep);
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold);
  text-decoration: none;
  box-shadow: 0 4px 12px oklch(0.22 0.04 255 / 0.28);
  opacity: 0.85;
  transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
}
.admin-link:hover { opacity: 1; background: var(--navy-deep); }
.admin-link:active { transform: translateY(1px); }
.admin-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; opacity: 1; }
.admin-link__glyph { font-size: 13px; line-height: 1; }
.admin-link__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
}

/* ── Ellie the Eagle (decorative mascot, driven by eagle.js) ────────────────
 * Fixed-position; eagle.js moves her with translate3d. Wings flap while the
 * .is-flying class is on; perched she bobs gently. scaleX(-1) flips her to
 * face left. Sits below modals/toasts (z 90 < 100). */
.pto-eagle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 6px oklch(0.22 0.04 255 / 0.25));
  will-change: transform;
}
.pto-eagle svg { display: block; overflow: visible; }
.pto-eagle.is-facing-left svg { transform: scaleX(-1); }

.pto-eagle__wing { transform-origin: 52px 34px; }
.pto-eagle.is-flying .pto-eagle__wing--front { animation: pto-flap 260ms ease-in-out infinite; }
.pto-eagle.is-flying .pto-eagle__wing--back  { animation: pto-flap 260ms ease-in-out infinite reverse; }
@keyframes pto-flap {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(16deg); }
}

/* Gentle idle bob while perched */
.pto-eagle:not(.is-flying) svg { animation: pto-bob 3.2s ease-in-out infinite; }
.pto-eagle.is-facing-left:not(.is-flying) svg { animation: pto-bob-flipped 3.2s ease-in-out infinite; }
@keyframes pto-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes pto-bob-flipped {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .pto-eagle svg, .pto-eagle.is-facing-left svg,
  .pto-eagle .pto-eagle__wing { animation: none !important; }
}

/* Layout-level rules (header band, year-at-a-glance grid, month tables, footer)
 * are mostly applied via inline styles in app.js for parity with the prototype.
 * If those grow, hoist them here as named classes. */

/* ── Tablet (768–1023px) ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .pto-page > div:first-child { padding: 28px 32px 22px !important; }  /* header */
  .pto-page > div:first-child h1 { font-size: 44px !important; }
  .pto-page section { padding: 20px 32px 0 !important; }

  /* Year-at-a-glance collapses to 5x2 */
  .pto-page > div:nth-child(2) > div:last-child {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* Widgets stack 2-col on tablet */
  .pto-page > div:nth-last-child(2) {
    grid-template-columns: 1fr 1fr !important;
    margin: 32px 32px 0 !important;
  }
}

/* ── Mobile (<768px) ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pto-page > div:first-child { padding: 24px 20px 18px !important; }
  .pto-page > div:first-child h1 { font-size: 32px !important; }
  .pto-page > div:first-child > div:nth-child(2) { grid-template-columns: 1fr !important; }
  .pto-page > div:first-child > div:nth-child(2) > div:last-child { text-align: left !important; margin-top: 8px; }

  .pto-page section { padding: 16px 20px 0 !important; }
  .pto-page section h2 { font-size: 22px !important; }

  /* Year-at-a-glance: 4x3 grid */
  .pto-page > div:nth-child(2) { padding: 16px 20px !important; }
  .pto-page > div:nth-child(2) > div:last-child {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Event rows: stack each cell vertically */
  .pto-page table, .pto-page tbody, .pto-page tr, .pto-page td {
    display: block !important;
    width: 100% !important;
  }
  .pto-page td { padding: 6px 0 !important; width: auto !important; }
  .pto-page td:first-child { padding-top: 14px !important; }
  .pto-page td:last-child { text-align: left !important; padding-bottom: 14px !important; }
  .pto-page tr { border-top: 1px solid var(--rule-soft) !important; padding: 0 !important; }

  /* Widgets + footer: single column */
  .pto-page > div:nth-last-child(2),
  .pto-page > div:last-child {
    grid-template-columns: 1fr !important;
    margin: 24px 20px 0 !important;
    padding: 20px !important;
    gap: 20px !important;
  }

  /* Expanded blurb pulls left margin in */
  .pto-page tr + tr td[colspan="5"] > div { margin-left: 0 !important; }
}