body {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.8; /* Increase line-height */
  background-color: #f4f4f4;
  font-size: 14px; /* Reduce font-size */
}

header {
  background-color: #4CAF50;
  color: #ffffff;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

h1 {
  font-size: 2rem;
}

a {
  color: #2367a3;
  font-weight: bold;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th, td {
  padding: 0.5rem;
  text-align: left;
  border: 1px solid #ccc;
  font-size: 14px; /* Reduce font-size */
}

td {
  vertical-align: top;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

ol, ul {
  margin: 0;
  padding-left: 1.5rem;
}

.favourites {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0.5rem 0;
}

.favourites section {
  flex: 1 1 300px;
  margin: 0;
}

.favourites h3 {
  margin: 0.2rem 0 0.4rem;
}

.top-list {
  columns: 2;
  margin: 0;
}

.top-list li {
  break-inside: avoid;
}

.target-list,
.candidate-list {
  columns: 3;
  padding: 0.75rem 1rem 0.75rem 2rem;
  background: #fff;
  border: 1px solid #ccc;
}

.candidate-list li {
  break-inside: avoid;
  margin: 0.1rem 0;
  padding: 0.1rem 0.35rem;
}

.candidate-list .weekend-slot {
  background: #eef7ec;
  border-left: 4px solid #4CAF50;
}

.tee-day {
  display: inline-block;
  min-width: 2.4rem;
  font-weight: bold;
  color: #2f6f32;
}

@media (max-width: 800px) {
  table {
    display: block;
  }

  .target-list,
  .candidate-list,
  .played-date-list {
    columns: 1;
  }
}

.done {
  color: #4CAF50;
}

.parkland::after {
  content: "\1F333"; /* this is the Unicode for a tree */
}

.links::after {
  content: "\1F340"; /* this is the Unicode for grass */
}

.heather::after {
  content: "\1F333"; /* finding a direct heather icon is difficult, so maybe using house can work */
}

.pine::after {
  text-decoration: none;
  content: "\1F332"; /* this is the Unicode for an evergreen tree, which looks like a pine tree */
}

.progress-bar {
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  margin-top: 4px;
}

.progress-fill {
  height: 100%;
  background: #4CAF50;
  border-radius: 3px;
}

.progress-label {
  font-size: 11px;
  color: #888;
  font-weight: normal;
}

.date {
  font-size: 11px;
  color: #aaa;
  margin-left: 0.5em;
}

.played-tag {
  font-size: 10px;
  font-weight: bold;
  color: #4CAF50;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.4em;
}

.vlog-list {
  margin: 0.2rem 0 0.35rem;
  font-size: 11px;
  font-weight: normal;
  line-height: 1.35;
}

.vlog-list summary {
  color: #2367a3;
  cursor: pointer;
  font-weight: bold;
}

.vlog-list ul {
  margin-top: 0.3rem;
  padding-left: 1rem;
}

.vlog-list li {
  margin-bottom: 0.3rem;
}

.vlog-meta {
  color: #777;
}

.course-view-controls {
  margin: 0 0 0.75rem;
}

.course-view-controls button {
  padding: 0.45rem 0.75rem;
  border: 1px solid #aaa;
  background: #fff;
  color: #2367a3;
  cursor: pointer;
  font-weight: bold;
}

.course-view-controls button.active {
  background: #4CAF50;
  border-color: #4CAF50;
  color: #fff;
}

#played-by-date {
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.75rem 1rem;
}

.view-note {
  margin: 0 0 0.6rem;
  color: #777;
  font-size: 12px;
}

.played-date-list {
  columns: 2;
}

.played-date-list li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
}

.page-links {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #ccc;
}

.plan-page section {
  margin-bottom: 1.4rem;
}

.plan-table {
  background: #fff;
  table-layout: auto;
}

.plan-table th {
  background: #e8eef4;
}

.weekend-row {
  background: #eef7ec;
}

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.cluster-card {
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.9rem;
}

.cluster-card h4 {
  margin: 0 0 0.45rem;
  color: #2f6f32;
}

.cluster-card p {
  margin: 0.35rem 0;
}

.timeline-list {
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.75rem 1rem 0.75rem 2rem;
}

.weekend-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.weekend-plan-card {
  background: #fff;
  border: 1px solid #ccc;
  border-top: 5px solid #4CAF50;
  padding: 1rem;
}

.weekend-plan-card.available {
  border-top-color: #d99b2b;
}

.weekend-plan-card.leave-day {
  border-top-color: #2367a3;
}

.weekend-number {
  margin: 0;
  color: #777;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.weekend-plan-card h4 {
  margin: 0.15rem 0 0.75rem;
  color: #2f6f32;
  font-size: 16px;
}

.weekend-plan-card dl {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.5fr);
  margin: 0;
}

.weekend-plan-card dt,
.weekend-plan-card dd {
  margin: 0;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eee;
}

.weekend-plan-card dt {
  color: #555;
  font-weight: bold;
}

.weekend-plan-card .status {
  margin-bottom: 0;
  padding: 0.55rem;
  background: #eef7ec;
}

.weekend-plan-card.available .status {
  background: #fff6e7;
}

.weekend-plan-card.leave-day .status {
  background: #eef4fa;
}

.leave-budget {
  padding: 0.75rem 1rem;
  background: #eef4fa;
  border: 1px solid #b8cadb;
  font-size: 16px;
}

.round-ranks {
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 17px;
  font-weight: bold;
  word-spacing: 0.35rem;
}

@media (max-width: 900px) {
  .cluster-grid {
    grid-template-columns: 1fr;
  }

  .weekend-plan-grid {
    grid-template-columns: 1fr;
  }

  .plan-table {
    display: block;
    overflow-x: auto;
  }
}

.map-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(8rem, 1fr)) minmax(18rem, 2fr);
  gap: 0.8rem;
  margin: 1rem 0;
}

/* Essential Leaflet layout kept local so file:// rendering cannot lose tile positioning. */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-container {
  position: relative;
  overflow: hidden;
  background: #ddd;
  outline-offset: 1px;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  user-select: none;
  -webkit-user-drag: none;
}

.leaflet-tile {
  visibility: hidden;
}

.leaflet-tile-loaded {
  visibility: inherit;
}

.leaflet-zoom-animated {
  transform-origin: 0 0;
}

.leaflet-pane { z-index: 400; }
.leaflet-tile-pane {
  z-index: 200;
  pointer-events: none;
}
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-pane > svg path.leaflet-interactive { pointer-events: auto; }

.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: auto;
}

.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.leaflet-top { top: 0; }
.leaflet-right { right: 0; }
.leaflet-bottom { bottom: 0; }
.leaflet-left { left: 0; }

.leaflet-control-zoom,
.leaflet-control-attribution {
  margin: 0.65rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.leaflet-control-zoom a {
  display: block;
  width: 30px;
  height: 30px;
  color: #333;
  text-align: center;
  text-decoration: none;
  font: bold 20px/30px Arial, sans-serif;
  border-bottom: 1px solid #ccc;
}

.leaflet-control-attribution {
  padding: 0 0.3rem;
  font-size: 10px;
}

.leaflet-popup {
  position: absolute;
  margin-bottom: 20px;
  text-align: center;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  padding: 1px;
}

.leaflet-popup-content {
  margin: 0.8rem 1rem;
  min-width: 13rem;
  text-align: left;
}

.leaflet-popup-tip-container {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 20px;
  margin-left: -20px;
  overflow: hidden;
}

.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  margin: -10px auto 0;
  transform: rotate(45deg);
}

.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 4px 4px 0 0;
  color: #757575;
  text-decoration: none;
  font: 20px/24px Arial, sans-serif;
}

.leaflet-tooltip {
  position: absolute;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #777;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: #222;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
}

.leaflet-tooltip-top::before {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #777;
  border-bottom: 0;
  content: "";
}

.map-summary > div,
.map-summary > p {
  margin: 0;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid #ccc;
}

.map-summary strong,
.map-summary span {
  display: block;
}

.map-summary strong {
  font-size: 23px;
}

.map-summary span {
  color: #777;
  font-size: 11px;
  text-transform: uppercase;
}

.map-summary .played-stat strong {
  color: #4CAF50;
}

.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: end;
  margin-bottom: 0.8rem;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid #ccc;
}

.map-controls button,
.map-controls input,
.map-controls select {
  min-height: 2.2rem;
  border: 1px solid #aaa;
  background: #fff;
  padding: 0.35rem 0.65rem;
}

.map-controls button {
  color: #2367a3;
  cursor: pointer;
  font-weight: bold;
}

.map-controls button.active {
  background: #4CAF50;
  border-color: #4CAF50;
  color: #fff;
}

.map-controls label {
  display: flex;
  flex-direction: column;
  margin-left: 0.5rem;
  color: #666;
  font-size: 11px;
  font-weight: bold;
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(18rem, 1fr);
  gap: 0.8rem;
}

.map-panel {
  position: relative;
}

#england-map {
  height: 82vh;
  min-height: 760px;
  border: 1px solid #aaa;
  background: #dce7ef;
}

.map-legend {
  position: absolute;
  z-index: 500;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.45rem 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #aaa;
}

.map-legend span {
  margin-right: 0.7rem;
}

.legend-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.25rem;
  border-radius: 50%;
}

.played-dot {
  background: #4CAF50;
}

.unplayed-dot {
  background: #777;
}

.map-course-panel {
  height: 82vh;
  min-height: 760px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #aaa;
}

.map-list-count {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #ccc;
}

.map-course-list {
  height: calc(100% - 2.8rem);
  overflow-y: auto;
}

.map-course-row {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) 4.5rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  cursor: pointer;
}

.map-course-row:hover {
  background: #f2f6f8;
}

.map-course-row.played-course {
  border-left: 4px solid #4CAF50;
  color: #2f6f32;
}

.map-rank,
.map-drive {
  font-weight: bold;
}

.map-name small,
.map-drive small {
  display: block;
  color: #999;
  font-size: 10px;
  font-weight: normal;
}

.map-drive {
  text-align: right;
}

.course-popup span,
.course-popup a {
  display: block;
  margin-top: 0.25rem;
}

.course-popup .popup-played {
  color: #2f6f32;
  font-weight: bold;
}

.access-flag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.2;
  vertical-align: middle;
}

.core-flag { background: #2f6f32; }
.leave-flag { background: #486581; }

@media (max-width: 900px) {
  .map-summary {
    grid-template-columns: repeat(3, 1fr);
  }

  .map-summary > p {
    grid-column: 1 / -1;
  }

  .map-layout {
    grid-template-columns: 1fr;
  }

  #england-map,
  .map-course-panel {
    height: 60vh;
    min-height: 480px;
  }
}