/* The calendar an owner embeds on their own website, and O-06's snippet for it. The day cells, the months and the
   legend are the picker's (picker.css); these rules only lay the frame out and make links behave like its buttons. */

/* The frame is as wide and as tall as the owner's iframe, so the page fills it and pads itself instead of centring
   in a column: on their site this is a panel, not a page. */
.bh-embed {
  display: grid; align-content: start; gap: var(--space-4);
  max-width: 480px; margin: 0 auto; padding: var(--space-4);
}
.bh-embed-head { display: grid; gap: var(--space-1); }
.bh-embed-title { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); }
.bh-embed-from { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-embed-status { font-size: var(--text-small); line-height: var(--leading-small); }
.bh-embed-clear { margin-inline-start: var(--space-1); white-space: nowrap; }
/* The legend keeps two columns even in a narrow frame. One column adds about 90 px of height, and the frame's height
   is a number the owner pastes once (EmbedSnippet), so the page has to stay the same height at every width. */
.bh-embed .bh-legend { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* A day and a month control are links here, not buttons: they need the hover and the reset that picker.css gives
   `button.bh-day`, and no underline, which would cut through the date. */
a.bh-day, a.bh-month-nav { text-decoration: none; }
a.bh-day:hover { background-color: var(--sunken); }
a.bh-day.is-start:hover { background-color: var(--primary); }
.bh-embed .bh-month-nav[aria-disabled="true"] { cursor: default; }

/* O-06's snippet: the tag is code, so it keeps its own font and wraps instead of scrolling sideways. */
.bh-embed-code { min-height: 0; font-family: var(--font-mono); font-size: var(--text-small); white-space: pre-wrap; overflow-wrap: anywhere; }