/* A golf club's own pieces for the Business Website engine (src/examples/ex-website-course.js):
   the plans of the holes, the scorecard, the way from hole to hole, the course's figures, what is
   open today, a captioned photograph and the visit checklist. Linked after ex-website.css. Every
   colour is the business's own (--x-* on main#main), so the drawings follow both themes: the
   rough is the page's pale panel, the fairway and green are the first chart colour, sand the
   second and water the third. No shape depends on its colour alone: each has an outline, and the
   legend names it. */

/* ---- plans ------------------------------------------------------------------------------- */
/* The colour of water is used three times: for the lake, for the patch its name stands on, and for the legend's sample. */
.xw-plan, .xw-plan-key { --xw-plan-water: color-mix(in srgb, var(--x-series-3) 24%, var(--x-surface)); }
.xw-plan { display: block; width: 100%; height: auto; border-radius: var(--x-radius, 8px); outline: 1px solid var(--x-hair); outline-offset: -1px; }
.xw-plan-rough, .xw-plan-under--ground { fill: var(--x-surface-2); }
.xw-plan-water { fill: var(--xw-plan-water); stroke: var(--x-series-3); stroke-width: 1.25; }
.xw-plan-under--water { fill: var(--xw-plan-water); }
.xw-plan-house { fill: var(--x-surface); stroke: var(--x-ink); stroke-width: 1; }
.xw-plan-edge { fill: none; stroke: var(--x-line); stroke-linecap: round; }
.xw-plan-fairway { fill: none; stroke: color-mix(in srgb, var(--x-series-1) 30%, var(--x-surface)); stroke-linecap: round; }
.xw-plan-green { fill: color-mix(in srgb, var(--x-series-1) 68%, var(--x-surface)); stroke: var(--x-ink); stroke-width: 1; }
.xw-plan-sand { fill: color-mix(in srgb, var(--x-series-2) 40%, var(--x-surface)); stroke: var(--x-ink); stroke-width: .75; }
.xw-plan-tree { fill: color-mix(in srgb, var(--x-ink) 24%, var(--x-surface-2)); }
.xw-plan-play { fill: none; stroke: var(--x-ink); stroke-width: 1.25; stroke-dasharray: 4 4; stroke-linecap: round; opacity: .75; }
.xw-plan-tee { fill: var(--x-ink); }
.xw-plan-flag { fill: var(--x-surface); stroke: var(--x-ink); stroke-width: 1.25; stroke-linejoin: round; }
.xw-plan-north rect, .xw-plan-number rect { fill: var(--x-surface); stroke: var(--x-ink); stroke-width: 1.25; }
.xw-plan-north path { fill: var(--x-ink); }
/* What is written on a plan follows the reader's own text size. Each word or figure is drawn, with the ring or the
   building it stands on, in a frame whose size the drawing gives in em (xw-plan-mark), and this is that em: 13 of
   the plan's units at the ordinary text size, which is 12 px or more on the narrowest phone, growing with the
   reader's text to 20, where a number would begin to cover the hole it names. The first line is for a browser
   that does not know clamp(). Inside a frame the sizes are in the frame's own units, and grow with it. */
.xw-plan-mark { overflow: visible; font-size: 13px; font-size: clamp(13px, .8125rem, 20px); }
.xw-plan-north text { fill: var(--x-ink); font: 700 14px var(--x-text); }
.xw-plan-number text { fill: var(--x-ink); font: 700 13px var(--x-text); font-variant-numeric: tabular-nums; }
.xw-plan-name { fill: var(--x-ink); font: 600 13px var(--x-text); }
/* The whole course is taller than it is wide: it is held to the height of a screen, and its width follows. */
.xw-plan--course { width: min(100%, calc(min(72svh, 36rem) * var(--xw-plan-shape, .64))); margin-inline: auto; }
.xw-plan-fig { display: grid; gap: 10px; min-width: 0; margin: 0; }
.xw-plan-thumb { display: block; background: var(--x-surface-2); }
.xw-plan-thumb .xw-plan { border-radius: 0; outline: 0; }
.xw-plan-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--x-muted); font-size: .875rem; }
.xw-plan-legend li { display: inline-flex; align-items: center; gap: 6px; }
.xw-plan-key { flex: none; width: 20px; height: 20px; }
.xw-plan-note { display: flex; align-items: flex-start; gap: 8px; }

/* ---- the scorecard: a table on every screen, four short columns ------------------------------- */
.xw-score { width: 100%; max-width: 30rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.xw-score th, .xw-score td { height: 44px; padding: 0 6px; border-bottom: 1px solid var(--x-hair); text-align: end; vertical-align: middle; }
.xw-score th:first-child { padding-inline-start: 0; text-align: start; }
.xw-score td:last-child, .xw-score th:last-child { padding-inline-end: 0; }
.xw-score thead th { color: var(--x-muted); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xw-score tbody th { font-weight: 600; }
.xw-score tfoot th, .xw-score tfoot td { border-top: 2px solid var(--x-ink); border-bottom: 0; font-weight: 700; }

/* ---- from hole to hole --------------------------------------------------------------------- */
.xw-holes { display: grid; gap: 10px; max-width: 34rem; }
.xw-holes-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 30em) { .xw-holes-row { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.xw-holes-n { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); color: var(--x-ink); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.xw-holes-n--on { border-color: transparent; background: var(--x-accent); color: var(--x-on-accent); }
.xw-holes-step { display: flex; justify-content: space-between; gap: 12px; }
.xw-holes-prev, .xw-holes-next { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }

/* ---- nine cards, three to a row ----------------------------------------------------------------
   The engine fits as many cards across as the page is wide, which leaves the ninth by itself under two rows of
   four. From the width at which a card stops lying on its side, the nine are set three across. */
@media (min-width: 37.5em) { .xw-nine > * { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- a course's few figures: one row of four where the column holds four, otherwise two rows of two ------- */
.xw-stats-box { width: 100%; min-width: 0; container-type: inline-size; }
.xw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px clamp(18px, 4vw, 40px); margin: 0; }
@container (min-width: 30em) { .xw-stats { grid-template-columns: repeat(4, minmax(0, max-content)); } }
.xw-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }
.xw-stats dt { color: var(--x-muted); font-size: .875rem; line-height: var(--x-lh-label); }
.xw-stats dd { margin: 0; font: var(--x-display-weight, 600) clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/var(--x-lh-head) var(--x-display, var(--x-text)); font-variant-numeric: tabular-nums; }
.xw-stats dd:lang(th), .xw-check-group legend:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }

/* ---- what is open today ------------------------------------------------------------------------ */
.xw-board { display: grid; max-width: 46rem; margin: 0; padding: 0; list-style: none; }
.xw-board li { display: grid; align-items: center; gap: 2px 20px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xw-board li:last-child { border-bottom: 1px solid var(--x-hair); }
@media (min-width: 37.5em) { .xw-board li { grid-template-columns: minmax(11rem, 32%) minmax(0, 1fr); } }
.xw-board-name { font-weight: 600; }

/* ---- a photograph with its caption ------------------------------------------------------------- */
.xw-photo { display: grid; align-content: start; gap: 8px; min-width: 0; margin: 0; }
.xw-photo .x-img { border-radius: var(--x-radius, 8px); }

/* ---- the visit checklist ------------------------------------------------------------------------ */
.xw-check { display: grid; gap: 20px; max-width: 46rem; }
.xw-check-count { font-weight: 600; }
.xw-check-group { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.xw-check-group legend { padding: 0 0 8px; font: var(--x-display-weight, 600) 1.0625rem/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xw-check-item { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xw-check-item input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--x-accent); }
.xw-check-item input:checked + span { color: var(--x-muted); }

/* ---- a note under a result, as wide as the summary above it ------------------------------------------ */
.xw-measure { max-width: 40rem; }

/* ---- a sentence with a word kept whole ------------------------------------------------------------
   wholeWords() puts the words of a sentence in a box (xw-run), so a link that was the only thing in its paragraph
   beside plain text now has that box beside it. The kit makes such a link 44 px tall to touch; this keeps it so. */
p:has(> .xw-run) > .x-link:only-of-type { padding-block: calc((44px - 1em) / 2); }
/* Inside a link or a button the sentence is one box on its line, not one for each word and gap in it, so the link is
   read as one thing to press, as wide as its words, by whatever measures it. Nothing moves: no offset is given. */
:is(a, button) > .xw-run { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .xw-holes-n:hover { border-color: var(--x-ink); }
  .xw-holes-prev:hover, .xw-holes-next:hover, .xw-board-name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}