/* INCOSE IL 2027: the whole site's CSS, one file for every page (st- everything) */
/* the font, hosted with the site (st-fonts: Google Sans, its Hebrew and Latin files, weights 400-700) and preloaded in the head; font-display: block (no text until the font is in, so it never swaps and nothing jumps) */
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 700; font-display: block; src: url(../st-fonts/google-sans-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 700; font-display: block; src: url(../st-fonts/google-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* a fallback with Google Sans's size (Arial at 110.6%, measured on the site's Hebrew text at 400-700; its height from Google Sans), so nothing moves when the font arrives */
@font-face { font-family: "Google Sans Fallback"; font-display: block; src: local("Arial"); size-adjust: 110.6%; ascent-override: 87.7%; descent-override: 26.2%; line-gap-override: 0%; }
/* the scrollbar is always there and keeps its place: a page still loading (the register page waits on their scripts) is short for a moment, and the bar
   would vanish and come back; an open popup locks the scroll without the page shifting */
html { overflow-y: scroll; scrollbar-gutter: stable; }
body { min-height: 100vh; margin: 0; font-family: var(--st-font); color: var(--st-text); background: #fff; }
/* ---------- the frame of every page: one container, one section, one gap under a title. Change a value here and every page follows ---------- */
:root {
  /* the frame */
  --st-container: 1232px;                 /* the one container: 1200px of content + its 16px sides */
  --st-gutter: 16px;                      /* the container's sides */
  --st-section: clamp(36px, 6vw, 96px);   /* every section's space, top and bottom (36px on a phone) */
  --st-head-gap: clamp(32px, 4vw, 48px);  /* a section's title to what follows it */
  /* the type */
  --st-font: "Google Sans", "Google Sans Fallback", system-ui, sans-serif;
  /* the colours, by role (the banner's greens and mint) */
  --st-ink: #0b3a30;            /* headings and strong text */
  --st-text: #33443f;           /* running text */
  --st-muted: #4f6b62;          /* secondary text */
  --st-faint: #9bb5ad;          /* a separator */
  --st-green: #0b4433;          /* the brand green: badges, buttons, track 1 */
  --st-deep: #05251a;           /* the menu, the bottom of a dark section */
  --st-deepest: #041c14;        /* the footer */
  --st-mint: #2cb096;           /* lines, dots, hover frames, focus */
  --st-mint-light: #6ef3df;     /* glows, a CTA's hover */
  --st-teal: #13866f;           /* links and labels on white (mint is too light there) */
  --st-blue: #1b5e83;           /* track 2 (the logo's blue) */
  --st-blue-deep: #134563;      /* track 2's dark: a blue popup's title and buttons' hover */
  --st-accent: var(--st-mint);       /* a cube's lines, frames and underlines: the mint, or its track's colour */
  --st-accent-ink: var(--st-teal);   /* a cube's numbers and arrows (text on white) */
  --st-on-dark: #dcefe9;        /* text on the dark green */
  --st-on-dark-muted: #9fbdb3;  /* secondary text on the dark green */
  --st-line: #e1ebe7;           /* hairlines, card frames */
  --st-line-strong: #d3e4de;    /* fields, photo rings */
  --st-tint: #f2f7f5;           /* a light surface */
  --st-grey: #f7f7f7;           /* the logos' section, breaks (the logo tiles are on this grey) */
  --st-yellow: #dee69d;         /* the dates on the banner */
  /* ---- the program table and its popups: every colour they use is here (the README's "Colours" has the map) ----
     a track is four variables: its colour (the column head, its cubes, the popup's ink), -deep (a popup's title), -bg (a popup's head) and -line */
  --st-t1: var(--st-teal);      --st-t1-deep: var(--st-ink);       --st-t1-bg: var(--st-tint);  --st-t1-line: #cfe7de;   /* track 1 */
  --st-t2: var(--st-blue);      --st-t2-deep: var(--st-blue-deep); --st-t2-bg: #eaf1f7;  --st-t2-line: #cfdfeb;   /* track 2 */
  --st-t3: #0b6aa2;             --st-t3-deep: #08507a;             --st-t3-bg: color-mix(in srgb, var(--st-sky) 8%, #fff);  --st-t3-line: color-mix(in srgb, var(--st-sky) 25%, #fff);   /* the tutorials day */
  --st-sky: #0b86c8;            /* the rows for everyone (the logo's bright blue): a plenary's frame, the underlines of meals and breaks */
  --st-neutral-bg: color-mix(in srgb, var(--st-sky) 6%, #fff);     /* meals and breaks: a pale tint of the sky blue */
  --st-neutral-line: color-mix(in srgb, var(--st-sky) 40%, #fff);   /* their 2px frame (every cube has one with presence: a faint one read as a hole) */
  --st-pay: #28a745;            /* the registration's pay button: the green people know from checkouts */
  --st-pay-hover: #218838;
  --st-red: #c0392b;            /* a required field's star */
  --st-dark-bg: linear-gradient(to bottom, var(--st-green), var(--st-deep));   /* every dark section */
  /* the shapes */
  --st-radius-sm: 8px;          /* badges, fields */
  --st-radius: 12px;            /* cards, cubes, tiles */
  --st-radius-lg: 16px;         /* the popup, a big picture */
  --st-pill: 999px;             /* buttons, labels */
}
.st-wrap { width: 100%; max-width: var(--st-container); margin-inline: auto; padding-inline: var(--st-gutter); }
.st-section { padding-block: var(--st-section); }
.st-section-tint { background: var(--st-tint); }   /* a section on the light surface, to set it apart from the white ones around it */
/* ---------- the home's banner: the dark green, a mint glow behind the shape, the wave and the dots inside it ---------- */
.st-hero { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(ellipse 40% 75% at 34% 48%, color-mix(in srgb, var(--st-mint) 30%, transparent), transparent 70%), var(--st-dark-bg); padding-block: clamp(32px, 3vw, 56px) calc(clamp(32px, 3vw, 56px) + clamp(34px, 4.25vw, 82px)); }   /* the bottom: the top's space plus what the cards cover */
/* the wave, along the top edge, clear of the text (AVIF, WebP for a browser without it; its source in _not-used) */
.st-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../st-images/st-wave-top.webp) center top / cover no-repeat; background-image: image-set(url(../st-images/st-wave-top.avif) type("image/avif"), url(../st-images/st-wave-top.webp) type("image/webp")); opacity: .2;
  /* it fades out at both sides */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
/* halftone dots in two corners (top left, bottom right) of the dark sections that have them (AVIF, WebP for a browser without it) */
.st-hero::after, .st-topics::after, .st-banner::after, .st-calendar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../st-images/ai_dots_tl.webp) top left / min(560px, 55%) auto no-repeat, url(../st-images/ai_dots_br.webp) bottom right / min(560px, 55%) auto no-repeat; background-image: image-set(url(../st-images/ai_dots_tl.avif) type("image/avif"), url(../st-images/ai_dots_tl.webp) type("image/webp")), image-set(url(../st-images/ai_dots_br.avif) type("image/avif"), url(../st-images/ai_dots_br.webp) type("image/webp")); mix-blend-mode: screen; opacity: .35; }
/* a phone: the hero's bottom-right dots go to its top right (the same dots flipped upside down: ai_dots_tr) */
@media (max-width: 767px) { .st-hero::after { background-image: url(../st-images/ai_dots_tl.webp), url(../st-images/ai_dots_tr.webp); background-image: image-set(url(../st-images/ai_dots_tl.avif) type("image/avif"), url(../st-images/ai_dots_tl.webp) type("image/webp")), image-set(url(../st-images/ai_dots_tr.avif) type("image/avif"), url(../st-images/ai_dots_tr.webp) type("image/webp")); background-position: top left, top right; } }
/* the text and the element side by side, centred; a phone: one under the other */
.st-hero-in { display: flex; align-items: center; justify-content: center; gap: min(2vw, 40px); }
.st-hero-in img { display: block; height: auto; max-width: 100%; }
/* the logo over the text, one column from the top, beside the shape */
.st-copy { width: min(30vw, 600px); align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 1.6vw, 28px); }
.st-logo { width: 40%; }
.st-text { width: 100%; }
/* the element glows: screen over the green, a soft mint halo */
.st-shape { width: min(24vw, 480px); mix-blend-mode: screen; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--st-mint-light) 45%, transparent)) brightness(1.1); }
/* SAVE THE DATE: a ring in the corner */
.st-save { position: absolute; top: clamp(24px, 3vw, 56px); inset-inline-start: clamp(24px, 11vw, 210px); width: clamp(110px, 9.5vw, 180px); aspect-ratio: 1; box-sizing: border-box; border-radius: 50%; border: clamp(4px, .3vw, 6px) solid var(--st-mint-light); display: grid; place-content: center; justify-items: center; gap: 4px; color: #fff; font: 600 clamp(15px, 1.35vw, 25px)/1.15 var(--st-font); text-align: center; background: color-mix(in srgb, var(--st-deep) 80%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 18px color-mix(in srgb, var(--st-mint-light) 45%, transparent), inset 0 0 18px color-mix(in srgb, var(--st-mint-light) 25%, transparent); }
.st-save svg { width: clamp(26px, 2vw, 38px); height: clamp(26px, 2vw, 38px); fill: none; stroke: var(--st-mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  .st-save { width: 78px; top: 12px; inset-inline-start: 12px; border-width: 4px; font-size: 11px; gap: 2px; }
  .st-save svg { width: 18px; height: 18px; }
  /* a phone: its own wave (st-wave-mobile, Nano Banana, drawn for a narrow screen), along the bottom behind the element, clear of the text */
  .st-hero::before { background: url(../st-images/st-wave-mobile.webp) center bottom / 100% auto no-repeat; background-image: image-set(url(../st-images/st-wave-mobile.avif) type("image/avif"), url(../st-images/st-wave-mobile.webp) type("image/webp")); -webkit-mask-image: none; mask-image: none; }
  /* the glow follows the element, at the bottom in the middle */
  .st-hero { padding-block: 40px 50px; background: radial-gradient(ellipse 75% 35% at 50% 76%, color-mix(in srgb, var(--st-mint) 30%, transparent), transparent 70%), var(--st-dark-bg); }
  .st-hero-in { flex-direction: column; gap: 12px; }
  .st-copy { width: 100%; max-width: 420px; align-self: center; }
  .st-hero-in .st-shape { display: none; }   /* a phone: the banner without the shape (a trial), so the first card shows on the first screen */
}
/* the two cards under the header, rising over its bottom (the header adds that much to its own bottom space); in the banner's greens */
.st-cards { position: relative; margin-bottom: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.st-cards-over { margin-top: calc(clamp(34px, 4.25vw, 82px) * -1); }
/* the whole card is the link (its ::after covers the card); a light green stroke, mint on hover, nothing moves */
.st-card { position: relative; margin: 0; background: #fff; border: 2px solid var(--st-line-strong); border-radius: var(--st-radius); box-shadow: 0 6px 24px rgb(0 0 0 / .12); padding: 20px 24px; display: grid; justify-items: center; gap: 8px; text-align: center; transition: border-color .2s; }
.st-card:hover { border-color: var(--st-mint); }
.st-card:has(.st-link:focus-visible) { outline: 2px solid var(--st-mint); outline-offset: 3px; }
.st-badge { background: var(--st-green); color: #fff; border-radius: var(--st-radius-sm); padding: 4px 16px; font-size: 17px; line-height: 1.4; }
.st-date { margin: 0; font-size: 26px; font-weight: 700; color: var(--st-ink); line-height: 1.3; }
.st-date span { color: var(--st-mint); }
.st-date .st-sep { font-weight: 400; color: var(--st-faint); margin-inline: 6px; }
.st-place { margin: 0; font-size: 15px; color: var(--st-muted); }
.st-link { font-size: 19px; color: var(--st-teal); text-decoration: underline; text-underline-offset: 3px; outline: none; }
.st-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (max-width: 767px) {
  .st-cards { grid-template-columns: 1fr; gap: 16px; }
  .st-cards-over { margin-top: -34px; }
}
/* about the conference: text beside a picture, both from the top. Everything inside .st-prose only, so the site's own h2, p and ul stay as they are */
.st-about { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
/* .st-prose: text to read, on any page (the home's about, the tutorials day): its h1 or h2, paragraphs, lists with mint dots, the signature */
.st-prose h1, .st-prose .st-prose-title { margin: 0 0 24px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.25; color: var(--st-ink); }
.st-prose h1::after, .st-prose .st-prose-title::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; border-radius: 2px; background: var(--st-mint); }
/* .st-prose-title: an article's title that is an h2 on its page (the tutorials day's text): the look of the prose h1 */
/* a title in three levels (the home's h1, the tutorials day's h2): the event small in our green above (teal: the mint is too light for text), the name, then when and where lighter under it */
.st-prose-kicker { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--st-teal); }
.st-prose-when { display: block; margin-top: 6px; font-size: 18px; font-weight: 500; color: var(--st-muted); }
.st-prose h2 { margin: 36px 0 12px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--st-ink); }
.st-prose p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; }
.st-prose .st-lead { font-size: 18px; font-weight: 600; line-height: 1.65; color: var(--st-ink); }
.st-prose ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.st-prose li { position: relative; padding-inline-start: 22px; font-size: 17px; line-height: 1.6; }
.st-prose li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--st-mint); }
.st-prose strong { color: var(--st-ink); font-weight: 700; }
.st-prose .st-after { margin-top: 36px; }
.st-about-img { display: block; width: 100%; height: auto; border-radius: var(--st-radius-lg); }
@media (max-width: 767px) {
  .st-about { grid-template-columns: 1fr; }
  .st-about-img { max-width: 360px; margin-inline: auto; }
}
/* see you at the conference: the two chairs, inside the text column, a round photo beside the name, the role and the organisation */
.st-prose .st-chairs { margin-top: 40px; }
.st-prose .st-chairs-title { margin: 0 0 24px; font-size: 19px; font-weight: 600; color: var(--st-ink); }
.st-prose .st-chairs-row { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.st-prose .st-chair { margin: 0; display: flex; align-items: center; gap: 16px; }
.st-prose .st-chair img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--st-line-strong); }
.st-prose .st-chair p { margin: 0; }
/* a signature: three weights of the one variable font (400-700): the name bold, the role medium in teal, the organisation at the font's lightest (400) */
.st-prose .st-chair-name { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--st-ink); }
.st-prose .st-chair-role { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--st-teal); }
.st-prose .st-chair-org { margin-top: 6px; font-size: 15px; font-weight: 400; color: var(--st-muted); }
/* a phone: the same text, tighter */
@media (max-width: 767px) {
  .st-about { gap: 28px; }
  .st-prose h1, .st-prose .st-prose-title { margin-bottom: 16px; }
  .st-prose h1::after, .st-prose .st-prose-title::after { margin-top: 12px; }
  .st-prose h2 { margin: 24px 0 8px; font-size: 18px; }
  .st-prose p { margin-bottom: 12px; font-size: 16px; line-height: 1.6; }
  .st-prose .st-lead { font-size: 17px; line-height: 1.55; }
  .st-prose ul { gap: 6px; }
  .st-prose li { font-size: 16px; line-height: 1.55; }
  .st-prose .st-after { margin-top: 20px; }
  .st-prose .st-chairs { margin-top: 24px; }
  .st-prose .st-chairs-title { margin-bottom: 16px; }
  .st-prose .st-chair img { width: 84px; height: 84px; }
}
/* the dark sections under the header (the topics, the calendar): the header's green, a soft mint glow from the top */
.st-dark { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--st-mint) 25%, transparent), transparent 70%), var(--st-dark-bg); color: #fff; }
/* a section's centred heading with the mint bar under it: white on the dark, dark green on white; the block after it keeps the gap */
.st-title { margin: 0; font: 700 clamp(26px, 2.4vw, 34px)/1.25 var(--st-font); color: inherit; text-align: center; }
.st-title::after { content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 2px; background: var(--st-mint); }
/* the gaps between blocks live only here (a block never sets its own top margin, so it cannot erase them) */
.st-title + *, .st-sub + * { margin-top: var(--st-head-gap); }
.st-title + .st-sub { margin-top: 20px; }
.st-sub { max-width: 760px; margin-inline: auto; margin-bottom: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.55; color: var(--st-ink); text-align: center; }   /* the line under a page's title: with presence (dark, semibold) */
.st-dark .st-sub { color: var(--st-on-dark); }
/* the topics: an icon over its line, four in a row (the icons: one Nano Banana sheet, cut into eight, black made transparent) */
.st-topics-grid { margin-bottom: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3.5vw, 56px) clamp(20px, 2.5vw, 40px); }
.st-topics-grid li { margin: 0; padding: 0; display: grid; justify-items: center; align-content: start; gap: 16px; text-align: center; }
.st-topics-grid li::before { content: none; }
.st-topics-grid img { display: block; width: clamp(96px, 8vw, 128px); height: auto; }
.st-topics-grid p { margin: 0; max-width: 260px; font-size: 17px; line-height: 1.55; color: var(--st-on-dark); }
.st-topics-grid strong { display: block; font-weight: 700; color: #fff; }
@media (max-width: 959px) { .st-topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .st-topics-grid img { width: 84px; } .st-topics-grid p { font-size: 15px; } }
/* the supporters: the site's own logo tiles (assets/, framed already, on var(--st-grey): the section takes that grey so the tiles' edges vanish),
   their order and three in a row, as on the site */
.st-sponsors { background: var(--st-grey); color: var(--st-ink); }
.st-logos { margin-bottom: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); justify-content: center; gap: clamp(10px, 1.4vw, 20px); }
.st-logos li { margin: 0; padding: 0; }
.st-logos li::before { content: none; }
.st-logos img { display: block; width: 100%; height: auto; }
/* the calendar: the cards grid again, each with a calendar page and an add button; the whole card opens Google Calendar */
.st-calendar .st-card { gap: 12px; padding: 28px 24px; }
.st-calendar .st-date { font-size: 24px; }
/* a calendar page: the month on a dark band, two rings holding it, the day big, and a mint plus: this one adds the day */
.st-cal { position: relative; width: 78px; margin: 6px 0 8px; border: 2px solid var(--st-green); border-radius: var(--st-radius-sm); background: #fff; display: grid; text-align: center; }
.st-cal b { padding: 5px 0 4px; border-radius: 6px 6px 0 0; background: var(--st-green); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.st-cal strong { padding-bottom: 2px; font-size: 34px; font-weight: 700; line-height: 1.25; color: var(--st-ink); }
.st-cal::before { content: ""; position: absolute; top: -8px; left: 18px; right: 18px; height: 13px; border-inline: 4px solid var(--st-mint); border-radius: 2px; }
.st-cal::after { content: "+"; position: absolute; right: -13px; bottom: -11px; width: 28px; height: 28px; border-radius: 50%; background: var(--st-mint); color: #fff; font: 700 22px/27px var(--st-font); text-align: center; box-shadow: 0 0 0 3px #fff; }
.st-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 22px; border-radius: var(--st-pill); background: var(--st-green); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .03em; text-decoration: none; transition: background-color .2s; }
.st-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .st-card:hover .st-add { background: var(--st-teal); } }

/* ---------- the site's frame: skip link, focus, menu, page head, footer ---------- */
.st-skip { position: absolute; top: -60px; inset-inline-start: 16px; z-index: 100; padding: 10px 16px; border-radius: var(--st-radius-sm); background: var(--st-mint); color: var(--st-deep); font-weight: 700; text-decoration: none; }
.st-skip:focus { top: 8px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--st-mint); outline-offset: 2px; }
/* the menu: Bootstrap's navbar (it opens and closes the links under 1200px), in the header's dark green; the current page underlined in mint */
.st-nav { padding-block: 10px; background: var(--st-deep); border-bottom: 1px solid color-mix(in srgb, var(--st-mint-light) 18%, transparent); }
.st-nav-logo { padding: 0; }
.st-nav-logo img { display: block; width: 200px; height: auto; }
@media (max-width: 767px) {
  .st-nav-logo img { width: 140px; }
}
.st-nav .nav-link { position: relative; padding: 12px 0; color: var(--st-on-dark); font-size: 16px; font-weight: 500; white-space: nowrap; }
.st-nav .nav-link span { color: var(--st-mint-light); font-size: 14px; }
.st-nav .nav-link:hover, .st-nav .nav-link:focus, .st-nav .nav-link[aria-current="page"] { color: #fff; }
/* the mint line: always under the current page; on hover (or keyboard focus) it grows out from the middle under any link */
.st-nav .nav-link::after { content: ""; position: absolute; inset-inline: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--st-mint); transform: scaleX(0); transition: transform .25s ease; }
.st-nav .nav-link:hover::after, .st-nav .nav-link:focus-visible::after, .st-nav .nav-link[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .st-nav .nav-link::after { transition: none; } }
.st-nav .st-nav-lang { font-size: 15px; }
.st-nav-end { display: flex; align-items: center; gap: 20px; }
.st-nav-cta-bar { display: none; }
/* the CTA is Bootstrap's .btn: its colours go through Bootstrap's own variables, or its :active and :hover (stronger) paint it transparent and grey.
   Its hover is the base colour (a tap must not stick a hover); a mouse gets the light mint below */
.st-nav-cta { --bs-btn-color: var(--st-deep); --bs-btn-bg: var(--st-mint); --bs-btn-hover-color: var(--st-deep); --bs-btn-hover-bg: var(--st-mint); --bs-btn-active-color: var(--st-deep); --bs-btn-active-bg: var(--st-mint-light); --bs-btn-active-border-color: transparent; padding: 10px 20px; border: 0; border-radius: var(--st-pill); background: var(--st-mint); color: var(--st-deep); font-size: 16px; font-weight: 700; white-space: nowrap; }
.st-nav-cta:focus-visible, .st-nav-cta[aria-current="page"] { background: var(--st-mint-light); color: var(--st-deep); }
@media (hover: hover) { .st-nav-cta:hover { background: var(--st-mint-light); color: var(--st-deep); } }
.st-nav-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-color: color-mix(in srgb, var(--st-mint-light) 45%, transparent); }   /* square */
.st-nav-btn:focus { box-shadow: none; }
/* the menu button's three lines squeeze into an X while the menu is open (Bootstrap sets aria-expanded); the studio kit's "squeeze" hamburger */
.st-burger, .st-burger::before, .st-burger::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--st-on-dark); }
.st-burger { position: relative; transition: transform .075s cubic-bezier(.55, .055, .675, .19); }
.st-burger::before, .st-burger::after { content: ""; position: absolute; inset-inline-start: 0; }
.st-burger::before { top: -7px; transition: top .075s .12s ease, opacity .075s ease; }
.st-burger::after { bottom: -7px; transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19); }
.st-nav-btn[aria-expanded="true"] .st-burger { transform: rotate(45deg); transition-delay: .12s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); }
.st-nav-btn[aria-expanded="true"] .st-burger::before { top: 0; opacity: 0; transition: top .075s ease, opacity .075s .12s ease; }
.st-nav-btn[aria-expanded="true"] .st-burger::after { bottom: 0; transform: rotate(-90deg); transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1); }
@media (prefers-reduced-motion: reduce) { .st-burger, .st-burger::before, .st-burger::after { transition: none; } }
.st-nav-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-mint) 50%, transparent); }   /* the ring for the keyboard only, not after a tap */
@media (min-width: 1200px) {
  .st-nav-links { margin-inline: auto; gap: clamp(12px, 1.8vw, 28px); }
}
@media (max-width: 1199.98px) {
  /* the panel drops over the page, under the bar (not into the flow: the page stays where it is); it scrolls if taller than the screen */
  .st-nav-panel { position: absolute; top: 100%; inset-inline: 0; padding: 8px var(--st-gutter) 16px; max-height: calc(100dvh - 100%); overflow-y: auto; background: var(--st-deep); border-bottom: 1px solid color-mix(in srgb, var(--st-mint-light) 18%, transparent); box-shadow: 0 18px 32px rgb(0 0 0 / .35); }
  .st-nav .nav-link { border-bottom: 1px solid rgb(255 255 255 / .08); }
  /* on a phone the line is a bar at the start of the row, and it grows from top to bottom */
  .st-nav .nav-link::after { inset-block: 12px; inset-inline: -12px auto; width: 4px; height: auto; transform: scaleY(0); }
  .st-nav .nav-link:hover::after, .st-nav .nav-link:focus-visible::after, .st-nav .nav-link[aria-current="page"]::after { transform: scaleY(1); }
  .st-nav-end { flex-direction: column; align-items: stretch; gap: 0; }
  .st-nav-cta { margin-top: 12px; }
  /* the registration in the bar too, beside the menu button (and still in the open menu) */
  .st-nav-cta-bar { display: inline-flex; margin: 0; margin-inline-start: auto; margin-inline-end: 8px; padding: 5px 10px; font-size: 12px; }   /* small: the bar is tight on a phone (the open menu has the big one) */
  /* one row: the logo, the registration, the menu button; the logo gives way if the screen is narrow */
  .st-nav > .st-wrap { flex-wrap: nowrap; }
  .st-nav-logo { flex: 0 1 auto; min-width: 0; margin-inline-end: 8px; }
  .st-nav-logo img { max-width: 100%; }
}
/* the footer: the logo and the contacts, under the calendar */
.st-foot { background: var(--st-deepest); color: var(--st-on-dark-muted); font-size: 15px; }
.st-foot-in { padding-block: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.st-foot img { display: block; width: 120px; height: auto; }
.st-foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.st-foot a { color: var(--st-on-dark); text-decoration: none; }
.st-foot a:hover { color: var(--st-mint-light); text-decoration: underline; }

/* ---------- the program: a table of cubes, the time on the right, two tracks (track 1 green, track 2 blue, from the logo) ---------- */
/* the 8px between the cubes also rings the table: a -8px margin puts the cubes' edges on the container's */
.st-prog { width: calc(100% + 16px); margin: 0 -8px -8px; border-collapse: separate; border-spacing: 8px; table-layout: fixed; }
.st-prog-corner { width: 140px; }
.st-prog thead th { padding: 14px 16px; border-radius: var(--st-radius); color: #fff; font-size: 18px; font-weight: 700; text-align: center; }
.st-prog thead .st-t1 { background: var(--st-t1); }
.st-prog thead .st-t2 { background: var(--st-t2); }
.st-prog tbody th { padding: 12px 4px; vertical-align: middle; text-align: center; font-weight: 400; }
.st-time { display: block; font-size: 17px; font-weight: 700; color: var(--st-ink); white-space: nowrap; }
.st-part { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--st-teal); }
/* a cube: the cell is its frame; the slot inside fills it (a td height of 1px lets a child's 100% work) */
/* three kinds of cube: a session (its track's colour); the meals and breaks (a pale sky tint); a plenary (white, a sky frame). Each has a solid 2px frame */
.st-prog td { height: 1px; padding: 0; border: 2px solid var(--st-neutral-line); border-radius: var(--st-radius); vertical-align: top; background: var(--st-neutral-bg); }
/* a track's cube copies its track's colours into --st-track*; every rule inside reads only those */
.st-prog td.st-t1 { --st-track: var(--st-t1); --st-track-bg: var(--st-t1-bg); --st-track-line: var(--st-t1-line); }
.st-prog td.st-t2 { --st-track: var(--st-t2); --st-track-bg: var(--st-t2-bg); --st-track-line: var(--st-t2-line); }
.st-prog td.st-t3 { --st-track: var(--st-t3); --st-track-bg: var(--st-t3-bg); --st-track-line: var(--st-t3-line); }
.st-prog td:is(.st-t1, .st-t2, .st-t3) { --st-accent: var(--st-track); --st-accent-ink: var(--st-track); background: var(--st-track-bg); border-color: var(--st-track-line); }
/* a plenary is for everyone: white, framed in the sky blue (not a track's colour: the mint read as track 1) */
.st-prog td:not(.st-t1, .st-t2, .st-t3, .st-plenary) { --st-accent: var(--st-sky); --st-accent-ink: var(--st-sky); }   /* meals and breaks: their underline and frame in the same blue */
.st-prog td.st-plenary { --st-accent: var(--st-sky); --st-accent-ink: var(--st-sky); background: #fff; border: 2px solid var(--st-sky); }
.st-slot { display: grid; align-content: center; justify-items: center; gap: 6px; width: 100%; height: 100%; box-sizing: border-box; padding: 16px 20px; border: 0; border-radius: calc(var(--st-radius) - 1px); background: none; color: inherit; font: inherit; text-align: center; }
.st-break .st-slot { padding-block: 12px; }
/* two sessions side by side start at the top, so their numbers, titles and chairs share a line (a cube alone stays centred) */
.st-prog td:is(.st-t1, .st-t2) .st-slot { align-content: start; }
/* a cube that opens (the build adds .is-pop and the button): its "+ לפרטים" button stretches over the whole cube; a mint frame on hover */
.st-slot.is-pop { position: relative; transition: box-shadow .2s, background-color .2s; }
.st-slot.is-pop:hover { background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 2px var(--st-accent); }
.st-slot.is-pop:has(.st-slot-more:focus-visible, .st-slot-head:focus-visible) { outline: 3px solid var(--st-mint); outline-offset: 2px; }
/* a program cube with nothing inside to click (a tutorial, the posters, the panel): its head button stretches over the whole cube */
.st-slot.is-pop .st-slot-head::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.st-slot.is-pop .st-slot-head:focus-visible { outline: none; }
.st-slot-num { font-size: 14px; font-weight: 600; color: var(--st-accent-ink); }
.st-slot-ttl { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--st-ink); }
.st-break .st-slot-ttl { font-size: 16px; font-weight: 600; }
.st-slot-text { max-width: 720px; font-size: 15px; line-height: 1.55; color: var(--st-muted); }
.st-slot-chair { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--st-text); }
.st-slot-chair img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
/* a list in a cube: a block in the middle, its lines from the right with mint dots; the topic bold, the speaker light */
.st-slot-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--st-muted); text-align: start; }
.st-slot-list li { position: relative; padding-inline-start: 18px; }
.st-slot-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--st-accent); }
.st-slot-list strong { font-weight: 700; color: var(--st-ink); }
.st-slot-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--st-teal); cursor: pointer; }
.st-slot-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.st-slot-more:focus-visible { outline: none; }
.st-slot-more::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--st-mint); color: #fff; font-size: 16px; line-height: 1; }
/* a phone: the rows stack, the time over its cubes, each track cube labelled with its track */
@media (max-width: 767px) {
  .st-prog, .st-prog tbody, .st-prog tr, .st-prog th, .st-prog td { display: block; }
  .st-prog { width: 100%; margin: 0; border-spacing: 0; }
  .st-prog thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .st-prog tr { margin-bottom: 20px; }
  .st-prog tbody th { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 0 8px; text-align: start; }
  .st-time { font-size: 16px; }
  .st-part { margin: 0; font-size: 14px; }
  .st-prog td { height: auto; margin-bottom: 8px; }
  .st-prog td[data-track]::before { content: attr(data-track); display: block; padding: 10px 16px 0; font-size: 13px; font-weight: 700; color: var(--st-track, var(--st-green)); text-align: center; }
  .st-slot { padding: 12px 16px 16px; }
  .st-slot-ttl { font-size: 17px; }
}

/* ---------- the popup: the browser's dialog. The order: the title, its labels (the session, the time, the person), the running text, a card for the person ---------- */
/* --st-pop-gap: the popup's distance from the screen's edges, on all four sides; dvh = the height actually visible (on a phone, with the address bar) */
.st-pop { --st-pop-gap: 16px; width: min(820px, calc(100% - 2 * var(--st-pop-gap))); max-width: none; max-height: min(88vh, 900px); max-height: min(88dvh, 900px); padding: 0; border: 0; border-radius: var(--st-radius-lg); background: #fff; color: var(--st-text); box-shadow: 0 24px 80px rgb(0 0 0 / .35); overflow: hidden; }
/* the popup's colours: it copies the track it was opened from into --st-track* (st-site.js sets data-track: 1, 2, or 3 for the tutorials day),
   and its buttons (סגירה, back, X) into --st-pop-strong: the brand green, track 2's blue */
.st-pop { --st-track: var(--st-t1); --st-track-deep: var(--st-t1-deep); --st-track-bg: var(--st-t1-bg); --st-pop-strong: var(--st-green); --st-pop-strong-hover: var(--st-teal); }
.st-pop[data-track="2"] { --st-track: var(--st-t2); --st-track-deep: var(--st-t2-deep); --st-track-bg: var(--st-t2-bg); --st-pop-strong: var(--st-t2); --st-pop-strong-hover: var(--st-t2-deep); }
.st-pop[data-track="3"] { --st-track: var(--st-t3); --st-track-deep: var(--st-t3-deep); --st-track-bg: var(--st-t3-bg); }
.st-pop { --st-accent: var(--st-track); --st-accent-ink: var(--st-track); --st-pop-tint: var(--st-track-bg); --st-pop-ink: var(--st-track); --st-pop-title: var(--st-track-deep); --st-pop-badge: var(--st-track); }
.st-pop::backdrop { background: color-mix(in srgb, var(--st-deep) 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.st-pop[open] { animation: st-pop-in .22s ease-out; }
@keyframes st-pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .st-pop[open] { animation: none; } }
html:has(.st-pop[open]) { overflow: hidden; }
.st-pop-in { display: flex; flex-direction: column; max-height: inherit; }
/* the head: the title is the biggest thing; the labels under it are quiet */
.st-pop-head { position: relative; flex: none; padding: 28px 32px 22px; padding-inline-end: 76px; border-bottom: 1px solid var(--st-line); background: var(--st-pop-tint); }
.st-pop-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.3; color: var(--st-pop-title); }
.st-pop-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.st-pop-meta li { padding: 3px 12px; border: 1px solid var(--st-line-strong); border-radius: var(--st-pill); background: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--st-pop-ink); }
.st-pop-x { position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 2px solid var(--st-pop-strong); border-radius: 50%; background: #fff; color: var(--st-pop-strong); cursor: pointer; }
.st-pop-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (hover: hover) { .st-pop-x:hover { background: var(--st-pop-strong); color: #fff; } }
/* the body: the running text at reading size, then the person's card */
.st-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 32px 32px; font-size: 17px; line-height: 1.75; }
.st-pop-body > p { margin: 0 0 24px; }
.st-person-card { padding: 20px 24px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-pop-tint); }
.st-person-role { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--st-pop-ink); }
.st-person { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.st-person img { flex: none; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .1); }
.st-person p { margin: 0; display: grid; line-height: 1.35; }
.st-person b { font-size: 18px; color: var(--st-ink); }
.st-person span { font-size: 15px; color: var(--st-muted); }
.st-bio { font-size: 15px; line-height: 1.7; }
.st-bio p { margin: 0 0 10px; }
.st-bio p:last-child { margin-bottom: 0; }
.st-bio h3 { margin: 16px 0 6px; font-size: 15px; font-weight: 700; color: var(--st-ink); }
.st-bio h3:first-child { margin-top: 0; }
.st-bio ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.st-pop-foot { flex: none; padding: 12px; border-top: 1px solid var(--st-line); text-align: center; }
.st-pop-close { padding: 8px 28px; border: 0; border-radius: var(--st-pill); background: var(--st-pop-strong); color: #fff; font: 600 16px var(--st-font); cursor: pointer; }
@media (hover: hover) { .st-pop-close:hover { background: var(--st-pop-strong-hover); } }
@media (max-width: 767px) {
  .st-pop { --st-pop-gap: 12px; max-height: calc(100vh - 2 * var(--st-pop-gap)); max-height: calc(100dvh - 2 * var(--st-pop-gap)); }
  .st-pop-head { padding: 22px 20px 18px; padding-inline-end: 64px; }
  .st-pop-x { top: 14px; inset-inline-end: 14px; }
  .st-pop-body { padding: 22px 20px 24px; font-size: 16px; }
  .st-person-card { padding: 16px; }
  .st-person img { width: 64px; height: 64px; }
}
/* a term that must not break at its hyphen (ה-AI) */
.st-nw { white-space: nowrap; }
.st-prog .st-prog-corner { border: 0; background: none; }
/* a link that opens a new window: a small arrow-out-of-a-box after its words */
.st-nav .st-nav-ext { display: inline-flex; align-items: center; gap: 6px; }
.st-nav-ext svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }

/* ---------- pieces of the inner pages ---------- */
/* a section on the same background as the one above it: no second top space (two whites in a row would double it) */
.st-section.st-joined { padding-top: 0; }
/* a reading column inside the container (the tutorials day's text) */
.st-narrow { max-width: 760px; margin-inline: auto; }
/* the tutorials day: the same program table with one column of cubes; the time column keeps its width without a head row */
.st-prog .st-col-time { width: 140px; }
/* people: a grid of tiles (round photo, name, role, organisation); a tile with a bio is a cube that opens it (data-pop, as in the program) */
.st-people { margin-bottom: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.st-people li { flex: 0 0 180px; margin: 0; padding: 0; }
/* the next group on the same page (the speakers, the committees): a section's space above its title */
.st-people + .st-title { margin-top: var(--st-section); }
.st-tile { gap: 4px; padding: 24px 16px 20px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: #fff; }
.st-tile img { width: 112px; height: 112px; margin-bottom: 10px; border-radius: 50%; object-fit: cover; border: 3px solid var(--st-line-strong); }
.st-tile-name { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--st-ink); }
.st-tile-role { font-size: 15px; font-weight: 600; color: var(--st-teal); }
.st-tile-org { font-size: 15px; color: var(--st-muted); }
@media (max-width: 767px) {
  .st-people { gap: 12px; }
  .st-people li { flex-basis: calc(50% - 6px); }
  .st-tile { padding: 18px 10px 16px; }
  .st-tile img { width: 84px; height: 84px; }
  .st-tile-name { font-size: 16px; }
  .st-tile-role, .st-tile-org { font-size: 14px; }
}
/* a popup about a person alone: the photo beside the bio */
.st-person-solo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-person-solo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--st-line-strong); }
.st-person-solo .st-bio { font-size: 16px; }
@media (max-width: 767px) { .st-person-solo { grid-template-columns: 1fr; gap: 16px; } .st-person-solo img { width: 80px; height: 80px; } }
/* the table after a page's title: the title's gap, less the 8px the table's own spacing adds */
.st-title + .st-prog, .st-sub + .st-prog { margin-top: calc(var(--st-head-gap) - 8px); }

/* ---------- the inner pages' banner: the header's green, a plain flexbox (logo | title box | the line and the dates | shape) ---------- */
.st-banner { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(ellipse 50% 90% at 30% 50%, color-mix(in srgb, var(--st-mint) 22%, transparent), transparent 70%), var(--st-dark-bg); color: #fff; }
.st-banner-in { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); padding-block: clamp(20px, 2.4vw, 36px); }
.st-banner-logo { flex: none; width: clamp(120px, 9vw, 140px); height: auto; padding-inline-end: clamp(20px, 2.2vw, 32px); border-inline-end: 1px solid rgb(255 255 255 / .2); box-sizing: content-box; }
.st-banner-title { flex: none; width: clamp(240px, 24vw, 340px); height: auto; }
.st-banner-text { flex: 1; min-width: 0; }
.st-banner-line { margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--st-mint); font-size: 16px; line-height: 1.45; color: var(--st-on-dark); }
.st-banner-line strong { display: block; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; color: #fff; }
.st-banner-when { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; }
.st-banner-when time { color: var(--st-yellow); }
.st-banner-when span { color: var(--st-mint); }
.st-banner-shape { flex: none; width: clamp(90px, 8vw, 120px); height: auto; mix-blend-mode: screen; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--st-mint-light) 40%, transparent)); }
@media (max-width: 1099px) { .st-banner-logo, .st-banner-shape { display: none; } }
@media (max-width: 767px) {
  .st-banner-in { flex-direction: column; gap: 16px; padding-block: 28px; text-align: center; }
  .st-banner-title { width: min(320px, 100%); }
  .st-banner-line { padding-bottom: 0; border-bottom: 0; }
  .st-banner-when { justify-content: center; }
}

/* ---------- the registration: their module's markup as it is, our look on it (only inside .st-register, by their ids and classes) ---------- */
.st-register .container { max-width: none; padding: 0; }
.st-register #sec2, .st-register #sec3 { background: none; }
.st-register #comming-acts { width: auto; max-width: 860px; margin-inline: auto; }
.st-register .act-item-reg h1 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.25; color: var(--st-ink); text-align: center; }
.st-register .act-item-reg h1::after { content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 2px; background: var(--st-mint); }
.st-register .more { margin-top: 16px; font-size: 17px; color: var(--st-muted); text-align: center; }
.st-register h2 { margin: 36px 0 14px; font-size: 20px; font-weight: 700; color: var(--st-ink); }
/* the prices (their script writes the table): rows on a light line, the main prices bold */
/* the price table: their script writes its rows (/js/script_act2027.js); the table is Bootstrap's own (.table .table-striped), in the site's colours:
   lines on every cell (.table-bordered), the head in the brand green, every other row mint. Their script marks the chosen date's column (.gray, scaled and grey) and squeezes the cells: undone here, the table stays even (a coloured column read as random: the choice is far below it) */
.st-register #reg1-price .table { --bs-table-striped-bg: color-mix(in srgb, var(--st-mint) 10%, #fff); --bs-table-border-color: var(--st-line); margin: 0; font-size: 16px; }
.st-register #reg1-price .table th, .st-register #reg1-price .table td { padding: 12px 16px; text-align: center; transform: none; background-color: var(--bs-table-bg); color: var(--st-text); }
.st-register #reg1-price .table thead th { --bs-table-bg: var(--st-green); vertical-align: top; border-bottom: 0; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.5; }
.st-register #reg1-price .table tbody td:first-child { text-align: start; font-weight: 600; color: var(--st-ink); }
/* its head: a title, and a line of running text under it (register.js writes them) */
.st-price-ttl { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; }
.st-price-sub { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; line-height: 1.5; color: color-mix(in srgb, #fff 78%, transparent); }
@media (max-width: 767px) { .st-price-ttl { font-size: 14px; } .st-price-sub { font-size: 12px; } }
.st-register #reg1-price .table tfoot { display: none; }   /* their script's row: it holds only the script (and held the table wide on a phone) */
.st-register #reg1-price .table tbody tr:last-child td { --bs-table-bg-type: transparent; padding-top: 12px; border-bottom: 0; text-align: start; font-size: 14px; font-weight: 400; color: var(--st-muted); }
@media (max-width: 767px) {
  .st-register #reg1-price .table th, .st-register #reg1-price .table td { padding: 10px 6px; font-size: 14px; }
  .st-register #reg1-price .table thead th { font-size: 13px; }
}
/* the fields: a label over each, a calm frame, mint when in use */
.st-register .det-type1, .st-register .det-type2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
/* a row's fields share one line at their bottom (a field without a label, like the title "מר", does not ride higher) */
.st-register .det-type1, .st-register .det-type2:not(.date-sel) { align-items: end; }
.st-register label { font-size: 15px; font-weight: 600; color: var(--st-text); }
.st-register input[type="text"], .st-register input[type="email"], .st-register select { display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--st-muted) 45%, #fff);   /* a field's frame, a little stronger than the hairlines */ border-radius: var(--st-radius-sm); background: #fff; font: inherit; font-size: 16px; color: var(--st-ink); }
.st-register input[type="text"]:focus, .st-register input[type="email"]:focus, .st-register select:focus { outline: none; border-color: var(--st-mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-mint) 25%, transparent); }
.st-register input[type="radio"], .st-register input[type="checkbox"] { accent-color: var(--st-teal); width: 18px; height: 18px; vertical-align: middle; cursor: pointer; }
.st-register input[type="radio"] + label, .st-register input[type="checkbox"] + label { cursor: pointer; }   /* a choice's name picks it too */
/* the date choice (their script writes it, with inline floats and a negative margin): each option one row, its circle on the text's line; the whole row picks it (register.js) */
.st-register .date-sel { display: block; }   /* a plain list, one option a line (not the row grid of the fields: three side by side read as picking a column) */
.st-register .date-sel h3 { margin: 0 0 8px; padding: 0; font-size: 18px; font-weight: 700; color: var(--st-ink); }
.st-register .date-sel > div { display: flex; align-items: center; gap: 10px; width: auto !important; margin-block: 6px; cursor: pointer; }
.st-register .date-sel input[type="radio"] { flex: none; float: none !important; width: 20px; height: 20px; margin: 0 !important; transform: none; }
.st-register .date-sel label { margin: 0; padding: 0 !important; cursor: pointer; }
/* an option on one line: its name bold, its date lighter (register.js writes them) */
.st-date-ttl { font-weight: 700; color: var(--st-ink); }
.st-date-sub { font-weight: 400; color: var(--st-muted); }
.st-register .reqstar { margin-inline-start: 2px; color: var(--st-red); }
.st-register .add_reg-p a { color: var(--st-teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the payment: each way a framed row, its line under it */
.st-register #regp { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
/* a payment card: the circle beside the title; the whole card picks it (its label stretches over it); the chosen card in mint */
.st-register #regp li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: #fff; transition: border-color .2s, background-color .2s; }
.st-register #regp li:has(input:checked) { border-color: var(--st-mint); background: color-mix(in srgb, var(--st-mint) 7%, #fff); }
.st-register #regp input { flex: none; margin: 3px 0 0; }
.st-register #regp label { flex: 1; margin: 0; font-weight: 700; color: var(--st-ink); cursor: pointer; }
.st-register #regp label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.st-register #regp input, .st-register #regp a { position: relative; z-index: 1; }
.st-register #regp em { display: block; margin-top: 4px; font-size: 14px; font-style: normal; font-weight: 400; color: var(--st-muted); }
.st-register #regp a { color: var(--st-teal); }
.st-register .f2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: var(--st-radius); background: var(--st-tint); font-weight: 600; color: var(--st-ink); }
.st-register .f2 > div:first-child span { display: block; font-size: 14px; font-weight: 400; color: var(--st-muted); }   /* "(מע"מ 18% כלול)" on its own line */
.st-register #total-price { font-size: 28px; font-weight: 700; color: var(--st-ink); white-space: nowrap; }   /* the amount and its ₪ on one line */
.st-register #reg3 > div { margin-bottom: 8px; }
.st-register #reg3 hr { margin: 16px 0; border: 0; border-top: 1px solid var(--st-line); opacity: 1; }
.st-register #reg-done { margin-top: 32px; text-align: center; }
/* their button: the site's call to action (mint, round) */
/* the pay button: the green people know from checkouts, white, an arrow forward (left, in Hebrew) */
.st-register .btn-green { display: inline-flex; align-items: center; gap: 14px; padding: 14px 36px; border: 0; border-radius: var(--st-pill); background: var(--st-pay); color: #fff; font: 700 18px var(--st-font); cursor: pointer; transition: background-color .2s; }
.st-register .btn-green::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
@media (hover: hover) { .st-register .btn-green:hover { background: var(--st-pay-hover); } }
.st-register .btn-green:active { background: var(--st-pay-hover); }
.st-register #sec3 { margin-top: 48px; text-align: center; color: var(--st-muted); }
.st-register #sec3 strong { display: block; margin-bottom: 4px; font-size: 18px; color: var(--st-ink); }
.st-register #sec3 a { color: var(--st-teal); }
/* the group (their script writes these buttons, .active on the chosen one): pills, the chosen one dark green */
/* the audience buttons: three in a row (two on a phone); their own width and margins are undone */
.st-register #groupr-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding: 12px; border-radius: var(--st-radius); }
@media (max-width: 767px) { .st-register #groupr-b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-register #groupr-b button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; margin: 0; padding: 10px 18px; border: 1px solid var(--st-line-strong); border-radius: var(--st-pill); background: #fff; color: var(--st-ink); font: 600 15px var(--st-font); cursor: pointer; }
@media (hover: hover) { .st-register #groupr-b button:hover { border-color: var(--st-mint); } }
.st-register #groupr-b button.active { border-color: var(--st-green); background: var(--st-green); color: #fff; }
/* the shekel sign after a price (<span class=sign>, their markup): on its own, so it sits on the price's left as in Hebrew (₪ 354), not glued to the number */
.st-register .sign { display: inline-block; margin-inline-start: 4px; }
/* a choice of one: each button has a radio's circle before its name, filled on the chosen one */
.st-register #groupr-b button::before { content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; }
.st-register #groupr-b button.active::before { background: radial-gradient(circle, currentColor 0 4px, transparent 4.5px); }
/* a phone: a long name takes two lines, so the buttons are cards (a pill that tall looks odd), their text from the start */
@media (max-width: 767px) { .st-register #groupr-b button { justify-content: flex-start; padding-inline: 12px; border-radius: var(--st-radius); font-size: 14px; line-height: 1.35; text-align: start; } }
/* the footer's button to the association's site: a mint outline that fills on hover */
.st-foot-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 1px solid var(--st-mint); border-radius: var(--st-pill); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
@media (hover: hover) { .st-foot .st-foot-btn:hover { background: var(--st-mint); color: var(--st-deep); text-decoration: none; } }
/* the registration appears once their scripts have written it (st-site.js adds .is-ready on load), so it does not jump into place */
.st-register:not(.is-ready) { visibility: hidden; }
/* a session's lectures in its cube (program.json "lectures"): a list under the chair; each lecture (its title and speaker) is one button */
.st-lectures { width: 100%; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--st-track-line, var(--st-t1-line)); list-style: none; display: grid; gap: 8px; text-align: start; }
.st-lectures > li { margin: 0; }
/* a child (a lecture): a card on a very light ground. In a cube the whole card is its button (button.st-lecture): its title always
   underlined, an arrow at its far end, a frame in its track's colour on hover; the same cards in a session's popup switch the popup to the lecture */
.st-lecture { position: relative; display: grid; justify-items: start; gap: 4px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--st-radius-sm); background: color-mix(in srgb, #fff 65%, transparent); color: inherit; font: inherit; text-align: start; }
button.st-lecture { padding-inline-end: 44px; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
button.st-lecture:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--st-accent); }
.st-lecture-ttl { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--st-ink); }
button.st-lecture .st-lecture-ttl { text-decoration: underline 2px color-mix(in srgb, var(--st-accent) 55%, transparent); text-underline-offset: 4px; transition: text-decoration-color .2s; }
button.st-lecture:hover .st-lecture-ttl, button.st-lecture:focus-visible .st-lecture-ttl { text-decoration-color: var(--st-accent); }
.st-lecture-arrow { position: absolute; inset-inline-end: 14px; top: 50%; display: grid; transform: translate(0, -50%); color: var(--st-accent-ink); }   /* still: it does not move on hover */
.st-lecture-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="ltr"] .st-lecture-arrow svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .st-lecture { transition: none; } }
.st-lecture-num { font-size: 13px; font-weight: 600; color: var(--st-accent-ink); }
.st-lecture-who { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--st-muted); }
.st-lecture-who img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
/* the parent: a program cube's head (number, title, person's line) is one button to its popup (one model for every cube, with or without lectures);
   only the title is underlined, fully on hover */
.st-slot-head { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.st-slot-head .st-slot-ttl { text-decoration: underline 2px color-mix(in srgb, var(--st-accent) 55%, transparent); text-underline-offset: 5px; transition: text-decoration-color .2s; }
.st-slot-head:hover .st-slot-ttl, .st-slot-head:focus-visible .st-slot-ttl { text-decoration-color: var(--st-accent); }
/* a session's lectures inside its popup: a heading, then the same lecture buttons on the light surface */
.st-pop-h { margin: 28px 0 10px; font-size: 17px; font-weight: 700; color: var(--st-ink); }
.st-pop-body > .st-pop-h:first-child { margin-top: 0; }
.st-pop-body .st-lectures { margin: 0; padding: 0; border: 0; }
.st-pop-body .st-lecture { background: var(--st-pop-tint); }
.st-pop-body .st-lectures + .st-person-card { margin-top: 28px; }
/* the way back (a lecture opened from its session's popup): a real button, like the popup's "סגירה" (dark green, white), smaller */
.st-pop-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 16px; padding-inline-start: 12px; border: 0; border-radius: var(--st-pill); background: var(--st-pop-strong); color: #fff; font: 600 14px var(--st-font); cursor: pointer; transition: background-color .2s; }
@media (hover: hover) { .st-pop-back:hover { background: var(--st-pop-strong-hover); } }
.st-pop-back[hidden] { display: none; }
.st-pop-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="ltr"] .st-pop-back svg { transform: scaleX(-1); }
/* breadcrumbs under an inner page's banner: home › the page; small and quiet (the › turns to point left in Hebrew by itself) */
.st-crumbs { border-bottom: 1px solid var(--st-line); font-size: 14px; }
.st-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-block: 0; padding-block: 12px; list-style: none; }
.st-crumbs li { display: flex; align-items: center; gap: 8px; color: var(--st-muted); }
.st-crumbs li + li::before { content: "›"; color: var(--st-faint); font-size: 16px; }
.st-crumbs a { color: var(--st-teal); text-decoration: underline; text-underline-offset: 3px; }
.st-crumbs [aria-current="page"] { font-weight: 600; color: var(--st-ink); }
/* the expert panel: its panelists are the same cards as the lectures, three in a row (one under another on a phone); on the white plenary they sit on the light grey */
.st-panelists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-pop-body .st-panelists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .st-panelists, .st-pop-body .st-panelists { grid-template-columns: 1fr; } }
.st-plenary .st-lecture { background: var(--st-tint); }
/* the panel's questions in its popup */
.st-pop-body .st-pop-q { margin-bottom: 8px; font-weight: 600; color: var(--st-ink); }
.st-pop-ol { margin: 0 0 24px; padding-inline-start: 22px; display: grid; gap: 6px; }
/* the home's two cards: on hover (or keyboard focus) the program's arrow appears at the far end, in the middle */
.st-card-arrow { position: absolute; inset-inline-end: 22px; top: 50%; display: grid; color: var(--st-teal); opacity: 0; transform: translateY(-50%); transition: opacity .2s; pointer-events: none; }
.st-card-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-card:hover .st-card-arrow, .st-card:has(.st-link:focus-visible) .st-card-arrow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .st-card-arrow { transition: none; } }
/* the popup on a phone: its head stays at the top, so everything is a size smaller and tighter (more room to read, less scrolling) */
@media (max-width: 767px) {
  .st-pop-head { padding: 14px 16px 12px; padding-inline-end: 56px; }
  .st-pop-head h2 { font-size: 18px; line-height: 1.3; }
  .st-pop-meta { gap: 6px; margin-top: 8px; }
  .st-pop-meta li { padding: 2px 10px; font-size: 12px; }
  .st-pop-back { margin-bottom: 8px; padding: 4px 12px; padding-inline-start: 9px; font-size: 13px; }
  .st-pop-x { top: 12px; inset-inline-end: 12px; width: 34px; height: 34px; }
  .st-pop-x svg { width: 17px; height: 17px; }
  .st-pop-body { padding: 16px; font-size: 15px; line-height: 1.65; }
  .st-pop-body > p { margin-bottom: 14px; }
  .st-pop-h { margin: 18px 0 8px; font-size: 15px; }
  .st-pop-ol { margin-bottom: 16px; gap: 4px; }
  .st-pop-body .st-lecture { padding: 8px 10px; padding-inline-end: 38px; }
  .st-pop-body .st-lecture-ttl { font-size: 15px; }
  .st-pop-body .st-lecture-who { font-size: 13px; }
  .st-person-card { padding: 14px; }
  .st-person { gap: 12px; margin-bottom: 10px; }
  .st-person img, .st-person-solo img { width: 56px; height: 56px; }
  .st-person b { font-size: 16px; }
  .st-person span { font-size: 13px; }
  .st-bio, .st-person-solo .st-bio { font-size: 14px; line-height: 1.6; }
  .st-pop-foot { padding: 8px; }
  .st-pop-close { padding: 6px 22px; font-size: 15px; }
}
/* a <picture> (AVIF first, WebP for an old browser) lays out as just its image */
.st-pic { display: contents; }
/* a card list inside the container: no list indent from the browser (Bootstrap gives a ul 2rem), so the cards reach the container's edges */
.st-wrap .st-cards { padding-inline: 0; }
/* the footer on a phone: the logo and the association's button in one row (each at its end), the contacts under them */
@media (max-width: 767px) {
  .st-foot-in { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 18px 16px; }
  .st-foot-in ul { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 8px 22px; }   /* the contacts centred under them */
  .st-foot-in > img { justify-self: start; }
  .st-foot-btn { justify-self: end; }   /* its own width, at the row's end (not stretched to the column) */
}
/* the footer's contacts: a mail and a phone icon before them (st-images/footer_icons), drawn in mint through a mask */
.st-foot a[href^="mailto:"], .st-foot a[href^="tel:"] { display: inline-flex; align-items: center; gap: 5px; }
.st-foot a[href^="mailto:"]::before, .st-foot a[href^="tel:"]::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--st-mint-light); -webkit-mask: var(--st-icon) center / contain no-repeat; mask: var(--st-icon) center / contain no-repeat; }
.st-foot a[href^="mailto:"] { --st-icon: url(../st-images/footer_icons/mail.svg); }
.st-foot a[href^="tel:"] { --st-icon: url(../st-images/footer_icons/phone.svg); }
/* the home's two day cards on a phone: compact. The badge and the date in one row, the place and the link small under them */
@media (max-width: 767px) {
  .st-cards-over .st-card { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 10px; row-gap: 2px; padding: 12px 16px; }
  .st-cards-over .st-place, .st-cards-over .st-link { grid-column: 1 / -1; }
  .st-cards-over .st-badge { padding: 2px 10px; font-size: 14px; }
  .st-cards-over .st-date { font-size: 20px; }
  .st-cards-over .st-place { margin-top: 4px; font-size: 13px; }
  .st-cards-over .st-link { font-size: 14px; }
}
/* a line break for phones only (<br class="st-br-m">): it places a heading's break where it reads well */
.st-br-m { display: none; }
@media (max-width: 767px) { .st-br-m { display: inline; } }
/* the press state (a phone has no hover; the buttons' hover is for a mouse only, @media (hover: hover)): while a finger is on it, what opens shows its colour, nothing moves; the browser's own grey flash is off (this replaces it) */
a, button, .st-card { -webkit-tap-highlight-color: transparent; }
.st-card:active { border-color: var(--st-mint); }
button.st-lecture:active, .st-slot.is-pop:active { background: #fff; box-shadow: inset 0 0 0 2px var(--st-accent); }
button.st-lecture:active .st-lecture-ttl, .st-slot-head:active .st-slot-ttl { text-decoration-color: var(--st-accent); }
.st-pop-close:active, .st-pop-back:active { background: var(--st-pop-strong-hover); }
.st-foot-btn:active { background: var(--st-mint); color: var(--st-deep); }
/* a touch screen has no hover: a tap must not flash a hover state (the menu's line rose and vanished), and a hover state must not stick after a tap.
   The menu keeps only the current page's line; the cards keep only their press (:active) */
@media (hover: none) {
  .st-nav .nav-link::after { transition: none; }
  .st-nav .nav-link:not([aria-current="page"]):hover::after { transform: scale(0); }
  .st-card:hover { border-color: var(--st-line-strong); }
  button.st-lecture:hover:not(:active), .st-slot.is-pop:hover:not(:active) { background: color-mix(in srgb, #fff 65%, transparent); box-shadow: none; }
  .st-pop-body button.st-lecture:hover:not(:active) { background: var(--st-pop-tint); }
  button.st-lecture:hover:not(:active) .st-lecture-ttl, .st-slot-head:hover:not(:active) .st-slot-ttl { text-decoration-color: color-mix(in srgb, var(--st-accent) 55%, transparent); }
  .st-card:hover .st-card-arrow { opacity: 0; }
}
/* the open phone menu: the page under it dims (the layer catches a tap outside, which closes the menu: st-site.js) */
body.st-menu-open::before { content: ""; position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--st-deep) 55%, transparent); }
/* the registration's rhythm: one gap between its groups (the table, the dates, the audience, the fields, the total, the payment, the invoice, the end),
   always the upper group's bottom margin; inside a group the small gaps stay (a label to its field 6px, field rows 16px) */
.st-register { --st-form-gap: 32px; }
@media (max-width: 767px) { .st-register { --st-form-gap: 24px; } }
.st-register .act-item.act-item-reg h1 { margin: 0 0 var(--st-head-gap); }   /* theirs pulls it up 60px, under the breadcrumbs */
.st-register #reg1-price > br { display: none; }
.st-register #reg1-price, .st-register .date-sel, .st-register #groupr-b, .st-register .add_reg-p, .st-register .f2, .st-register .f3, .st-register #reg3 { margin-top: 0; margin-bottom: var(--st-form-gap); }
.st-register #reg-done { margin-top: 0; }
.st-register #sec2 { cursor: auto !important; }   /* their script sets a pointer on the whole section (inline, a leftover link); the hand is only on what picks */
.st-register .act-item.act-item-reg > br { display: none; }   /* their line break under the title, on top of its gap */
/* a popup's day badge ("יום הסדנאות"): a bold pill above its title, in the popup's strong colour */
.st-pop-badge { display: inline-block; margin: 0 0 10px; padding: 4px 14px; border-radius: var(--st-pill); background: var(--st-pop-badge, var(--st-pop-strong)); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; }
.st-pop-badge[hidden] { display: none; }
/* ---------- a try (10.11): the session cubes in negative, the track's strong colour and white text; their lectures stay white cards on it.
   To drop it, delete this block (git tag before-negative-cubes is the state before it) ---------- */
.st-prog td:is(.st-t1, .st-t2, .st-t3) { --st-accent: #fff; --st-accent-ink: #fff; background: var(--st-track); border-color: var(--st-track); color: #fff; }
.st-prog td:is(.st-t1, .st-t2, .st-t3) :is(.st-slot-ttl, .st-slot-chair, .st-slot-text) { color: #fff; }
.st-prog td:is(.st-t1, .st-t2, .st-t3)[data-track]::before { color: #fff; }
.st-prog td:is(.st-t1, .st-t2, .st-t3) .st-lectures { border-top-color: rgb(255 255 255 / .3); }
.st-prog td:is(.st-t1, .st-t2, .st-t3) .st-lecture { --st-accent: var(--st-track); --st-accent-ink: var(--st-track); background: #fff; color: var(--st-text); }
.st-prog td:is(.st-t1, .st-t2, .st-t3) .st-slot.is-pop:is(:hover, :active) { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 2px #fff; }
@media (hover: none) { .st-prog td:is(.st-t1, .st-t2, .st-t3) .st-slot.is-pop:hover:not(:active) { background: none; box-shadow: none; } }