/* calendar.css - the calendar's own stylesheet, mobile-first (2026 redesign, phase 1).
   Loaded last by include/header.php on every page, so it wins over the older files.
   Breakpoints: phone up to 600px, tablet up to 1024px, desktop from 1025px.

   Step 1: design tokens and a baseline so the viewport tag never makes a phone worse
           than before (nothing fixed-width, nothing wider than the screen).
   Step 2: the header (UO strip, NSRC bar with the site menu, calendar tabs, sponsor
           band on phones), the footer and the base typography. The 2013 copy of the
           Drupal theme CSS is no longer loaded. */

:root {
  --cal-blue: #0a4f9c;
  --cal-link: #1a5fb4;
  --cal-orange: #e8890c;
  --cal-ink: #1d1d1f;
  --cal-muted: #5f6368;
  --cal-line: #e3e6ea;
  --cal-soft: #eef2f7;
  --cal-font: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif;
  --cal-font-head: Oswald, "Arial Narrow", "Lucida Grande", Arial, sans-serif;
  --cal-gutter: 16px;
  --cal-max: 1200px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- base typography (replaces what the Drupal theme files used to set) ---------- */
body.cal-body {
  margin: 0;
  min-width: 0;                 /* site.css still says 1140px; every page is fluid now */
  font-family: var(--cal-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--cal-ink);
  background: #fff;
}
.cal-body a { color: var(--cal-link); }
.cal-body img { border: 0; }
.cal-wrap { max-width: var(--cal-max); margin: 0 auto; padding: 0 var(--cal-gutter); }

/* ---------- header ---------- */
.cal-header { text-align: left; font-family: var(--cal-font); }
.cal-header a { text-decoration: none; }

.cal-uo { background: #1b1b1b; color: #ccc; }
.cal-uo .cal-wrap { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.cal-uo img { height: 24px; width: auto; display: block; }
.cal-uo-links { display: none; font: 12px/1 Georgia, "Times New Roman", serif; }
.cal-uo-links a { color: #ddd; margin-left: 14px; }

.cal-bar { background: var(--cal-blue); }
.cal-bar .cal-wrap { display: flex; align-items: center; gap: 12px; min-height: 58px; position: relative; }
.cal-logo { display: block; background: #fff; border-radius: 0 0 20px 0; padding: 5px 16px 6px 6px; margin: 0 0 0 calc(-1 * var(--cal-gutter)); }
.cal-logo img { height: 44px; width: auto; display: block; }
.cal-menu-btn { margin-left: auto; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; padding: 8px 10px; cursor: pointer; }
.cal-sitemenu { display: none; }
.cal-header.cal-menu-open .cal-sitemenu {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--cal-blue);
  padding: 4px var(--cal-gutter) 14px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .25);
}
.cal-sitemenu > a {
  display: block;
  color: #fff;
  font: 500 17px/1 var(--cal-font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.cal-sitemenu > a.cal-sitemenu-here { color: #ffd98a; }
.cal-search { padding: 12px 0 4px; }
.cal-menu-account { padding-top: 10px; }
.cal-menu-account a { display: inline-block; color: #dbe6f5; font-size: 14px; margin: 0 18px 0 0; padding: 6px 0; }

.cal-tabs { background: #fff; border-bottom: 1px solid var(--cal-line); position: sticky; top: 0; z-index: 5; }
.cal-tabs .cal-wrap { display: flex; align-items: stretch; }
.cal-tab {
  flex: 1;
  text-align: center;
  padding: 11px 4px 9px;
  font: 500 15px/1.2 var(--cal-font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cal-muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-tab.cal-on { color: var(--cal-blue); border-color: var(--cal-blue); }
.cal-tabs-spacer { display: none; }
.cal-tab-minor { display: none; }

.cal-tab-sponsor { display: none; }   /* desktops: the sponsor credit sits in the tab row */
.cal-sponsor { display: flex; justify-content: center; padding: 5px; background: #f6f7f9; border-bottom: 1px solid var(--cal-line); font-size: 13px; color: var(--cal-muted); }
.cal-sponsor a { display: flex; align-items: center; gap: 10px; color: inherit; }
.cal-sponsor img { height: 26px; width: auto; }

/* ---------- footer ---------- */
.cal-footer { margin-top: 28px; padding: 18px 0 30px; background: #f6f7f9; border-top: 1px solid var(--cal-line); text-align: left; font-size: 14px; color: var(--cal-muted); line-height: 1.5; }
.cal-footer h2 { font: 500 15px/1.2 var(--cal-font-head); text-transform: uppercase; letter-spacing: .07em; color: var(--cal-orange); margin: 0 0 8px; }
.cal-footer p { margin: 0 0 10px; }
.cal-footer-col { margin-bottom: 16px; }
.cal-social a { display: inline-block; margin: 0 10px 0 0; }
.cal-social img { width: 44px; height: 44px; }
.cal-footer-note { padding-top: 10px; border-top: 1px solid var(--cal-line); font-size: 13px; }
.cal-footer-note a { margin-right: 16px; }

/* ---------- phone and tablet baseline for the old content area (step 1) ---------- */
@media (max-width: 1024px) {
  body { min-width: 0 !important; }

  /* the 1140px page table becomes a stack: sidebar block, then content block */
  table.main,
  table.main > tbody,
  table.main > tbody > tr,
  table.main > tbody > tr > td { display: block; width: auto !important; }
  table.main { max-width: 100%; }
  /* site.css gives td.content height:300px (a minimum for a cell, a hard height once it is a block) */
  td.content { height: auto !important; width: auto !important; border-left: 0; padding-left: 0; padding-right: 0; }
  td.left { width: auto !important; }
  #page-wrapper, #page, .container { width: auto !important; min-width: 0 !important; max-width: 100%; }
  div#calendarLoginContainer { width: auto !important; }

  /* inner tables with fixed pixel widths (850px listing, 698px detail, 742px forms) */
  table { max-width: 100%; }
  td.content table { width: 100% !important; }

  img, iframe { max-width: 100%; }
  input[type="text"], input[type="password"], select, textarea { max-width: 100%; }
}

/* the old content area assumed the Drupal base stylesheet's left-aligned cells */
#page td, #page th { text-align: left; }

/* phones: the sidebar (recently added, feeds, statistics, sponsor) is hidden until the
   listing is redone in step 3; the sponsor band above carries the logo */
@media (max-width: 600px) {
  table.main > tbody > tr > td.left { display: none; }
}

/* ---------- tablet ---------- */
@media (min-width: 601px) {
  .cal-uo img { height: 30px; }
  .cal-uo-links { display: block; }
  .cal-logo img { height: 56px; }
  .cal-footer-cols { display: flex; gap: 40px; }
  .cal-footer-col { flex: 1; }
}

/* ---------- desktop ---------- */
@media (min-width: 1025px) {
  .cal-uo .cal-wrap { height: 40px; }
  .cal-uo img { height: 34px; }
  .cal-bar .cal-wrap { gap: 28px; min-height: 76px; }
  .cal-logo { padding: 8px 30px 10px 8px; border-radius: 0 0 36px 0; }
  .cal-logo img { height: 66px; }
  .cal-menu-btn { display: none; }
  .cal-sitemenu { display: flex; align-items: center; gap: 24px; flex: 1; }
  .cal-sitemenu > a { display: inline; padding: 0; border: 0; font-size: 17px; }
  .cal-sitemenu > a.cal-sitemenu-here { color: #ffd98a; }
  .cal-search { margin-left: auto; padding: 0; }
  .cal-menu-account { display: none; }

  .cal-tabs { position: static; }
  .cal-tabs .cal-wrap { justify-content: flex-start; align-items: center; }
  .cal-tab { flex: 0 0 auto; padding: 12px 20px 9px; font-size: 16px; }
  .cal-tabs-spacer { display: block; flex: 1; }
  .cal-tab-minor { display: inline-block; font-size: 14px; color: var(--cal-muted); padding: 0 16px; }
  .cal-tab-account { padding-right: 0; }

  .cal-sponsor { display: none; }       /* phones only; on desktops the credit is in the tab row */
  .cal-tab-sponsor { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cal-muted); text-decoration: none; padding: 0 18px 0 0; margin-right: 4px; border-right: 1px solid var(--cal-line); white-space: nowrap; }
  .cal-tab-sponsor img { height: 26px; width: auto; }

  /* the old 1140px content table sits inside the 1200px wrapper */
  body.cal-body { text-align: center; }  /* site.css relies on this for the centered page table */
  #page.cal-wrap { padding: 0; }
}

/* ---------- step 3: the listing (index.php) ---------- */
.cal-page { text-align: left; }
.cal-side { display: none; }                       /* phones: no sidebar; the sponsor band and the Feeds tab cover it */
.cal-main { padding-bottom: 8px; }

.cal-toolbar { display: flex; gap: 8px; align-items: center; padding: 12px 0 6px; }
.cal-seg { display: flex; flex: 1; border: 1px solid var(--cal-blue); border-radius: 8px; overflow: hidden; }
.cal-seg a { flex: 1; text-align: center; padding: 8px 0; font-size: 14px; color: var(--cal-blue); text-decoration: none; }
.cal-seg a + a { border-left: 1px solid var(--cal-blue); }
.cal-seg a.cal-on { background: var(--cal-blue); color: #fff; font-weight: 600; }
.cal-filter-btn { border: 1px solid #c8ced6; background: #fff; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 14px; color: var(--cal-ink); cursor: pointer; }
.cal-filter-btn.cal-filter-active { border-color: var(--cal-blue); color: var(--cal-blue); font-weight: 600; }

.cal-filters { display: none; margin: 4px 0 8px; padding: 12px; background: var(--cal-soft); border: 1px solid var(--cal-line); border-radius: 10px; }
.cal-filters.cal-open { display: grid; gap: 10px; }
.cal-filters label { display: grid; gap: 4px; font-size: 13px; color: var(--cal-muted); }
.cal-filters select, .cal-filters input[type="search"] { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #c8ced6; border-radius: 8px; background: #fff; color: var(--cal-ink); width: 100%; box-sizing: border-box; }
.cal-filter-actions { display: flex; gap: 10px; align-items: center; }
.cal-filter-actions button { font: inherit; font-size: 15px; font-weight: 600; background: var(--cal-blue); color: #fff; border: 0; border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.cal-btn-link { font-size: 14px; }

.cal-chips { margin: 0 0 8px; font-size: 13px; color: var(--cal-muted); }
/* phones and tablets have no sidebar, so the organizer links sit above the list when logged in */
/* one low line: the phrase on the left, the two short links on the right; the links' padding is the tap area */
.cal-organizers { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; padding: 0 4px 0 12px; background: var(--cal-soft); border-radius: 8px; font-size: 14px; line-height: 1.3; color: var(--cal-muted); }
.cal-organizers span { margin-right: auto; }
.cal-organizers a { padding: 5px 8px; font-weight: 600; text-decoration: none; }
@media (min-width: 1025px) { .cal-organizers { display: none; } }
.cal-chips a { display: inline-block; border: 1px solid var(--cal-line); border-radius: 12px; padding: 2px 9px; margin: 2px 4px 2px 0; background: #fff; color: var(--cal-ink); text-decoration: none; }
.cal-chips a b { color: var(--cal-muted); font-weight: 600; }

.cal-h1 { font: 500 21px/1.2 var(--cal-font-head); margin: 10px 0 2px; color: var(--cal-ink); width: auto; background: none; padding: 0; text-align: left; }  /* site.css styles h1 as a 760px grey bar */
.cal-events li { padding: 0; }
.cal-sub { margin: 0 0 10px; font-size: 13px; color: var(--cal-muted); }

.cal-events { margin: 0 calc(-1 * var(--cal-gutter)); }
.cal-events ol { list-style: none; margin: 0; padding: 0; }
.cal-month h2 {
  position: sticky; top: var(--cal-tabs-h, 42px); z-index: 4;
  margin: 0; padding: 6px var(--cal-gutter);
  background: var(--cal-soft); color: var(--cal-blue);
  font: 500 14px/1.3 var(--cal-font-head); text-transform: uppercase; letter-spacing: .08em;
  border-top: 1px solid var(--cal-line); border-bottom: 1px solid var(--cal-line);
}
.cal-head { display: none; }                       /* the Date / Title / Location row is a desktop thing */
.cal-ev { border-bottom: 1px solid var(--cal-line); }
.cal-ev a {
  display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto auto; column-gap: 12px;
  padding: 9px var(--cal-gutter); color: inherit; text-decoration: none; align-items: center;
}
.cal-date { grid-row: 1 / 3; text-align: center; background: var(--cal-soft); border-radius: 8px; padding: 5px 2px; color: var(--cal-blue); line-height: 1.1; }
.cal-date b { display: block; font: 600 17px/1.1 var(--cal-font-head); white-space: nowrap; }
.cal-date small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; white-space: nowrap; }
.cal-date-full { display: none; }
.cal-t { font-weight: 600; font-size: 16px; color: var(--cal-link); line-height: 1.25; }
.cal-l { font-size: 14px; color: var(--cal-muted); line-height: 1.3; }
.cal-badge { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: 10px; background: #e8f1fb; color: var(--cal-blue); margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.cal-empty { padding: 24px var(--cal-gutter); color: var(--cal-muted); }

.cal-about { margin: 18px 0 0; font-size: 14px; color: var(--cal-muted); line-height: 1.5; }
.cal-about summary { cursor: pointer; color: var(--cal-link); font-size: 15px; }
.cal-about p { margin: 10px 0; }

/* sidebar (tablets and desktops) */
@media (min-width: 601px) {
  .cal-side { display: block; font-size: 14px; line-height: 1.45; }
  /* the sidebar: three soft boxes (recently added, feeds, statistics) */
  .cal-side h3 { font: 500 14px/1.2 var(--cal-font-head); text-transform: uppercase; letter-spacing: .07em; color: var(--cal-orange); margin: 0 0 8px; }
  .cal-pw { display: none; }           /* the sponsor credit is in the header (band or tab row) */
  .cal-side-box { background: var(--cal-soft); border-radius: 10px; padding: 12px 14px 10px; margin: 0 0 14px; }
  .cal-rec a { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid #dfe5ec; text-decoration: none; }
  .cal-rec a:first-child { border-top: 0; padding-top: 2px; }
  .cal-rec img { flex: 0 0 auto; width: 48px; height: 30px; margin-top: 2px; border-radius: 5px; }
  .cal-rec span { min-width: 0; }
  .cal-rec small { display: block; color: var(--cal-muted); font-size: 12px; }
  .cal-side-links { margin: 0; }
  .cal-side-links a { display: flex; align-items: center; gap: 8px; padding: 5px 0; text-decoration: none; font-weight: 600; flex-wrap: wrap; }
  .cal-side-links a small { flex-basis: 100%; padding-left: 24px; margin-top: -3px; font-weight: 400; font-size: 12px; color: var(--cal-muted); }
  .cal-side-links .cal-ico { color: var(--cal-blue); }
  .cal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cal-stats a { display: block; text-align: center; background: #fff; border-radius: 8px; padding: 8px 2px 6px; text-decoration: none; }
  .cal-stats a:hover { box-shadow: 0 0 0 2px var(--cal-blue) inset; }
  .cal-stats b { display: block; font: 600 20px/1.1 var(--cal-font-head); color: var(--cal-blue); }
  .cal-stats small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--cal-muted); margin-top: 3px; }
}

/* tablets: the list first, the sidebar below it in two columns */
@media (min-width: 601px) and (max-width: 1024px) {
  .cal-listing { display: flex; flex-direction: column; }
  .cal-side { order: 2; margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--cal-line); display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .cal-side-box { margin-top: 12px; }
  .cal-side .cal-side-box:first-child { grid-row: 1 / 3; }
  .cal-filters.cal-open { grid-template-columns: 1fr 1fr; }
  .cal-filters .cal-filter-actions { grid-column: 1 / -1; }
}

/* desktop: sidebar left, table-like rows with month headings */
@media (min-width: 1025px) {
  .cal-listing { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 36px; padding: 0 var(--cal-gutter); }
  .cal-side { padding-top: 14px; }

  .cal-pw img { display: block; margin-top: 4px; height: 48px; width: auto; }

  .cal-toolbar { padding: 14px 0 6px; }
  .cal-seg { flex: 0 0 auto; }
  .cal-seg a { padding: 7px 22px; }
  .cal-filter-btn { display: none; }
  .cal-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 6px; padding: 0; background: none; border: 0; }
  .cal-filters label span { display: none; }
  .cal-filters select, .cal-filters input[type="search"] { width: auto; min-width: 150px; padding: 7px 10px; font-size: 14px; }
  .cal-filter-actions button { padding: 8px 16px; font-size: 14px; }

  .cal-h1 { font-size: 26px; margin-top: 14px; }
  .cal-sub { font-size: 14px; }

  .cal-events { margin: 0; }
  .cal-month h2 { position: static; background: none; border: 0; padding: 18px 0 6px; font-size: 16px; }
  .cal-head { display: grid; grid-template-columns: 160px minmax(0, 1fr) 300px; column-gap: 16px; padding: 6px 8px; border-bottom: 2px solid var(--cal-blue); font-weight: 600; font-size: 14px; }
  .cal-head a { text-decoration: none; }
  .cal-ev a { grid-template-columns: 160px minmax(0, 1fr) 300px; grid-template-rows: auto; column-gap: 16px; padding: 8px; }
  .cal-ev:nth-child(odd) { background: #fafbfc; }
  .cal-date { grid-row: auto; text-align: left; background: none; border-radius: 0; padding: 0; color: var(--cal-ink); line-height: 1.35; }
  .cal-date b, .cal-date small { display: none; }
  .cal-date-full { display: block; font-size: 15px; }
  .cal-t { font-size: 15px; }
  .cal-l { font-size: 14px; color: var(--cal-ink); }
}

/* ---------- step 4: the event page (helpfiles/workshop_info_main.php) ---------- */
.cal-detail { max-width: 820px; margin: 0 auto; }
.cal-event { padding: 10px 0 4px; }
.cal-event h1 { font: 500 26px/1.15 var(--cal-font-head); margin: 6px 0 8px; color: var(--cal-ink); width: auto; background: none; padding: 0; text-align: left; }
/* title, date and place on the left, the region map on the right, the buttons under both;
   the right edge of the map is the right edge of the buttons at every width */
.cal-event-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start; }
.cal-event-text { grid-column: 1; min-width: 0; }
.cal-region-img { grid-column: 2; grid-row: 1; display: block; width: 120px; height: 75px; margin-top: 8px; border-radius: 8px; }
.cal-event-top .cal-actions { grid-column: 1 / -1; }
.cal-when { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: var(--cal-ink); }
.cal-where { margin: 0 0 14px; font-size: 15px; color: var(--cal-muted); }
.cal-venue { color: var(--cal-ink); }
.cal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.cal-actions a { flex: 1 1 30%; text-align: center; border: 1px solid var(--cal-blue); border-radius: 8px; padding: 10px 6px; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--cal-blue); }
.cal-actions a.cal-pri { background: var(--cal-blue); color: #fff; }
.cal-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.cal-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .cal-actions a.cal-pri { flex: 1 1 100%; }
  .cal-actions a { font-size: 13px; padding: 10px 4px; }
  .cal-long { display: none; }   /* "Open in Google Maps" is "Google Maps" on phones */
}
.cal-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 15px; }
.cal-facts dt { color: var(--cal-muted); margin: 0; padding: 0; }
.cal-facts dd { margin: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
.cal-facts dt, .cal-facts dd { align-self: start; line-height: 1.45; }
.cal-desc { font-size: 16px; line-height: 1.5; margin: 0 0 18px; padding-top: 12px; border-top: 1px solid var(--cal-line); }
.cal-desc a { overflow-wrap: anywhere; }
.cal-back { font-size: 14px; margin: 4px 0 8px; }
.cal-back a { text-decoration: none; }
.cal-back-bottom { margin-top: 10px; }
/* plain text pages (AUP, privacy) */
.cal-text h2 { font: 500 18px/1.2 var(--cal-font-head); color: var(--cal-blue); margin: 18px 0 6px; }
.cal-text ul { padding-left: 22px; }
.cal-text li { margin: 0 0 6px; }

@media (min-width: 601px) {
  .cal-actions a { flex: 1 1 auto; min-width: 150px; }   /* the row stretches to the right edge of the map */
  .cal-event-top { width: fit-content; max-width: 100%; grid-template-columns: minmax(0, 430px) auto; column-gap: 20px; }
  .cal-region-img { width: 144px; height: 90px; margin-top: 10px; }
}
@media (min-width: 1025px) {
  .cal-detail { padding: 8px var(--cal-gutter) 0; }
  .cal-event h1 { font-size: 32px; }
  .cal-region-img { margin-top: 12px; }
}

/* ---------- step 5: the map page (map.php) ---------- */
/* the InfoGraphics Lab dashboard in an iframe, a normal page with header and footer.
   Phones: the dashboard has no phone layout, so it is laid out at 854x1000px and scaled
   to the screen width (sizes set by the script in map.php). */
.cal-map { padding-top: 10px; }
.cal-map-frame { height: 100vh; max-height: 685px; }
.cal-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.cal-map-note { margin: 10px 0 0; font-size: 13px; color: var(--cal-muted); }
@media (max-width: 600px) {
  .cal-map-frame { overflow: hidden; position: relative; height: auto; max-height: none; }
  .cal-map-frame iframe { width: 854px; height: 1000px; max-width: none; transform-origin: 0 0; border-radius: 0; }   /* laid out at 854px from the first paint */
}
@media (min-width: 601px) {
  .cal-map { padding-top: 14px; }
}

/* ---------- step 6: the old form pages on phones, and the view switch ---------- */
/* login, register, recover-password, organizer forms: fixed-width tables become fluid
   and label / field cells stack, so the pages are readable without sideways scrolling.
   (The forms themselves are redone in phase 3.) */
@media (max-width: 1024px) {
  table[width], table[style*="width"] { width: 100% !important; }
  td[width], th[width], td[style*="width"] { width: auto !important; }
  hr[width] { width: auto; }
  input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea, select { max-width: 100%; box-sizing: border-box; }
  textarea { width: 100%; }
}
@media (max-width: 600px) {
  /* stack label / field cells of the form tables only; tables with header cells
     (the organizer's event list, search results) stay tables */
  body.cal-section-account table:not(:has(th)):not(.form_table):not(.info_table):not(.search_table) td { display: block; width: auto !important; padding: 2px 0; }
  body.cal-section-account table:not(:has(th)) td:empty { display: none; }
  body.cal-section-account table:has(th) { font-size: 13px; }
  body.cal-section-account table:has(th) th, body.cal-section-account table:has(th) td { width: auto !important; padding: 4px 3px; vertical-align: top; }
  body.cal-section-account font { font-size: 15px; }
  body.cal-section-account input[type="text"], body.cal-section-account input[type="password"] { width: 100%; }
}

/* the Desktop view / Mobile view link only matters on small screens, or when the
   desktop view is forced and the person needs the way back */
.cal-viewswitch { display: none; }
@media (max-width: 1024px) {
  .cal-viewswitch { display: inline; }
}
body.cal-view-desktop .cal-viewswitch { display: inline; }

/* ---------- organizer pages: the event picker (organizers/update-select-event.php) ---------- */
.cal-organizer .cal-h1 { margin-top: 12px; }
.cal-error { margin: 0 0 10px; padding: 8px 12px; background: #fdecea; color: #a1281b; border-radius: 8px; font-size: 14px; }
.cal-legend { margin: 0 0 10px; font-size: 13px; color: var(--cal-muted); }
.cal-tag { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: 10px; background: #fff3dd; color: #8a5a00; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.cal-btn-pri { font: inherit; font-size: 15px; font-weight: 600; background: var(--cal-blue); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; white-space: nowrap; }
.cal-seg-buttons button { flex: 1; font: inherit; font-size: 14px; padding: 8px 0; background: #fff; color: var(--cal-blue); border: 0; cursor: pointer; white-space: nowrap; }
.cal-seg-buttons button + button { border-left: 1px solid var(--cal-blue); }
.cal-seg-buttons button.cal-on { background: var(--cal-blue); color: #fff; font-weight: 600; }
.cal-pick { margin: 0 calc(-1 * var(--cal-gutter)); }
.cal-pick .cal-ev-locked { background: #fafafa; }
.cal-pick-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 9px var(--cal-gutter); cursor: pointer; }
.cal-pick-row input[type="radio"] { width: 20px; height: 20px; margin: 0 auto; accent-color: var(--cal-blue); }
.cal-pick-none { text-align: center; color: #bbb; }
.cal-pick-text { min-width: 0; }
.cal-pick .cal-t { display: block; font-size: 15px; }
.cal-pick .cal-t a { display: inline; padding: 0; }   /* not the listing's grid link */
.cal-pick .cal-t .cal-tag { margin-left: 0; }
.cal-pick .cal-l { display: block; font-size: 13px; }
.cal-pick-bottom { margin: 12px 0 0; }
.cal-organizer .cal-about { margin-top: 20px; }

@media (min-width: 1025px) {
  .cal-pick { margin: 0; }
  .cal-pick-row { grid-template-columns: 32px minmax(0, 1fr); padding: 7px 8px; }
  .cal-pick .cal-ev:nth-child(odd) { background: #fafbfc; }
  .cal-pick .cal-month h2 { padding-bottom: 5px; border-bottom: 2px solid var(--cal-blue); }   /* the picker has no Date / Title / Location row to carry the line */
  .cal-pick .cal-t, .cal-pick .cal-l { display: inline; }
  .cal-pick .cal-l::before { content: "\00a0\00b7\00a0"; color: var(--cal-muted); }
  .cal-organizer .cal-toolbar { padding: 14px 0 6px; }
  .cal-seg-buttons { flex: 0 0 auto; }
  .cal-seg-buttons button { padding: 7px 18px; }
}

/* the account tab shows the person's name where there is room, "Account" on phones */
.cal-tab-name { display: none; }
@media (min-width: 601px) { .cal-tab-name { display: inline; } .cal-tab-short { display: none; } }

/* ---------- the plain search box shown until Google's script is loaded ---------- */
.cal-search-stub { display: flex; width: 100%; max-width: 240px; }
.cal-search-stub input[type="search"] { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid #c8ced6; border-right: 0; border-radius: 4px 0 0 4px; background: #fff; color: var(--cal-ink); }
.cal-search-stub button { font-size: 14px; padding: 0 10px; border: 0; border-radius: 0 4px 4px 0; background: #1a73e8; color: #fff; cursor: pointer; }
.cal-sitemenu .cal-search-stub { max-width: none; }

/* ---------- the Feeds page (ical/ and rss/) ---------- */
.cal-feeds h2 { font: 500 18px/1.2 var(--cal-font-head); color: var(--cal-blue); margin: 22px 0 8px; }
.cal-feeds-list { list-style: none; margin: 0; padding: 0; }
.cal-feeds-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cal-line); }
.cal-feeds-list a.cal-feed-link { flex: 0 0 auto; min-width: 118px; text-align: center; border: 1px solid var(--cal-blue); border-radius: 8px; padding: 8px 10px; font-weight: 600; font-size: 14px; text-decoration: none; }
.cal-feeds-list .cal-feed-text { font-size: 14px; color: var(--cal-muted); }
.cal-feeds-list .cal-feed-text b { color: var(--cal-ink); }
.cal-feeds-url { font-size: 12px; color: var(--cal-muted); word-break: break-all; }
.cal-feeds p, .cal-feeds li { line-height: 1.5; }

/* the event form (organizers/form.php) until it is redesigned: no 750px minimum on phones */
@media (max-width: 1024px) {
  table[style*="min-width"] { min-width: 0 !important; }
}

/* ---------- account pages: the profile form and its review page (scripts/update.php) ---------- */
/* One block per field. Phones: label, box, hint, top to bottom. Desktops: three columns,
   label | box | hint, so every box and every hint starts at the same position. */
.cal-account .cal-sub { margin-bottom: 14px; }
.cal-form { margin: 0; text-align: left; }
.cal-field { display: grid; grid-template-areas: "label label" "control hint"; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 7px 14px; align-items: start; padding: 12px 0; margin: 0; border-top: 1px solid var(--cal-line); min-width: 0; }
.cal-label { grid-area: label; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--cal-ink); }
.cal-label .cal-help, .cal-sublabel .cal-help { font-size: 12px; font-weight: 400; margin-left: 6px; padding: 0 7px; border: 1px solid var(--cal-line); border-radius: 10px; color: var(--cal-muted); text-decoration: none; vertical-align: 2px; white-space: nowrap; }
.cal-control { grid-area: control; display: grid; gap: 8px; min-width: 0; }
.cal-hint { grid-area: hint; margin: 0; padding-top: 2px; font-size: 13px; line-height: 1.4; color: var(--cal-muted); }
.cal-sublabel { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cal-muted); margin: 2px 0 -4px; }
.cal-account input[type="text"],
.cal-account input[type="password"] {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  font: inherit; font-size: 15px; line-height: 1.3; padding: 9px 10px;
  color: var(--cal-ink); background: #f3f7fc; border: 1.5px solid #9db4d1; border-radius: 8px;
  -webkit-appearance: none; appearance: none;
}
.cal-account input::placeholder { color: #8a94a3; opacity: 1; }
.cal-account input:focus { outline: none; border-color: var(--cal-blue); background: #fff; box-shadow: 0 0 0 3px rgba(10, 79, 156, .18); }
.cal-field-bad .cal-label { color: #a1281b; }
.cal-field-bad input[type="text"], .cal-field-bad input[type="password"] { border-color: #c0392b; background: #fdf3f2; }
/* the sentence in regular weight so "Error:" and the names of the boxes and lists it points at stand out in bold */
.cal-field-error { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.45; color: #a1281b; }
.cal-field-error b { font-weight: 700; }
.cal-field-error a { color: inherit; text-decoration: underline; }
.cal-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 0 6px; border-top: 1px solid var(--cal-line); }
.cal-btn-lg { font-size: 15px; padding: 11px 22px; }
.cal-btn-sec { font: inherit; font-size: 15px; font-weight: 600; background: #fff; color: var(--cal-blue); border: 1.5px solid var(--cal-blue); border-radius: 8px; padding: 9px 18px; cursor: pointer; white-space: nowrap; }
.cal-btn-sec.cal-btn-lg { padding: 9.5px 20px; }
.cal-form-actions .cal-btn-link { font-size: 15px; }
.cal-note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--cal-muted); }
.cal-note-geo { margin-top: 26px; }   /* a line of air after the buttons */
.cal-review { margin: 4px 0 18px; padding: 12px 14px; background: var(--cal-soft); border-radius: 10px; }
.cal-review dd { font-weight: 600; }
/* a warning under a value (the region does not fit the country): orange, not an error */
.cal-review-notice { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.4; color: #b45309; }

@media (max-width: 600px) {
  .cal-review { grid-template-columns: 1fr; gap: 2px 0; }
  .cal-review dt { margin-top: 8px; font-size: 13px; }
  .cal-review dt:first-child { margin-top: 0; }
}

/* tablets: the same, with more room for the hint */
@media (min-width: 601px) and (max-width: 1024px) {
  .cal-field { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .cal-hint { font-size: 14px; }
}

/* desktops: label | box | hint */
@media (min-width: 1025px) {
  .cal-account { max-width: 1000px; }
  .cal-account .cal-h1 { font-size: 23px; }
  .cal-field { grid-template-areas: "label control hint"; grid-template-columns: 200px 290px minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 14px 0; }
  .cal-label { font-size: 14.5px; padding-top: 8px; }
  .cal-hint { padding-top: 8px; }
  .cal-account input[type="text"], .cal-account input[type="password"] { font-size: 14px; padding: 8px 10px; border-radius: 7px; }
  .cal-account .cal-btn-lg { font-size: 14px; padding: 10px 21px; }
  .cal-account .cal-btn-sec.cal-btn-lg { padding: 8.5px 19px; }
  .cal-form-actions { padding-left: 228px; }   /* under the boxes: 200px label column + 28px gap */
  .cal-review { max-width: 518px; }             /* as wide as the label and box columns */
}

/* ---------- the event form (organizers/create-event.php and update.php) ---------- */
.cal-form-h2 { font: 500 18px/1.2 var(--cal-font-head); color: var(--cal-blue); margin: 20px 0 4px; }
.cal-form > .cal-form-h2:first-child { margin-top: 6px; }
.cal-form-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--cal-muted); }
.cal-form-intro + .cal-field { border-top: 0; }
.cal-account select,
.cal-account textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  font: inherit; font-size: 15px; line-height: 1.3; padding: 9px 10px;
  color: var(--cal-ink); background: #f3f7fc; border: 1.5px solid #9db4d1; border-radius: 8px;
}
.cal-account select { padding-right: 28px; }
.cal-account textarea { min-height: 110px; resize: vertical; }
.cal-account select:focus, .cal-account textarea:focus { outline: none; border-color: var(--cal-blue); background: #fff; box-shadow: 0 0 0 3px rgba(10, 79, 156, .18); }
.cal-field-bad select, .cal-field-bad textarea { border-color: #c0392b; background: #fdf3f2; }
.cal-control .cal-sublabel + select, .cal-control .cal-sublabel + input, .cal-control .cal-sublabel + .cal-row { margin-top: 2px; }
.cal-choices { gap: 6px; }
.cal-choice { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.3; padding: 2px 0; cursor: pointer; }
.cal-choice input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--cal-blue); }
.cal-choice-sub { padding-left: 27px; font-size: 13px; color: var(--cal-muted); }
.cal-choice-sub input { width: 13.5px; height: 13.5px; margin-top: 2px; }
/* phones: the month select on its own line, day and year below it */
.cal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.cal-row > select { min-width: 0; }
.cal-row > select:first-child { grid-column: 1 / -1; }
@media (min-width: 601px) {
  .cal-row { display: flex; }
  .cal-row > select { flex: 1 1 0; }
  .cal-row > .cal-w-day { flex: 0 0 84px; }
  .cal-row > .cal-w-year { flex: 0 0 100px; }
}
.cal-btn-danger { font: inherit; font-size: 15px; font-weight: 600; background: #fff; color: #a1281b; border: 1.5px solid #c0392b; border-radius: 8px; padding: 9px 18px; cursor: pointer; white-space: nowrap; }
.cal-btn-danger.cal-btn-lg { padding: 9.5px 20px; }
.cal-form-actions-plain { border-top: 0; padding-top: 6px; }
.cal-ok { margin: 0 0 10px; padding: 8px 12px; background: #e6f4ea; color: #1e6b32; border-radius: 8px; font-size: 14px; }
.cal-notice { margin-bottom: -8px; }
.cal-fin-event { font-size: 17px; font-weight: 600; margin: 4px 0 14px; }
.cal-fin-event .cal-l { font-weight: 400; }
.cal-search-existing .cal-about { margin: 4px 0 6px; padding: 10px 14px; background: var(--cal-soft); border-radius: 10px; }
.cal-search-existing .cal-about p { margin: 8px 0; }
.cal-search-existing .cal-filters { margin: 6px 0 0; padding: 0; background: none; border: 0; }
.cal-search-existing .cal-filter-actions .cal-btn-sec { font-size: 14px; padding: 8px 14px; }
.cal-found { margin: 10px 0 0; border-top: 1px solid var(--cal-line); }
.cal-found-foot { margin: 8px 0 0 !important; font-size: 13px; color: var(--cal-muted); }
.cal-filter-actions .cal-btn-plain, .cal-btn-plain { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--cal-link); cursor: pointer; text-decoration: underline; }
.cal-found .cal-ev { background: #fff; }


/* the event picker (organizers/update-select-event.php): an Open button per event */
.cal-pick-row { grid-template-columns: 50px minmax(0, 1fr); cursor: default; }
.cal-btn-open { font: inherit; font-size: 11px; font-weight: 600; width: 44px; padding: 3px 0; background: #fff; color: var(--cal-blue); border: 1px solid var(--cal-blue); border-radius: 5px; cursor: pointer; }
.cal-btn-open:hover, .cal-btn-open:focus-visible { background: var(--cal-blue); color: #fff; }
.cal-pick-sep { margin: 0 8px; color: var(--cal-line); }
.cal-pick-row.cal-pick-row-plain { grid-template-columns: minmax(0, 1fr); padding-left: 10px; padding-right: 10px; }
.cal-found { margin-left: 0; margin-right: 0; }

@media (min-width: 1025px) {
  .cal-eventform .cal-field { grid-template-columns: 200px 380px minmax(0, 1fr); }
  .cal-eventform .cal-review { max-width: 608px; }
  .cal-account select, .cal-account textarea { font-size: 14px; padding: 8px 10px; border-radius: 7px; }
  .cal-account select { padding-right: 26px; }
  .cal-choice { font-size: 14px; }
  .cal-choice-sub { font-size: 12px; }
  .cal-form-actions-plain { padding-left: 0; }
  .cal-search-existing .cal-filters.cal-open { display: flex; }
  .cal-pick-row { grid-template-columns: 50px minmax(0, 1fr); }
}

/* ---------- help: the overlay opened by the "help" chips, and the help pages ---------- */
.cal-dialog { width: min(560px, calc(100% - 24px)); max-height: min(80vh, calc(100% - 24px)); margin: auto; padding: 0; border: 0; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); color: var(--cal-ink); font-family: var(--cal-font); font-size: 15px; line-height: 1.5; text-align: left; display: none; flex-direction: column; overflow: hidden; }
.cal-dialog[open] { display: flex; }
.cal-dialog::backdrop { background: rgba(10, 30, 60, .45); }
.cal-dialog-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--cal-blue); color: #fff; flex: 0 0 auto; }
.cal-dialog-head h2 { flex: 1; margin: 0; font: 500 19px/1.2 var(--cal-font-head); color: #fff; }
.cal-dialog-close { font: inherit; cursor: pointer; }
.cal-dialog-head .cal-dialog-close { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; padding: 0 2px; opacity: .85; }
.cal-dialog-head .cal-dialog-close:hover { opacity: 1; }
.cal-dialog-body { padding: 14px 18px 4px; overflow: auto; flex: 1 1 auto; }
.cal-dialog-body p, .cal-dialog-body ul { margin: 0 0 10px; }
.cal-dialog-body ul { padding-left: 22px; }
.cal-dialog-body li { margin: 0 0 6px; padding: 0; }
.cal-dialog-body code { font-size: 14px; background: var(--cal-soft); padding: 1px 4px; border-radius: 4px; }
.cal-dialog-foot { padding: 10px 18px 14px; border-top: 1px solid var(--cal-line); text-align: right; flex: 0 0 auto; }
.cal-help-table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 6px 0 12px; }
.cal-help-table th, .cal-help-table td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--cal-line); vertical-align: top; }
.cal-help-table th { color: var(--cal-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.cal-help-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cal-orange); }
.cal-help-page h1 { margin-top: 2px; }
.cal-help-page p.cal-back a { margin-right: 18px; }

/* ---------- the small account cards: log in, password reset ---------- */
.cal-auth { max-width: 460px; margin-left: 0; }
.cal-auth .cal-field { grid-template-areas: "label" "control" "hint"; grid-template-columns: minmax(0, 1fr); }
.cal-auth .cal-hint { padding-top: 0; }
.cal-auth .cal-form-actions { padding-left: 0; }
.cal-btn-a { display: inline-block; text-decoration: none; }
a.cal-btn-pri { color: #fff; }
a.cal-btn-sec { color: var(--cal-blue); }
.cal-question { margin: 0; padding: 9px 12px; background: var(--cal-soft); border-radius: 8px; font-size: 15px; font-style: italic; }
@media (min-width: 1025px) {
  .cal-auth { margin: 0 auto; }
  .cal-auth .cal-field { grid-template-areas: "label" "control" "hint"; grid-template-columns: minmax(0, 1fr); padding: 12px 0; }
  .cal-auth .cal-label { padding-top: 0; }
  .cal-auth .cal-hint { padding-top: 0; }
  .cal-auth .cal-form-actions { padding-left: 0; }
}