/* Approved tap targets. Typography and header flow remain unchanged. */
[data-header] [data-menu-toggle],
[data-header] [data-ghost-search],
[data-post-info] [data-google-preferred],
[data-post-info] [data-share-toggle] {
  position: relative;
}

/* Extend isolated controls into surrounding whitespace without adding layout size. */
[data-header] [data-menu-toggle]::after,
[data-header] [data-ghost-search]::after,
[data-post-info] [data-google-preferred]::after,
[data-post-info] [data-share-toggle]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
  background: transparent;
  pointer-events: auto;
}

/* Header social icons keep their positions because wider targets would overlap. */
[data-menu-panel] > div:first-child > button,
[data-share] > [role="menuitem"] {
  min-width: 44px;
  min-height: 44px;
}

/* These calendar controls reserve their full target area in ordinary flow. */
#justabouts-calendar .jac-icon-button,
#justabouts-calendar .jac-month-heading .jac-icon-button,
#justabouts-calendar .jac-dialog-top .jac-icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}

#justabouts-calendar [data-jac-today],
#justabouts-calendar .jac-copy-link,
#justabouts-calendar .jac-back-button,
#justabouts-calendar .jac-event-links > a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

/* Seven 44px dates plus the existing six 2px gutters require 320px. */
#justabouts-calendar .jac-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 38px;
}
#justabouts-calendar .jac-date-button {
  min-width: 44px;
  height: 44px;
}

@media (min-width: 721px) and (max-width: 1050px) {
  #justabouts-calendar .jac-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
  }
}

@media (max-width: 720px) {
  #justabouts-calendar .jac-layout {
    gap: 30px;
  }
  #justabouts-calendar .jac-month-calendar {
    width: 100%;
  }
}

/* On a 320px phone, the date grid uses 308px with 6px outer gutters. */
@media (max-width: 360px) {
  #justabouts-calendar .jac-month-calendar {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  #justabouts-calendar .jac-date-button {
    min-width: 0;
  }
  #justabouts-calendar .jac-weekdays,
  #justabouts-calendar .jac-dates {
    gap: 0;
    width: min(308px, calc(100% + 28px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}