/* The calendar (26 Oct 2026). The shape follows Jeff's other app (greetup, mobile/app/(tabs)/calendar.tsx): a white
   header with the title and a line under it, pill buttons on the right (Subscribe outlined, the main one filled), a
   tinted panel for the calendar link with the link in a box and two buttons, the month on a white panel with a dot
   under each day that has something and a filled circle on the chosen day, a legend, and the events as cards. The
   colors are this site's tokens (site.css): felt green for public, amber for what is yours, paper and ink. */

.cal-page { --cal-public: var(--felt); --cal-private: var(--accent); max-width: 52rem; margin: 0 auto; }
.cal-page h1 { margin: 0; font-size: 2rem; }
.cal-back { margin: 0.4rem 0 0.8rem; font-weight: 700; }
.cal-back a { text-decoration: none; }

/* the header: title, count, pills */
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--card); border-radius: 16px; padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); margin: 0.6rem 0 1rem; }
.cal-sub { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: max(0.95rem, var(--fine-min, 0px)); }
.cal-head-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cal-pill { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.4rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--felt); background: var(--card); color: var(--felt); font: 700 max(0.95rem, var(--fine-min, 0px)) var(--font); cursor: pointer; text-decoration: none; }
.cal-pill.solid { background: var(--felt); color: #fff; }
.cal-pill:hover { filter: brightness(1.05); }

/* the calendar link panel */
.cal-subscribe { background: #eef5ef; border: 1px solid #c9dfcd; border-radius: 16px; padding: 1rem 1.2rem; margin: 0 0 1rem; }
.cal-subscribe h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.cal-url { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; margin: 0.6rem 0; overflow-wrap: anywhere; }
.cal-url code { font-size: max(0.9rem, var(--fine-min, 0px)); color: var(--ink-soft); }
.cal-subscribe-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* buttons */
.cal-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.2rem; border-radius: 10px;
  background: var(--felt); color: #fff; border: 1.5px solid var(--felt); font: 700 1rem var(--font); cursor: pointer; text-decoration: none; }
.cal-btn.outline { background: var(--card); color: var(--felt); }
.cal-btn.on { background: var(--felt-deep); border-color: var(--felt-deep); color: #fff; }
.cal-btn.outline.on { background: #e3efe5; color: var(--felt-deep); }
.cal-btn.gold { background: var(--accent); border-color: var(--accent); }
.cal-btn:hover { filter: brightness(1.06); }
/* back from signing in: the button they chose, lit, waiting for the one tap that saves it */
.cal-btn.cal-lit { box-shadow: 0 0 0 4px #f6c443, 0 0 18px rgba(246, 196, 67, 0.7); }
.cal-ask { background: #fdf0d0; color: #5a3a06; border-radius: 10px; padding: 0.6rem 0.9rem; font-weight: 700; margin: 0 0 0.8rem; }

/* the two views */
.cal-tabs { display: flex; gap: 0.3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cal-tabs a { padding: 0.6rem 1rem; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--ink-soft); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px; }
.cal-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--felt); }

/* the legend and the dots */
.cal-legend { display: flex; gap: 1.2rem; justify-content: center; color: var(--ink-soft); font-size: max(0.92rem, var(--fine-min, 0px)); margin: 0.4rem 0 1rem; font-weight: 700; }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot.public { background: var(--cal-public); }
.dot.private { background: var(--cal-private); }

/* the list */
.cal-group { font-size: 1.25rem; margin: 1.4rem 0 0.6rem; }
.cal-list { display: grid; gap: 0.7rem; }
.cal-item { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--card); border-radius: 12px; padding: 0.9rem 1rem;
  box-shadow: var(--shadow-md); color: inherit; text-decoration: none; border-left: 5px solid var(--cal-public); }
.cal-item:hover { box-shadow: 0 8px 22px rgba(40, 30, 15, 0.16); }
.cal-item:has(.cal-private) { border-left-color: var(--cal-private); }
.cal-item.cal-cancelled { opacity: 0.65; }
.cal-item.cal-cancelled .cal-title { text-decoration: line-through; }
.cal-date { flex: none; width: 3.4rem; text-align: center; background: var(--paper-2); border-radius: 10px; padding: 0.35rem 0 0.4rem; line-height: 1.1; }
.cal-dow { display: block; font-size: max(0.8rem, var(--fine-min, 0px)); font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.cal-dnum { display: block; font: 700 1.5rem var(--display); }
.cal-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cal-title { font: 700 1.12rem/1.25 var(--display); }
.cal-when, .cal-place { color: var(--ink-soft); font-size: max(0.97rem, var(--fine-min, 0px)); }
.cal-when .cal-local { display: block; font-size: max(0.9rem, var(--fine-min, 0px)); }
.cal-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; font-size: max(0.8rem, var(--fine-min, 0px)); font-weight: 700; }
.cal-chip { padding: 0.1rem 0.55rem; border-radius: 999px; color: #fff; }
.cal-chip.cal-public { background: var(--cal-public); }
.cal-chip.cal-private { background: var(--cal-private); }
.cal-kind { color: var(--ink-soft); }
.cal-now { padding: 0.1rem 0.55rem; border-radius: 999px; background: #fdf0d0; color: #7a4a06; }
.cal-off { padding: 0.1rem 0.55rem; border-radius: 999px; background: #f7dcdc; color: #8a2a12; }
.cal-going { padding: 0.1rem 0.55rem; border-radius: 999px; background: #e3efe5; color: var(--felt-deep); }

/* the month */
.cal-month { background: var(--card); border-radius: 16px; padding: 0.8rem 0.8rem 0.2rem; box-shadow: var(--shadow-sm); }
.cal-month-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.cal-month-head h2 { margin: 0; font-size: 1.25rem; }
.cal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.8rem;
  text-decoration: none; color: var(--felt); }
.cal-arrow:hover { background: var(--paper-2); }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { font-size: max(0.85rem, var(--fine-min, 0px)); color: var(--ink-soft); font-weight: 700; padding: 0.3rem 0; }
.cal-grid td { text-align: center; padding: 2px; }
.cal-grid td a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px;
  border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; }
.cal-grid td a:hover { background: var(--paper-2); }
.cal-grid td.out a { color: #b9b0a0; }
.cal-grid td.today .cal-n { color: var(--felt); text-decoration: underline; text-underline-offset: 3px; }
.cal-grid td.chosen .cal-n { background: var(--felt); color: #fff; text-decoration: none; }
.cal-n { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; }
.cal-dots { display: flex; gap: 3px; height: 9px; }
.cal-day-head { font-size: 1.2rem; margin: 1.2rem 0 0.7rem; }

/* empty, sign in, add */
.cal-empty { text-align: center; padding: 2rem 1rem; color: var(--ink-soft); }
.cal-empty-big { font: 700 1.2rem var(--display); color: var(--ink-soft); margin-bottom: 0.4rem; }
.cal-signin, .cal-box { background: var(--card); border-radius: 14px; padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); margin: 1.2rem 0; }
.cal-box h3 { margin: 0 0 0.4rem; }
.cal-add { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.6rem 0 0; }

/* one item */
.cal-event h1 { font-size: 2.1rem; margin: 0.3rem 0 0.3rem; }
.cal-when.big { font-size: 1.15rem; color: var(--ink); font-weight: 700; margin: 0 0 1rem; }
.cal-when.big .cal-local { font-weight: 400; color: var(--ink-soft); }
.cal-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.cal-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1rem; }
.cal-about h2 { font-size: 1.2rem; }
.cal-side { background: var(--paper-2); border-radius: 14px; padding: 1rem 1.2rem; align-self: start; }
.cal-side h3 { font-size: max(0.85rem, var(--fine-min, 0px)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 0.3rem; }
.cal-side p { margin: 0 0 1rem; }
.cal-ics { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; min-height: 44px; }
.cal-names { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.cal-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 0.3rem 1rem; }
.cal-people label.check, .cal-form label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; min-height: 40px; }
.cal-cancel { margin-top: 1.2rem; }

/* the form */
.cal-form { display: grid; gap: 1rem; max-width: 38rem; }
.cal-form > label { display: grid; gap: 0.3rem; font-weight: 700; }
.cal-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.cal-form-row label { display: grid; gap: 0.3rem; font-weight: 700; }
.cal-form input[type=date], .cal-form input[type=time], .cal-form textarea, .cal-form select, .cal-form input[type=text] {
  font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; width: 100%; min-height: 44px; }
.cal-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 1rem 0.9rem; margin: 0; }
.cal-form legend { font-weight: 700; padding: 0 0.3rem; }

/* the strip beside the countdown (home page and lobby) */
.cal-strip { margin: 1rem 0 0; max-width: 34rem; }
.cal-strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 0.4rem; }
.cal-strip-head h2 { font-size: 1rem; margin: 0; }
.cal-strip-head a { font-size: max(0.95rem, var(--fine-min, 0px)); font-weight: 700; }
.cal-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cal-strip li a { display: flex; gap: 0.7rem; align-items: center; background: var(--card); border-radius: 10px; padding: 0.5rem 0.7rem;
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); border-left: 4px solid var(--cal-public, #35693f); min-height: 44px; }
.cal-strip li b { font: 700 1rem/1.2 var(--display); }
.cal-strip li span { color: var(--ink-soft); font-size: max(0.9rem, var(--fine-min, 0px)); }
.cal-strip .cal-strip-words { display: flex; flex-direction: column; min-width: 0; }
.hero .cal-strip-head h2 { color: inherit; }
.hero .cal-strip-head a { color: #fff6e2; }
/* on the home page's felt the items sit on the green as dark glass with cream words, like the rest of the panel
   (1 Nov: the paper boxes from the page's own background were white blocks on the felt) */
.hero .cal-strip li a { background: var(--g-glass); color: var(--g-cream); box-shadow: inset 0 0 0 1px var(--g-line);
  border-left-color: var(--g-gold-2); }
.hero .cal-strip li a:hover, .hero .cal-strip li a:focus-visible { background: var(--g-glass-strong); }
/* the title in full cream, the date in soft cream: ".cal-strip li span" also matches the span that holds both */
.hero .cal-strip .cal-strip-words { color: var(--g-cream); }
.hero .cal-strip .cal-strip-words > span { color: var(--g-cream-soft); }
.hol-lobby .cal-strip { flex: 1 1 18rem; }

@media (max-width: 700px) {
  .cal-detail { grid-template-columns: 1fr; }
  .cal-form-row { grid-template-columns: 1fr 1fr; }
  .cal-page h1 { font-size: 1.7rem; }
  .cal-event h1 { font-size: 1.8rem; }
  .cal-head { padding: 0.9rem 1rem; }
}