/* Workshop Explorer (/service/workshops/): a standalone QRS tool, credited by the logo footer.
   House style (UBS/QRS): black Frutiger type on white, hairline rules, square corners, generous space,
   QRS navy for anything interactive. Colour carries meaning only:
     topic   the topic tiles and section bands, each card's rule, date and tile (7 families, below);
     red     due within 7 days; amber: due within 14 days (amber and red only ever mean time);
     grey    passed. Information marks (✓ ! –) are black and grey glyphs, not colours. */
main[data-page="workshops"], .wx-dialog, .wx-footer {
    --wx-ink: #1a1a1a; --wx-text: #3d3d3d; --wx-muted: #666; --wx-rule: #d4d4d4; --wx-soft: #ebebeb; --wx-alt: #f5f5f5;
    --wx-navy: #183b63; --wx-navy-tint: #edf1f6;
    --wx-red: #c8102e; --wx-red-tint: #fbeaec; --wx-amber: #a15c00; --wx-amber-tint: #fdf1e1; --wx-grey: #767676;
}
/* Seven distinct hues, none red, orange or amber (those mean urgency); white text passes AA on each.
   The catch-all "Science and applications" is the neutral slate. */
.wx-topic-theory { --topic: #1d5fc1; } .wx-topic-agents { --topic: #6b3fa0; } .wx-topic-language { --topic: #007a7a; }
.wx-topic-perception { --topic: #b02f6c; } .wx-topic-safety { --topic: #2f7a3e; } .wx-topic-finance { --topic: #8a6a00; }
.wx-topic-science { --topic: #56607a; }

main[data-page="workshops"] section { padding: 0; }
main[data-page="workshops"] a:focus-visible, main[data-page="workshops"] button:focus-visible, main[data-page="workshops"] summary:focus-visible,
main[data-page="workshops"] input:focus-visible, main[data-page="workshops"] select:focus-visible,
.wx-dialog a:focus-visible, .wx-dialog button:focus-visible { outline: 2px solid var(--wx-navy); outline-offset: 2px; }
.wx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wx-muted { color: var(--wx-muted); }
.wx-small { font-size: .85rem; }
.wx-ns { color: var(--wx-muted); font-style: italic; }
.wx-eyebrow, .wx-code { margin: 0; font: 400 .75rem var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--wx-muted); }
main[data-page="workshops"] h1, main[data-page="workshops"] h2, main[data-page="workshops"] h3, .wx-dialog h2, .wx-dialog h3, .wx-dialog h4 { color: var(--wx-ink); }
html:has(.wx-dialog[open]) { overflow: hidden; }

/* App bar */
.wx-appbar { border-bottom: 1px solid var(--wx-soft); background: #fff; }
.wx-appbar > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; min-height: 3.75rem; }
.wx-appbar-name { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.05rem; color: var(--wx-ink); }
.wx-appbar-name::before { content: ""; width: .7rem; height: .7rem; background: var(--wx-navy); }
.wx-appbar-links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-size: .9rem; }
.wx-appbar-links a { color: var(--wx-text); }
.wx-appbar-links a:hover { color: var(--wx-navy); text-decoration: underline; text-underline-offset: 4px; }
.wx-appbar-conf { color: var(--wx-ink); border-bottom: 2px solid var(--wx-navy); }

/* Hero */
.wx-hero { padding: 2.75rem 0 2.25rem; border-bottom: 1px solid var(--wx-soft); }
.wx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; align-items: end; }
main[data-page="workshops"] .wx-title { margin: .75rem 0 .5rem; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300; line-height: 1.08; letter-spacing: -.01em; }
.wx-tagline { margin: 0 0 1.25rem; font-size: 1.35rem; line-height: 1.4; color: var(--wx-text); }
.wx-lede { max-width: 40rem; margin: 0; font-size: 1rem; line-height: 1.75; color: var(--wx-text); }
.wx-facts-panel { margin: 0; border-top: 2px solid var(--wx-ink); }
.wx-facts-panel > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--wx-soft); }
.wx-facts-panel dt { font-size: .78rem; color: var(--wx-muted); }
.wx-facts-panel dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--wx-ink); }
.wx-facts-panel dd .wx-muted { font-size: .82rem; }
.wx-facts-panel a { color: var(--wx-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Browse by topic: one solid tile per topic family */
.wx-topics { margin: 2.25rem 0 0; }
main[data-page="workshops"] .wx-topics-title { margin: 0 0 .75rem; font-size: .8rem; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--wx-muted); }
.wx-topic-tiles { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.wx-topic-tile { flex: 1 1 10.5rem; }
.wx-topic-tile a { display: flex; flex-direction: column; gap: .2rem; height: 100%; min-height: 8.5rem; padding: .9rem 1rem 1rem; color: #fff; background: var(--topic); transition: filter .15s; }
.wx-topic-tile a:hover { filter: brightness(.88); }
.wx-topic-tile a:focus-visible { outline: 3px solid var(--wx-ink); outline-offset: 2px; }
.wx-tile-n { font-size: 2rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-tile-name { font-size: .95rem; line-height: 1.3; }
.wx-tile-areas { margin-top: auto; padding-top: .4rem; font-size: .75rem; line-height: 1.4; color: rgba(255, 255, 255, .95); }

/* Topic sections in the results: a solid band in the topic colour, then its workshops */
.wx-results-grouped { gap: 2.25rem; }
.wx-topic-section { scroll-margin-top: 1rem; }
.wx-topic-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; padding: .9rem 1.25rem; color: #fff; background: var(--topic); }
main[data-page="workshops"] .wx-topic-head h3 { margin: 0; font-size: 1.35rem; font-weight: 300; color: #fff; }
.wx-topic-n { margin: 0; font-size: .95rem; color: #fff; }
.wx-topic-areas { flex-basis: 100%; margin: 0; font-size: .8rem; color: rgba(255, 255, 255, .95); }
.wx-topic-items { display: grid; gap: .75rem; padding-top: .75rem; }
.wx-group-row th { padding: .7rem .9rem !important; font-size: .95rem !important; font-weight: 300 !important; text-transform: none !important; letter-spacing: 0 !important; color: #fff !important; background: var(--topic); }
.wx-group-row th span { margin-left: .5rem; font-size: .8rem; color: rgba(255, 255, 255, .95); }
.wx-grid tbody tr.wx-group-row { box-shadow: none; }

/* Key figures: each opens the matching filter */
.wx-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 2.25rem 0 1.75rem; padding: 0; border-top: 1px solid var(--wx-rule); }
.wx-figure + .wx-figure { border-left: 1px solid var(--wx-rule); }
.wx-figure a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.25rem 1.5rem 1rem; color: var(--wx-text); }
.wx-figure:first-child a { padding-left: 0; }
.wx-figure-n { font-size: 2.75rem; font-weight: 300; line-height: 1; color: var(--wx-ink); font-variant-numeric: tabular-nums; }
.wx-figure-label { font-size: .9rem; line-height: 1.45; }
.wx-figure-go { margin-top: auto; padding-top: .35rem; font-size: .8rem; color: var(--wx-navy); }
.wx-figure a[href^="?"]:hover .wx-figure-label { color: var(--wx-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Deadline timeline */
.wx-timeline { padding: 1rem 0 0; border-top: 1px solid var(--wx-rule); }
.wx-tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 1rem; font-size: .8rem; color: var(--wx-ink); }
.wx-tl-hint { color: var(--wx-muted); }
.wx-tl { display: flex; align-items: flex-end; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.wx-tl li { flex: 1 1 3rem; min-width: 3rem; }
.wx-tl-col { --bar: var(--wx-navy); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem; width: 100%; min-height: 7.5rem; padding: .35rem .15rem; border: 1px solid transparent; background: none; color: var(--wx-ink); cursor: pointer; }
.wx-tl-col:hover { background: var(--wx-alt); }
.wx-tl-bar { display: block; width: 60%; max-width: 2rem; height: calc(max(var(--h), .2) * 5.5rem); background: var(--bar); }
.wx-tl-n { font-size: .9rem; font-variant-numeric: tabular-nums; }
.wx-tl-date { font-size: .75rem; white-space: nowrap; color: var(--wx-muted); }
.wx-u-soon { --bar: var(--wx-red); }
.wx-u-near { --bar: #b87400; }
.wx-u-open { --bar: var(--wx-navy); }
.wx-u-passed { --bar: #8a8a8a; }
.wx-tl-col.wx-tl-active { border-color: var(--wx-ink); background: var(--wx-alt); }
.wx-tl-col.wx-tl-active .wx-tl-date { color: var(--wx-ink); }
.wx-tl-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: .75rem 0 0; font-size: .75rem; color: var(--wx-muted); }
.wx-tl-legend span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; vertical-align: 0; background: var(--bar); }
.wx-app:not(.wx-live) .wx-tl-hint, .wx-app:not(.wx-live) .wx-tl-legend { display: none; }

/* Body */
.wx-body { padding: 2rem 0 5rem; }
.wx-disclaimer { max-width: 60rem; margin: 0 0 2.5rem; padding-left: 1rem; border-left: 2px solid var(--wx-rule); font-size: .88rem; line-height: 1.6; color: var(--wx-muted); }

/* Layout: filters beside results on wide screens, a toggled panel on narrow ones */
.wx-layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 3rem; align-items: start; scroll-margin-top: 1rem; }
.wx-filters { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding-right: .5rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b5b5b5 transparent; }
.wx-filter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--wx-ink); }
main[data-page="workshops"] .wx-filter-head h2 { margin: 0; font-size: 1.2rem; font-weight: 300; }
.wx-clear, .wx-clear-inline, .wx-show-all, .wx-share { font-size: .82rem; color: var(--wx-navy); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: .25rem 0; cursor: pointer; }
.wx-clear:disabled { color: #999; text-decoration: none; cursor: default; }
.wx-group { border-bottom: 1px solid var(--wx-soft); }
.wx-group summary { display: flex; align-items: center; gap: .5rem; padding: .85rem 0; list-style: none; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wx-ink); cursor: pointer; }
.wx-group summary::-webkit-details-marker { display: none; }
.wx-group summary::after { content: "+"; margin-left: auto; font-size: 1.1rem; line-height: 1; color: var(--wx-muted); }
.wx-group[open] summary::after { content: "−"; }
.wx-group-n:not(:empty) { min-width: 1.3rem; padding: 0 .3rem; font-size: .72rem; letter-spacing: 0; line-height: 1.5; text-align: center; color: #fff; background: var(--wx-navy); }
.wx-group fieldset { border: 0; margin: 0; padding: 0 0 .9rem; min-width: 0; }
.wx-select { padding: 0 0 .9rem; }
.wx-hint { margin: 0 0 .5rem; font-size: .78rem; line-height: 1.45; color: var(--wx-muted); }
.wx-group select { width: 100%; min-height: 44px; padding: .5rem .6rem; font: 400 .875rem var(--font-body); color: var(--wx-ink); background: #fff; border: 1px solid #8c8c8c; border-radius: 0; }
.wx-checks { list-style: none; margin: 0; padding: 0; }
.wx-checks label { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .32rem 0; font-size: .875rem; line-height: 1.35; color: var(--wx-text); cursor: pointer; }
.wx-checks label:hover { color: var(--wx-ink); }
.wx-checks input { width: 1rem; height: 1rem; margin-top: .1rem; accent-color: var(--wx-navy); }
.wx-checks .wx-n { font-size: .75rem; color: var(--wx-muted); font-variant-numeric: tabular-nums; }
.wx-checks .wx-zero label { color: #8f8f8f; }
.wx-swatch::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem; vertical-align: 0; background: var(--topic); }
.wx-collapsed .wx-extra { display: none; }
.wx-toggle-filters { display: none; }
.wx-apply { display: none; width: 100%; margin-top: 1rem; min-height: 44px; font-size: .95rem; color: #fff; background: var(--wx-navy); border: 0; cursor: pointer; }

/* Toolbar */
.wx-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; align-items: end; }
.wx-toolbar label { display: flex; flex-direction: column; gap: .4rem; font-size: .78rem; color: var(--wx-muted); }
.wx-toolbar input, .wx-toolbar select { width: 100%; min-height: 46px; padding: .6rem .8rem; font: 400 .95rem var(--font-body); color: var(--wx-ink); background: #fff; border: 1px solid #8c8c8c; border-radius: 0; }
.wx-toolbar input::placeholder { color: var(--wx-muted); opacity: 1; }
.wx-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem; margin: 1.25rem 0 .75rem; }
.wx-count { margin: 0; font-size: .95rem; color: var(--wx-ink); font-variant-numeric: tabular-nums; }
.wx-bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wx-views { display: inline-flex; border: 1px solid #8c8c8c; }
.wx-views button { min-height: 36px; padding: .3rem .85rem; font-size: .82rem; color: var(--wx-text); background: #fff; border: 0; cursor: pointer; }
.wx-views button + button { border-left: 1px solid #8c8c8c; }
.wx-views button[aria-pressed="true"] { color: #fff; background: var(--wx-navy); }
.wx-tool { min-height: 38px; padding: .3rem .85rem; font-size: .82rem; color: var(--wx-navy); background: #fff; border: 1px solid var(--wx-navy); cursor: pointer; }
.wx-tool:hover:not(:disabled) { background: var(--wx-navy-tint); }
.wx-tool:disabled { color: #999; border-color: #c9c9c9; cursor: default; }
.wx-tool[aria-pressed="true"] { color: #fff; background: var(--wx-navy); }
.wx-app:not(.wx-live) .wx-bar-tools > :not(.wx-toggle-filters) { display: none; }
.wx-keyline { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: 0 0 .9rem; font-size: .75rem; color: var(--wx-muted); }
.wx-keyline .wx-status { font-size: .75rem; }
.wx-key-rule::before, .wx-key-soon::before, .wx-key-near::before { content: ""; display: inline-block; margin-right: .35rem; vertical-align: -1px; }
.wx-key-rule::before { width: 4px; height: .9rem; background: linear-gradient(#1d5fc1 0 33%, #6b3fa0 33% 66%, #2f7a3e 66%); }
.wx-key-soon::before { width: .6rem; height: .6rem; background: var(--wx-red); }
.wx-key-near::before { width: .6rem; height: .6rem; background: #b87400; }
.wx-app:not(.wx-live) .wx-key-soon, .wx-app:not(.wx-live) .wx-key-near { display: none; }
.wx-active { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.wx-active button[data-remove] { padding: .3rem .65rem; font-size: .8rem; color: var(--wx-ink); background: var(--wx-alt); border: 1px solid var(--wx-rule); cursor: pointer; }
.wx-active button[data-remove]:hover { border-color: var(--wx-ink); }
.wx-nojs-note { font-size: .85rem; color: var(--wx-muted); }
.wx-live .wx-nojs-note { display: none; }
.wx-results-foot { margin: 1.5rem 0 0; font-size: .82rem; color: var(--wx-muted); }
.wx-legend-link { color: var(--wx-navy); text-decoration: underline; text-underline-offset: 3px; }
.wx-app:not(.wx-live) .wx-results-foot .wx-share { display: none; }

/* Cards: sharp boxes with a date block, the content and the workshop's own image; the left rule is the
   main topic's colour */
.wx-results { display: grid; gap: 1rem; }
.wx-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) clamp(11rem, 20vw, 16rem); grid-template-areas: "when head media" "when detail detail"; border: 1px solid var(--wx-rule); border-left: 5px solid var(--topic, var(--wx-rule)); background: #fff; scroll-margin-top: 1rem; transition: border-color .15s; }
.wx-card:hover { border-color: #6b6b6b; border-left-color: var(--topic, #6b6b6b); }
.wx-card > .wx-when { grid-area: when; background: color-mix(in srgb, var(--topic, #999) 10%, #fff); }
.wx-card .wx-when-day { color: var(--topic, var(--wx-ink)); }
.wx-card-head { grid-area: head; min-width: 0; padding: 1.4rem 1.5rem .5rem; }
.wx-card-detail { grid-area: detail; min-width: 0; padding: .25rem 1.5rem 1.25rem; }
.wx-card-media { grid-area: media; align-self: start; display: flex; align-items: center; justify-content: center; margin: 1.4rem 1.4rem 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; border: 1px solid var(--wx-soft); }
.wx-card-media:has(.wx-fit-contain) { background: var(--wx-alt); }
.wx-card-media img, .wx-detail-image img { display: block; width: 100%; height: 100%; }
.wx-fit-cover { object-fit: cover; }
.wx-fit-contain { object-fit: contain; padding: .75rem; }
.wx-media-none { background: var(--topic, #999); border-color: var(--topic, #999); }
.wx-media-none span { padding: .75rem; font-size: 1.35rem; font-weight: 300; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere; color: #fff; }
.wx-when { display: flex; flex-direction: column; gap: .1rem; padding: 1.5rem 1rem 1.5rem 1.25rem; border-right: 1px solid var(--wx-soft); }
.wx-when-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--wx-muted); }
.wx-when-day { font-size: 2.4rem; font-weight: 300; line-height: 1.05; color: var(--wx-ink); font-variant-numeric: tabular-nums; }
.wx-when-month { font-size: .85rem; color: var(--wx-ink); }
.wx-when-time { font-size: .75rem; color: var(--wx-muted); }
.wx-when .wx-countdown { margin-top: .5rem; align-self: flex-start; }
.wx-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 0 0 .45rem; font-size: .75rem; }
.wx-topic-name { text-transform: uppercase; letter-spacing: .08em; color: var(--topic); }
.wx-card .wx-topic-name::before, .wx-detail-head .wx-topic-name::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; vertical-align: 0; background: var(--topic); }
.wx-card-meta .wx-code { font-size: .72rem; }
main[data-page="workshops"] .wx-card-title { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 300; line-height: 1.3; }
.wx-card-title a { color: var(--wx-ink); }
.wx-card-title a:hover { color: var(--wx-navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wx-summary { margin: 0 0 .9rem; max-width: 50rem; font-size: .98rem; line-height: 1.65; color: var(--wx-text); }
.wx-props { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1.75rem; margin: 0 0 .9rem; padding: .75rem 0; border-top: 1px solid var(--wx-soft); border-bottom: 1px solid var(--wx-soft); }
.wx-props-types { grid-column: 1 / -1; }
.wx-props dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wx-muted); }
.wx-props dd { margin: .2rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--wx-ink); }
.wx-tracks { display: flex; flex-wrap: wrap; gap: .1rem 0; list-style: none; margin: 0; padding: 0; }
.wx-tracks li { white-space: nowrap; }
.wx-tracks li + li::before { content: "·"; margin: 0 .5rem; color: var(--wx-muted); }
.wx-tracks-stack { flex-direction: column; }
.wx-tracks-stack li + li::before { content: none; }
.wx-track { color: var(--wx-ink); }
.wx-len { color: var(--wx-muted); font-variant-numeric: tabular-nums; }
.wx-track-match .wx-track { border-bottom: 2px solid var(--wx-navy); }
.wx-tags { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .9rem; font-size: .78rem; color: var(--wx-muted); }
.wx-card .wx-tags span[class^="wx-topic-"]::before { display: none; }
.wx-tags span[class^="wx-topic-"]::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; vertical-align: 1px; background: var(--topic); }
.wx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 0; font-size: .9rem; }
.wx-details { color: var(--wx-navy); }
.wx-details::after { content: " ›"; }
.wx-details:hover, .wx-ext:hover, .wx-src:hover { text-decoration: underline; text-underline-offset: 3px; }
.wx-ext { color: var(--wx-navy); }
.wx-ext::after, .wx-src::after { content: " ↗"; font-size: .85em; }
.wx-save { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; min-height: 34px; padding: .2rem .7rem; font-size: .82rem; color: var(--wx-navy); background: #fff; border: 1px solid #b5b5b5; cursor: pointer; }
.wx-save:hover { border-color: var(--wx-navy); }
.wx-save[aria-pressed="true"] { color: var(--wx-navy); background: var(--wx-navy-tint); border-color: var(--wx-navy); }
.wx-app:not(.wx-live) .wx-save { display: none; }
.wx-save-icon { margin: 0; padding: .2rem .5rem; }
.wx-save-icon .wx-save-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wx-empty { padding: 3rem 1.5rem; text-align: center; border: 1px solid var(--wx-rule); }
main[data-page="workshops"] .wx-empty h3 { margin: 0 0 .5rem; font-size: 1.4rem; font-weight: 300; }

/* Status, countdowns and flags: colour only where it means something */
.wx-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--wx-muted); }
.wx-status-mark { display: inline-block; min-width: .8rem; font-size: .8rem; line-height: 1; text-align: center; }
.wx-status-confirmed { color: var(--wx-muted); }
.wx-status-conflicting { color: var(--wx-ink); }
.wx-status-conflicting .wx-status-mark { font-weight: 700; }
.wx-status-unavailable, .wx-status-historical_only { color: var(--wx-grey); }
.wx-countdown { display: inline-block; font-size: .78rem; line-height: 1.5; white-space: nowrap; color: var(--wx-muted); }
.wx-countdown.wx-u-soon { padding: 0 .4rem; color: var(--wx-red); background: var(--wx-red-tint); }
.wx-countdown.wx-u-near { padding: 0 .4rem; color: var(--wx-amber); background: var(--wx-amber-tint); }
.wx-countdown.wx-u-passed { text-decoration: line-through; }
.wx-flag { display: block; margin: 0 0 .75rem; font-size: .8rem; color: var(--wx-muted); }
.wx-flag::before { content: "ⓘ "; }
.wx-flag-warn { color: var(--wx-ink); }
.wx-flag-warn::before { content: "! "; font-weight: 600; }
.wx-flag-ok { color: var(--wx-navy); }
.wx-flag-ok::before { content: "✓ "; }

/* Table view */
.wx-results-table { display: block; }
.wx-grid-wrap, .wx-table-wrap { position: relative; }
/* Scroll shading: the shadows at either edge show only when there is more table that way. */
.wx-grid-wrap { overflow-x: auto; background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 2rem 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .14), transparent) left / .7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), transparent) right / .7rem 100% no-repeat scroll; }
.wx-grid { width: 100%; border-collapse: collapse; font-size: .86rem; }
.wx-grid thead th { padding: .6rem .75rem; font-size: .7rem; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; text-align: left; vertical-align: bottom; color: var(--wx-muted); background: #fff; border-bottom: 2px solid var(--wx-ink); }
.wx-grid td, .wx-grid tbody th { padding: .7rem .6rem; vertical-align: top; text-align: left; border-bottom: 1px solid var(--wx-soft); }
.wx-grid td[data-label="Publication"] { min-width: 7.5rem; }
.wx-t-icon { width: 2.5rem; text-align: center !important; }
.wx-grid .wx-tracks li { white-space: normal; }
.wx-grid tbody tr { box-shadow: inset 4px 0 0 var(--topic, var(--wx-rule)); }
.wx-grid tbody tr:hover { background: #fafafa; }
.wx-grid tbody th { font-weight: 400; min-width: 10rem; }
.wx-grid tbody th a { color: var(--wx-ink); }
.wx-grid tbody th a:hover { color: var(--wx-navy); text-decoration: underline; }
.wx-t-sub { display: block; margin-top: .15rem; font-size: .72rem; color: var(--wx-muted); }
.wx-t-when { white-space: nowrap; padding-left: 1rem !important; }
.wx-t-date { display: block; color: var(--wx-ink); }
.wx-t-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.wx-grid abbr { text-decoration: none; cursor: help; }
.wx-tracks-compact { font-size: .82rem; }

/* About */
.wx-about { margin-top: 4.5rem; }
main[data-page="workshops"] .wx-about > h2 { margin: 0 0 1.25rem; font-size: 1.75rem; font-weight: 300; text-align: left; }
.wx-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.wx-about-grid > div { padding-top: 1rem; border-top: 2px solid var(--wx-ink); }
main[data-page="workshops"] .wx-about h3 { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 300; }
.wx-about p, .wx-about li { font-size: .9rem; line-height: 1.65; color: var(--wx-text); }
.wx-about p { margin: 0 0 .6rem; }
.wx-about a { color: var(--wx-navy); text-decoration: underline; text-underline-offset: 3px; }
.wx-legend { list-style: none; margin: 0; padding: 0; }
.wx-legend li { margin-bottom: .75rem; }
.wx-legend-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wx-muted); }
.wx-topic-key { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .3rem; }
.wx-topic-key span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .35rem; vertical-align: 0; background: var(--topic); }

/* Details dialog: a side sheet on wide screens, full screen on phones */
.wx-dialog { width: min(56rem, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--wx-rule); background: #fff; color: var(--wx-text); font-family: var(--font-body); font-weight: 300; }
.wx-dialog[open] { display: flex; flex-direction: column; }
.wx-dialog::backdrop { background: rgba(26, 26, 26, .45); }
/* The dialog sits outside <main>, so it takes main's type settings (fonts.css) through the same variables. */
.wx-dialog { --font-heading: 'QRS Frutiger', 'QRS Noto Sans SC', 'Segoe UI', sans-serif; --font-body: var(--font-heading); --font-sans: var(--font-heading); }
.wx-dialog-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 2rem; border-bottom: 1px solid var(--wx-soft); background: #fff; }
.wx-dialog-bar button { min-height: 40px; padding: .35rem .9rem; font-size: .85rem; color: var(--wx-navy); background: #fff; border: 1px solid #8c8c8c; cursor: pointer; }
.wx-dialog-bar button:hover { border-color: var(--wx-navy); }
.wx-dialog-body { flex: 1; overflow-y: auto; padding: 0 2rem 3rem; overscroll-behavior: contain; }
.wx-dialog h2, .wx-dialog h3, .wx-dialog h4 { font-weight: 300; font-synthesis: none; }
.wx-dialog h2 { margin: .5rem 0 .75rem; font-size: 1.9rem; line-height: 1.2; text-wrap: balance; }
.wx-dialog h3 { margin: 0 0 .9rem; padding-bottom: .5rem; font-size: 1.15rem; border-bottom: 1px solid var(--wx-ink); }
.wx-dialog h4 { margin: 1.25rem 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--wx-muted); }
.wx-dialog p, .wx-dialog li, .wx-dialog dd, .wx-dialog td { line-height: 1.6; }
.wx-detail-media { margin: 0 -2rem; }
.wx-detail-image { display: flex; align-items: center; justify-content: center; height: 15rem; overflow: hidden; background: var(--wx-alt); }
.wx-detail-image .wx-fit-contain { padding: 1.25rem; }
.wx-detail-media figcaption { padding: .35rem 2rem 0; font-size: .75rem; text-align: right; color: var(--wx-muted); }
.wx-detail-media + .wx-detail-head { margin-top: .5rem; }
.wx-detail-head { padding: 1.75rem 0 1.5rem; border-top: 6px solid var(--topic, var(--wx-navy)); margin-top: -1px; }
.wx-detail-head .wx-topic-name { color: var(--topic); }
.wx-detail-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 0; font-size: .85rem; color: var(--wx-text); }
.wx-detail-meta .wx-status { font-size: .85rem; }
.wx-detail-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 0; }
.wx-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .45rem 1.1rem; font-size: .88rem; border: 1px solid var(--wx-navy); cursor: pointer; }
.wx-btn-primary { color: #fff; background: var(--wx-navy); }
.wx-btn-primary:hover { background: #102c4b; }
.wx-btn-secondary { color: var(--wx-navy); background: #fff; }
.wx-btn-secondary:hover { background: var(--wx-navy-tint); }
.wx-dialog .wx-btn.wx-ext::after { content: " ↗"; }
.wx-dialog .wx-btn.wx-save { margin-left: 0; }
.wx-detail-section { padding: 1.75rem 0 .5rem; }
.wx-detail-section > p { margin: 0 0 .75rem; }
.wx-list { margin: 0 0 1rem; padding-left: 1.2rem; list-style: square; }
.wx-list li + li { margin-top: .25rem; }
.wx-note { margin: .75rem 0; padding: .75rem 1rem; background: var(--wx-alt); font-size: .92rem; }
.wx-alert { margin: 0; padding: 1rem 1.25rem; background: var(--wx-alt); border-left: 3px solid var(--wx-ink); }
.wx-dialog .wx-alert h3 { padding: 0; border: 0; margin-bottom: .4rem; font-size: 1rem; color: var(--wx-ink); }
.wx-alert ul { margin: 0 0 .5rem; padding-left: 1.2rem; list-style: square; }
.wx-alert p { margin: 0; font-size: .88rem; }
.wx-dl { margin: 0 0 1rem; }
.wx-dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--wx-soft); }
.wx-dl dt { font-size: .85rem; color: var(--wx-muted); }
.wx-dl dd { margin: 0; font-size: .92rem; color: var(--wx-ink); }
.wx-dl .wx-flag { display: inline; margin: 0 0 0 .4rem; }
.wx-quote { display: block; margin-top: .2rem; font-size: .8rem; color: var(--wx-muted); }
.wx-src { font-size: .8rem; color: var(--wx-navy); margin-left: .35rem; }
.wx-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.wx-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.wx-dialog .wx-table th, .wx-dialog .wx-table td { padding: .65rem .75rem .65rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wx-soft); }
.wx-dialog .wx-table thead th { font-size: .7rem; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--wx-muted); border-bottom: 2px solid var(--wx-ink); }
.wx-dialog .wx-table tbody th { font-weight: 400; min-width: 9rem; }
.wx-cat { display: block; font-size: .78rem; color: var(--wx-muted); }
.wx-rule { display: block; }
.wx-rule + .wx-rule { margin-top: .25rem; }
.wx-links, .wx-sources { list-style: none; margin: 0 0 1rem; padding: 0; }
.wx-links li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--wx-soft); font-size: .9rem; overflow-wrap: anywhere; }
.wx-link-label { font-size: .85rem; color: var(--wx-muted); }
.wx-sources li { padding: .35rem 0; font-size: .85rem; overflow-wrap: anywhere; }

/* Comparison */
.wx-compare { min-width: 40rem; }
.wx-compare thead th { min-width: 9.5rem; padding-top: .9rem !important; border-top: 4px solid var(--topic, var(--wx-ink)); }
.wx-compare thead th:first-child { border-top: 0; min-width: 9rem; }
.wx-compare thead th a { display: block; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--wx-ink); }
.wx-compare thead th .wx-code { display: block; margin-top: .15rem; }
.wx-compare tbody th { position: sticky; left: 0; z-index: 1; background: #fff; color: var(--wx-muted); font-size: .82rem; }
.wx-compare td, .wx-compare th { overflow-wrap: anywhere; }
.wx-compare .wx-tracks li { white-space: normal; }
.wx-remove { margin-top: .4rem; padding: 0; font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--wx-navy); text-decoration: underline; background: none; border: 0; cursor: pointer; }

/* Hub page */
.wx-hero-compact { padding-bottom: 2.5rem; }
.wx-hub-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wx-ink); }
.wx-hub-card { padding: 1.75rem 0 1.5rem 1.5rem; border-bottom: 1px solid var(--wx-rule); border-left: 4px solid var(--wx-navy); }
main[data-page="workshops"] .wx-hub-card h2 { margin: .25rem 0 .5rem; font-size: 1.6rem; font-weight: 300; }
.wx-hub-card h2 a { color: var(--wx-ink); }
.wx-hub-card h2 a:hover { color: var(--wx-navy); text-decoration: underline; }
.wx-hub-card p { max-width: 46rem; color: var(--wx-text); line-height: 1.65; margin: 0 0 .75rem; }
.wx-app .card-link { color: var(--wx-navy); }

/* QRS credit */
.wx-footer { padding: 1.75rem 0; color: rgba(255, 255, 255, .85); background: #11182c; }
.wx-footer > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.wx-footer-brand { display: inline-flex; align-items: center; gap: .85rem; color: #fff; }
.wx-footer-brand img { width: 44px; height: 44px; }
.wx-footer-brand > span { display: flex; flex-direction: column; line-height: 1.3; }
.wx-footer-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .75); }
.wx-footer-name { font-family: 'Playfair Display', 'QRS Noto Serif SC', serif; font-size: 1.15rem; }
.wx-footer-brand:hover .wx-footer-name { text-decoration: underline; text-underline-offset: 4px; }
.wx-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .85rem; }
.wx-footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: #d6dde8; }
.wx-footer-links a:hover { color: #fff; text-decoration: underline; }
.wx-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) { html:has(main[data-page="workshops"]) { scroll-behavior: smooth; } }
@media (max-width: 1023px) {
    .wx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .wx-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wx-figure:nth-child(3) { border-left: 0; }
    .wx-figure:nth-child(3) a { padding-left: 0; }
    .wx-figure:nth-child(n+3) { border-top: 1px solid var(--wx-rule); }
    .wx-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .wx-layout > .wx-filters { position: static; max-height: none; overflow: visible; padding: 0; display: none; margin-bottom: 1.5rem; scroll-margin-top: 1rem; }
    .wx-live .wx-filters .wx-apply { display: block; }
    .wx-layout > .wx-filters.wx-open { display: block; }
    .wx-live .wx-toggle-filters { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: .4rem 1rem; font-size: .88rem; color: #fff; background: var(--wx-navy); border: 0; cursor: pointer; }
    .wx-checks label { padding: .55rem 0; }
    .wx-checks input { width: 1.2rem; height: 1.2rem; }
    .wx-actions a, .wx-share, .wx-clear, .wx-show-all, .wx-legend-link { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; }
    .wx-views button, .wx-tool, .wx-save { min-height: 44px; }
    .wx-remove { display: inline-flex; align-items: center; min-height: 44px; }
    .wx-about-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 1279px) {
    .wx-grid th:nth-child(6), .wx-grid td:nth-child(6) { display: none; }
}
@media (min-width: 641px) and (max-width: 1180px) {
    .wx-card { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "media media" "when head" "when detail"; }
    .wx-card-media { margin: 0; aspect-ratio: 4 / 1; border: 0; border-bottom: 1px solid var(--wx-soft); }
    .wx-card-media.wx-media-none { display: none; }
}
@media (max-width: 640px) {
    .wx-hero { padding-top: 2.25rem; }
    .wx-topic-tile { flex-basis: calc(50% - .25rem); }
    .wx-topic-tile a { min-height: 5.5rem; padding: .7rem .8rem; }
    .wx-tile-areas { display: none; }
    .wx-tile-n { font-size: 1.6rem; }
    .wx-compare th[scope="row"] { max-width: 6.5rem; }
    .wx-tagline { font-size: 1.15rem; }
    .wx-facts-panel > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .wx-figure a { padding: 1rem .9rem .9rem; }
    .wx-figure-n { font-size: 2.1rem; }
    .wx-tl { gap: .15rem; }
    .wx-tl li { flex: 1 1 0; min-width: 0; }
    .wx-tl-col { padding: .35rem 0; }
    .wx-tl-date { width: min-content; font-size: .69rem; white-space: normal; text-align: center; line-height: 1.15; }
    .wx-tl-n { font-size: .8rem; }
    .wx-toolbar { grid-template-columns: minmax(0, 1fr); }
    .wx-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "when" "head" "detail"; }
    .wx-card-media { width: 100%; margin: 0; aspect-ratio: 3 / 1; border: 0; border-bottom: 1px solid var(--wx-soft); }
    .wx-card-media.wx-media-none { display: none; }
    .wx-card-head { padding: .6rem 1rem .25rem; }
    .wx-card-detail { padding: .25rem 1rem 1rem; }
    .wx-card .wx-save { margin-left: auto; min-width: 44px; justify-content: center; }
    .wx-card .wx-save .wx-save-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .wx-detail-media { margin: 0 -1rem; }
    .wx-detail-image { height: 11rem; }
    .wx-detail-media figcaption { padding: .35rem 1rem 0; }
    .wx-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; padding: 1rem 1rem 0; border-right: 0; }
    .wx-when-label { width: 100%; }
    .wx-when-day { font-size: 1.6rem; }
    .wx-when .wx-countdown { margin-top: 0; }
    .wx-tracks li { max-width: 100%; white-space: normal; }
    .wx-dialog { width: 100vw; border-left: 0; }
    .wx-dialog-bar { padding: .5rem 1rem; }
    .wx-dialog-body { padding: 0 1rem 2.5rem; }
    .wx-dl > div, .wx-links li { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .wx-grid-wrap { background: none; }
    .wx-grid thead { display: none; }
    .wx-grid, .wx-grid tbody, .wx-grid tr, .wx-grid td, .wx-grid tbody th { display: block; width: 100%; }
    .wx-grid tr { position: relative; padding: .75rem .5rem .75rem 1rem; border-bottom: 1px solid var(--wx-rule); }
    .wx-grid td, .wx-grid tbody th { padding: .1rem 0; border: 0; text-align: left !important; }
    .wx-grid tbody td[data-label]::before { content: attr(data-label) ": "; display: inline; margin: 0; font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--wx-muted); }
    .wx-grid tbody td.wx-t-when::before, .wx-grid tbody td.wx-t-icon::before { content: none; }
    .wx-grid tbody .wx-t-when { display: flex; gap: .6rem; align-items: baseline; padding-right: 3rem; }
    .wx-grid .wx-t-icon .wx-status .wx-sr { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
    .wx-grid .wx-t-when { padding-left: 0 !important; }
    .wx-grid .wx-t-icon { width: auto; }
    .wx-grid td:last-child { position: absolute; top: .6rem; right: .5rem; width: auto; }
    .wx-dialog .wx-table:not(.wx-compare) thead { display: none; }
    .wx-dialog .wx-table:not(.wx-compare), .wx-dialog .wx-table:not(.wx-compare) tbody, .wx-dialog .wx-table:not(.wx-compare) tr,
    .wx-dialog .wx-table:not(.wx-compare) th, .wx-dialog .wx-table:not(.wx-compare) td { display: block; width: 100%; }
    .wx-dialog .wx-table:not(.wx-compare) tr { padding: .6rem 0; border-bottom: 1px solid var(--wx-rule); }
    .wx-dialog .wx-table:not(.wx-compare) th, .wx-dialog .wx-table:not(.wx-compare) td { border: 0; padding: .15rem 0; }
    .wx-table td[data-label]::before { content: attr(data-label); display: block; margin-top: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wx-muted); }
}