/* Spot page: conditions now, forecast by day, tide, around the spot. */
@layer components {
  .spot-show {
    --spot-surface: #f5f5f5;
    --spot-border: #ebebeb;
    --spot-muted: #555555;
    --spot-tab-bg: #efefef;
    --spot-tab-active: #ffffff;
    --spot-wave: #4338ca;
    --spot-tide: #2563eb;
    --spot-tide-fill: #dbe6fd;

    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2.5rem;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .spot-show {
      --spot-surface: #1e293b;
      --spot-border: #334155;
      --spot-muted: #94a3b8;
      --spot-tab-bg: #1e293b;
      --spot-tab-active: #334155;
      --spot-wave: #a5b4fc;
      --spot-tide: #60a5fa;
      --spot-tide-fill: #1e3a5f;
    }
  }

  [data-theme="dark"] .spot-show {
    --spot-surface: #1e293b;
    --spot-border: #334155;
    --spot-muted: #94a3b8;
    --spot-tab-bg: #1e293b;
    --spot-tab-active: #334155;
    --spot-wave: #a5b4fc;
    --spot-tide: #60a5fa;
    --spot-tide-fill: #1e3a5f;
  }

  /* ---- Mobile header: square grey buttons, as in the mockup ---- */
  .sub-header--spot {
    border-bottom: 1px solid #ebebeb;

    & .sub-header__col--right {
      gap: 6px;
    }

    & :is(.button--square, .button--icon) {
      --button-size: 44px;
      --button-height: 44px;
      --button-inner-height: 44px;
      --button-svg-size: 20px;
      --button-background-color: #f3f3f3;
      --button-background-color-hover: #e6e6e6;
      border-radius: 8px;
    }

    /* .button svg fills every icon, which turned the empty star into a solid black one
       (read as "saved"). Saved stays yellow via button.css. */
    & .spot-show-hero__directions-btn svg {
      stroke: var(--primary-text-color);
    }

    & .spot-save-btn:not(.spot-save-btn--saved) svg {
      fill: none;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sub-header--spot {
      border-bottom-color: #334155;

      & :is(.button--square, .button--icon) {
        --button-background-color: #1e293b;
        --button-background-color-hover: #334155;
      }
    }
  }

  [data-theme="dark"] .sub-header--spot {
    border-bottom-color: #334155;

    & :is(.button--square, .button--icon) {
      --button-background-color: #1e293b;
      --button-background-color-hover: #334155;
    }
  }

  /* ---- Intro: location + small map ---- */
  .spot-show__intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .spot-show__meta {
    display: flex;
    margin-top: 0.875rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  /* In the apps the directions button sits on the location line (no web header). */
  .spot-show__directions .spot-show-hero__directions-btn {
    --button-size: 36px;
    --button-height: 36px;
    --button-inner-height: 36px;
    --button-svg-size: 18px;
    --button-background-color: var(--spot-surface);
    border-radius: 8px;

    & svg {
      stroke: var(--primary-text-color);
    }
  }

  .spot-show__time {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--spot-muted);
    white-space: nowrap;
  }

  .spot-show__location {
    font-size: 0.9rem;
    color: var(--spot-muted);
  }

  .spot-show__map .spot__map-container {
    height: 140px;
    margin-bottom: 0;
  }

  /* The tiles below already show wind, waves and tide. */
  .spot-show__map :is(.spot__forecasts-avg-today, .spot__wind-forecast-today, .spot__tide, .spot__map-label__text) {
    display: none;
  }

  /* ---- Sections ---- */
  .spot-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }

  .spot-section__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .spot-section__eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--spot-muted);
  }

  .spot-section__empty {
    color: var(--spot-muted);
  }

  /* The outlook frame holds two sections. */
  .spot-outlook {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* ---- Right now ---- */
  .spot-now__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .spot-now__tile {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--spot-surface);
  }

  .spot-now__label,
  .spot-now__detail {
    font-size: 0.8rem;
    color: var(--spot-muted);
  }

  .spot-now__value {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;

    & small {
      font-size: 0.85rem;
      font-weight: 400;
      color: var(--spot-muted);
    }
  }

  .spot-now__value--text {
    font-size: 1.25rem;
  }

  .spot-now__arrow {
    margin-left: auto;
    font-size: 0.8rem;
  }

  /* ---- Forecast days ---- */
  .spot-days {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(var(--spacing-sm) * -1);
    padding: 0 var(--spacing-sm) 0.25rem;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .spot-days__day {
    flex: 0 0 4.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--spot-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;

    &[aria-selected="true"] {
      border-color: currentColor;
      background: transparent;
    }
  }

  .spot-days__name {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
  }

  .spot-days__date,
  .spot-days__wave {
    font-size: 0.75rem;
    color: var(--spot-muted);
  }

  .spot-days__wave {
    color: var(--spot-wave);
  }

  .spot-days__wind {
    min-width: 1.75rem;
    margin-top: 0.25rem;
    padding: 0.05rem 0.3rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: #111827;
  }

  /* ---- 3-hourly table ---- */
  .spot-day {
    margin-top: 0.75rem;
  }

  .spot-slots {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--spot-border);
    border-radius: 12px;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;

    & th,
    & td {
      padding: 0.35rem 0.5rem;
      border-bottom: 1px solid var(--spot-border);
      text-align: left;
      white-space: nowrap;
    }

    & thead th {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--spot-muted);

      & small {
        font-size: inherit;
      }
    }

    & tbody tr:last-child :is(th, td) {
      border-bottom: 0;
    }
  }

  .spot-slots__hour {
    font-weight: 400;
    color: var(--spot-muted);
  }

  .spot-slots__pill {
    display: inline-block;
    min-width: 1.75rem;
    padding: 0.05rem 0.3rem;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    color: #111827;
  }

  .spot-slots__arrow {
    font-size: 0.6rem;
  }

  .spot-slots__wave {
    & strong {
      font-weight: 600;
      color: var(--spot-wave);
    }

    & small {
      font-size: 0.75rem;
      color: var(--spot-muted);
    }
  }

  .spot-slots__temp {
    text-align: right !important;
  }

  /* ---- Tide ---- */
  .spot-tide {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--spot-surface);
  }

  .spot-tide__header {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--spot-muted);
  }

  .spot-tide__title {
    font-weight: 600;
    color: var(--text-color);
  }

  .spot-tide__extremes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .spot-tide__curve {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 0.4rem;
  }

  .spot-tide__area {
    fill: var(--spot-tide-fill);
  }

  .spot-tide__line {
    fill: none;
    stroke: var(--spot-tide);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  .spot-tide__hours {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--spot-muted);
  }

  /* ---- Full table ---- */
  .spot-forecast__full {
    margin-top: 0.75rem;

    & > summary {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      border-radius: 10px;
      background: var(--spot-surface);
      font-weight: 600;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
    }

    &[open] > summary {
      margin-bottom: 0.75rem;
    }
  }

  /* ---- Nearby spots: fixed-size cards, even when there are only one or two ---- */
  .spot-show .spot-chip-list {
    grid-auto-columns: 104px;
    margin-top: 0;
  }

  /* ---- Around the spot ---- */
  .spot-around__tabs {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding: 3px;
    border-radius: 8px;
    background: var(--spot-tab-bg);
  }

  .spot-around__tab {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--spot-muted);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;

    &[aria-selected="true"] {
      background: var(--spot-tab-active);
      color: var(--text-color);
      font-weight: 600;
      box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
    }
  }

  .spot-around__list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;

    & li {
      border-bottom: 1px solid var(--spot-border);
    }
  }

  .spot-around__place {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    color: inherit;
    text-decoration: none;
  }

  .spot-around__text {
    flex: 1;
    min-width: 0;
  }

  .spot-around__name {
    display: block;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spot-around__kind,
  .spot-around__distance {
    font-size: 0.8rem;
    color: var(--spot-muted);
  }

  .spot-around__kind {
    display: block;
  }

  .spot-around__distance {
    font-variant-numeric: tabular-nums;
  }

  .spot-around__chevron {
    font-size: 1.25rem;
    color: var(--spot-muted);
  }

  .spot-around__footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--spot-muted);

    & a {
      color: inherit;
    }
  }
}