/* Base layout: change these values to adjust the overall appearance. */
    :root {
      --background: #ffffff;
      --menu-background: #ffffff;
      --icon-color: #000000;
      --brand-color: #000000;
      --accent: #f4c430;
      --accent-soft: #fff4bf;
      --on-accent: #000000;
      --flyout-background: var(--accent);
      --floating-shadow: 0 5px 14px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 6%);
      --menu-width: 390px;
      --menu-height: 76px;
      --menu-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color-scheme: light;
      background: var(--background);
    }

    * { box-sizing: border-box; }

    html, body { margin: 0; min-height: 100%; }

    body {
      min-height: 100vh;
      min-height: 100svh;
      background: var(--background);
      -webkit-tap-highlight-color: transparent;
    }

    /* Full-width content area with consistent space along the screen edges. */
    .app-content {
      width: 100%;
      margin: 0;
      padding: 12px max(24px, env(safe-area-inset-right, 0px)) calc(var(--menu-height) + var(--menu-bottom) + 28px) max(24px, env(safe-area-inset-left, 0px));
    }

    .hero-card {
      width: 100%;
      min-height: 220px;
      padding: 24px;
      border-radius: 24px;
      background-color: #244e3a;
      background-image: linear-gradient(90deg, rgb(10 30 18 / 85%) 0%, rgb(10 30 18 / 62%) 55%, rgb(10 30 18 / 15%) 100%), url("assets/images/national-home-field.png");
      background-size: cover;
      background-position: 70% 60%;
      background-repeat: no-repeat;
      color: #ffffff;
      box-shadow: var(--floating-shadow);
    }

    .hero-greeting {
      margin: 0;
      font-size: clamp(24px, 4.5vw, 28px);
      font-weight: 650;
      line-height: 1.25;
      letter-spacing: -0.6px;
    }

    .hero-upcoming { margin-top: 24px; }
    .hero-upcoming h3 { margin: 0 0 12px; color: var(--accent); font-size: 13px; font-weight: 600; }
    .hero-event { display: flex; align-items: center; gap: 14px; }

    .hero-event-date {
      display: grid;
      place-items: center;
      flex: 0 0 56px;
      min-height: 52px;
      border-radius: 12px;
      background: var(--accent);
      color: var(--on-accent);
      font-size: 15px;
      font-weight: 650;
      font-variant-numeric: tabular-nums;
    }

    .hero-event-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }

    /* Monthly calendar, placed directly below the hero. */
    .calendar-card {
      width: 100%;
      margin-top: 22px;
      padding: 22px;
      border-radius: 24px;
      background: #ffffff;
      color: #171717;
      box-shadow: var(--floating-shadow);
      scroll-margin-top: 20px;
    }

    .calendar-month-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .calendar-month-bar { margin-bottom: 18px; }
    .calendar-month-bar h2 { margin: 0; font-size: 16px; font-weight: 600; }
    .calendar-controls { display: flex; flex-shrink: 0; gap: 6px; margin-left: auto; }

    .calendar-arrow,
    .calendar-today {
      display: grid;
      place-items: center;
      min-height: 40px;
      padding: 0;
      border: 1px solid #e8e8e8;
      border-radius: 11px;
      background: #ffffff;
      color: #000000;
      font: inherit;
      cursor: pointer;
      touch-action: manipulation;
    }

    .calendar-arrow { width: 40px; }
    .calendar-today { padding-inline: 14px; font-size: 12px; font-weight: 550; }
    .calendar-arrow svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .calendar-weekdays,
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
      text-align: center;
    }

    .calendar-weekdays {
      margin-bottom: 8px;
      color: #717171;
      font-size: 11px;
      font-weight: 500;
    }

    .calendar-day {
      display: grid;
      place-items: center;
      width: 100%;
      min-width: 0;
      min-height: 46px;
      padding: 0;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: #171717;
      font: inherit;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      touch-action: manipulation;
    }

    .calendar-day.is-other-month { color: #a3a3a3; }
    .day-number { display: grid; place-items: center; width: min(36px, 100%); height: 36px; border-radius: 50%; }
    .calendar-day[aria-current="date"] .day-number { box-shadow: inset 0 0 0 1.5px var(--flyout-background); }
    .calendar-day[aria-pressed="true"] .day-number { background: var(--accent); color: var(--on-accent); font-weight: 600; }
    .calendar-day:focus-visible,
    .calendar-arrow:focus-visible,
    .calendar-today:focus-visible { outline: 2px solid var(--flyout-background); outline-offset: 2px; }

    .calendar-selection {
      margin: 16px 0 0;
      padding-top: 16px;
      border-top: 1px solid #eeeeee;
      color: #606060;
      font-size: 12px;
      text-align: center;
    }

    @media (hover: hover) {
      .calendar-day:hover,
      .calendar-arrow:hover,
      .calendar-today:hover { background: var(--accent-soft); }
    }

    @media (max-width: 420px) {
      .calendar-card { padding: 18px 14px; }
      .calendar-grid,
      .calendar-weekdays { gap: 2px; }
    }

/* Integrate the wireframe shell with existing national forms. */
body{padding:0;color:#171717}main.app-content{max-width:1000px;border:0;border-radius:0;box-shadow:none}button{margin-top:0}.app-content #status:empty{display:none}.app-content .notice{margin:0 0 20px}.hero-event a{color:#fff;text-decoration:none}.hero-event-date{padding:6px}.hero-upcoming>p{font-size:14px}.calendar-events a{display:block;padding:12px 0;color:#171717}.calendar-events p{font-size:13px;color:#606060}.calendar-day.has-events .day-number{text-decoration:underline;text-decoration-color:#927300;text-underline-offset:5px}.app-content h1{margin-top:0}.calendar-card{margin-bottom:24px}@media(max-width:500px){.app-content{padding-left:20px!important;padding-right:20px!important}.hero-card{padding:24px 20px}.app-title{font-size:28px}}

/* Subtle textured canvas shared by the national app views. */
body {
  background-color: #fafaf8;
  background-image:
    radial-gradient(circle, rgb(0 0 0 / 3%) 0.6px, transparent 0.9px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 1.8%) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 1.2%) 0 1px, transparent 1px 6px);
  background-size: 7px 9px, auto, auto;
  background-position: 2px 3px, 0 0, 0 0;
}