/* ---------- Themed banners (js/banners/) ----------
   Each track's and course's banner with a look of its own: its colour, a
   picture drawn in SVG behind the text, its display face, and a side panel
   in its own idiom. The banner keeps its look in every app theme; only its
   outer edge follows the page (Daylight, Lamplight, Quill & Ink). */

.track-banner.tb-themed {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 28px;
  min-height: 380px; padding: 52px 40px 44px 48px; box-sizing: border-box;
  background: var(--bt-c); color: var(--bt-t);
  border-radius: 14px; box-shadow: 0 0 0 1px var(--border-strong, #B8C4D6), 0 6px 20px rgba(20, 33, 61, 0.12);
  font-family: 'Newsreader', Georgia, serif;
}
/* A fine inner rule in the metal, on every banner. */
.track-banner.tb-themed::after {
  content: ''; position: absolute; inset: 10px; border: 1.5px solid var(--bt-m); border-radius: 8px;
  opacity: 0.75; pointer-events: none; z-index: 2;
}
.track-banner.tb-themed .tb-art { position: absolute; inset: 0; z-index: -1; }
.track-banner.tb-themed .tb-svg { display: block; width: 100%; height: 100%; }
/* A soft veil of the banner's own colour behind the words, so the picture
   never comes between him and the text. */
.track-banner.tb-themed .tb-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bt-c) 72%, transparent) 0, color-mix(in srgb, var(--bt-c) 62%, transparent) 40%, color-mix(in srgb, var(--bt-c) 15%, transparent) 54%, transparent 62%);
}

.track-banner.tb-themed .tb-main { position: relative; flex: 0 1 580px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.track-banner.tb-themed .tb-small { font-family: var(--bt-eyefont, 'Newsreader'), Georgia, serif; font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bt-m); }
.track-banner.tb-themed .tb-title {
  margin: 0; font-family: var(--bt-font), Georgia, serif; font-weight: var(--bt-fw, 400);
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; color: var(--bt-t); letter-spacing: 0.005em; text-wrap: balance;
}
.track-banner.tb-themed .tb-hook { margin: 0; font-family: var(--bt-hookfont, 'Newsreader'), Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.38; color: var(--bt-th); }
.track-banner.tb-themed .tb-blurb { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--bt-tb); }
.track-banner.tb-themed .tb-blurb em { color: var(--bt-t); }
.track-banner.tb-themed .tb-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.track-banner.tb-themed .tb-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; box-sizing: border-box;
  border: 1.5px solid var(--bt-m); border-radius: 4px; background: transparent; color: var(--bt-t);
  font-family: 'Newsreader', Georgia, serif; font-size: 16px; font-weight: 600; text-decoration: none; letter-spacing: 0;
  box-shadow: none; text-shadow: none;
}
.track-banner.tb-themed .tb-btn:hover { background: color-mix(in srgb, var(--bt-m) 18%, transparent); color: var(--bt-t); }
.track-banner.tb-themed .tb-btn-primary, .track-banner.tb-themed .tb-btn-primary:hover { background: var(--bt-m); color: var(--bt-c); }
.track-banner.tb-themed .tb-btn-wander { border-style: dashed; }
.track-banner.tb-themed .tb-btn-primary:hover { filter: brightness(1.06); }
.track-banner.tb-themed a:focus-visible { outline: 3px solid var(--bt-t); outline-offset: 3px; }

/* The side panel: a card in the track's own idiom. */
.track-banner.tb-themed .tb-panel {
  position: relative; flex: 0 0 290px; box-sizing: border-box; padding: 18px 22px 18px;
  background: var(--bt-pbg, #F3EAD7); color: var(--bt-pink, #2A2016); border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--bt-pacc, #6A3B1A) 40%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 8px;
}
.track-banner.tb-themed .tb-kicker { text-align: center; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bt-pacc); }
.track-banner.tb-themed .tb-panel-title {
  margin: 0 0 4px; text-align: center; font-family: var(--bt-font), Georgia, serif; font-weight: var(--bt-fw, 400);
  font-size: 27px; line-height: 1.1; color: var(--bt-pink); text-shadow: none;
  padding-bottom: 8px; border-bottom: 1px solid var(--bt-pacc);
}
.track-banner.tb-themed .tb-items { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.track-banner.tb-themed .tb-items li { display: flex; flex-direction: column; gap: 2px; }
.track-banner.tb-themed .tb-item-title { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--bt-pacc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.track-banner.tb-themed span.tb-item-title { text-decoration: none; color: var(--bt-pink); }
.track-banner.tb-themed .tb-item-note, .track-banner.tb-themed .tb-item-line { display: block; font-size: 14px; line-height: 1.4; color: var(--bt-pink); }
.track-banner.tb-themed .tb-item-line { font-style: italic; }
.track-banner.tb-themed .tb-foot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--bt-pacc); font-size: 13px; text-align: center; color: var(--bt-pink); }

/* The valance needs room above the words. */
.track-banner.tb-themed.tb-motif-curtains { padding-top: 84px; }

/* Panels with no card of paper: chalk on the slate, a chart's glass, a night sky. */
.track-banner.tb-themed.tb-panel-chalk .tb-panel,
.track-banner.tb-themed.tb-panel-glass .tb-panel,
.track-banner.tb-themed.tb-panel-chart .tb-panel {
  --bt-pink: var(--bt-t); --bt-pacc: var(--bt-m);
  background: color-mix(in srgb, var(--bt-c) 82%, #000); border-color: color-mix(in srgb, var(--bt-m) 55%, transparent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.track-banner.tb-themed.tb-panel-chalk .tb-panel { background: transparent; border: 0; box-shadow: none; padding-top: 6px; }
.track-banner.tb-themed.tb-panel-chalk .tb-panel-title { text-align: left; border: 0; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.track-banner.tb-themed.tb-panel-chalk .tb-items { list-style: decimal; padding-left: 24px; }
.track-banner.tb-themed.tb-panel-chalk .tb-items li { display: list-item; font-family: var(--bt-font), cursive; }
.track-banner.tb-themed.tb-panel-chalk .tb-item-title { color: var(--bt-t); font-size: 19px; font-weight: 400; }
.track-banner.tb-themed.tb-panel-chalk .tb-foot { text-align: left; border-color: transparent; color: var(--bt-m); font-family: var(--bt-font), cursive; font-size: 15px; }
.track-banner.tb-themed.tb-panel-chart .tb-panel-title, .track-banner.tb-themed.tb-panel-chart .tb-kicker { text-align: left; }
.track-banner.tb-themed.tb-panel-chart .tb-item-title, .track-banner.tb-themed.tb-panel-glass .tb-item-title { color: var(--bt-t); }
.track-banner.tb-themed.tb-panel-chart .tb-items li { border: 1px solid color-mix(in srgb, var(--bt-m) 40%, transparent); padding: 8px 10px; }
/* The playbill: a cream card, set a little askew. */
.track-banner.tb-themed.tb-panel-playbill .tb-panel { transform: rotate(1.2deg); }
.track-banner.tb-themed.tb-panel-playbill .tb-panel-title { font-variant: small-caps; letter-spacing: .04em; }
.track-banner.tb-themed.tb-motif-slate .tb-small { font-weight: 400; letter-spacing: .14em; text-transform: none; font-size: 15px; }
.track-banner.tb-themed.tb-motif-slate .tb-hook { font-style: normal; font-size: 23px; }
.track-banner.tb-themed.tb-motif-gaslight .tb-small { font-weight: 400; letter-spacing: .08em; }

/* The case file: manila, typewritten, set down at a slant. */
.track-banner.tb-themed.tb-panel-casefile .tb-panel, .track-banner.tb-themed.tb-panel-dispatch .tb-panel { transform: rotate(-1.4deg); font-family: 'Special Elite', 'Courier New', monospace; }
.track-banner.tb-themed.tb-panel-casefile .tb-panel-title, .track-banner.tb-themed.tb-panel-dispatch .tb-panel-title { font-family: 'Special Elite', 'Courier New', monospace; text-align: left; font-size: 24px; }
.track-banner.tb-themed.tb-panel-casefile .tb-kicker, .track-banner.tb-themed.tb-panel-dispatch .tb-kicker { text-align: left; }
.track-banner.tb-themed.tb-panel-casefile .tb-items { counter-reset: case; }
.track-banner.tb-themed.tb-panel-casefile .tb-items li::before { counter-increment: case; content: 'No. ' counter(case); font-size: 12px; letter-spacing: 0.1em; color: var(--bt-pacc); }
/* Ruled paper (the essayists' desk, the copybook). */
.track-banner.tb-themed.tb-panel-lined .tb-panel, .track-banner.tb-themed.tb-panel-copybook .tb-panel {
  background: repeating-linear-gradient(var(--bt-pbg) 0 25px, color-mix(in srgb, var(--bt-pacc) 22%, var(--bt-pbg)) 25px 26px);
}
.track-banner.tb-themed.tb-panel-label .tb-panel { border-radius: 0; border: 1px solid #8A8678; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.track-banner.tb-themed.tb-panel-label .tb-panel-title, .track-banner.tb-themed.tb-panel-label .tb-kicker { text-align: left; }
.track-banner.tb-themed.tb-panel-vellum .tb-panel-title::first-letter, .track-banner.tb-themed.tb-panel-storybook .tb-panel-title::first-letter { color: var(--bt-pacc); font-size: 1.3em; }
.track-banner.tb-themed.tb-panel-notice .tb-panel { transform: rotate(1deg); }
.track-banner.tb-themed.tb-panel-notice .tb-panel::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bt-pacc); box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* Gentle movement: the gaslight's and the candle's flicker, a cloud's drift.
   Never for anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .track-banner.tb-themed .bt-flicker { animation: bt-flicker 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .track-banner.tb-themed .bt-drift { animation: bt-drift 14s ease-in-out infinite alternate; }
}
@keyframes bt-flicker { 0%, 100% { opacity: 1; } 42% { opacity: 0.86; } 48% { opacity: 0.97; } 70% { opacity: 0.9; } }
@keyframes bt-drift { from { transform: translateX(0); } to { transform: translateX(24px); } }

/* Narrower: the side panel drops below the words. */
@media (max-width: 900px) {
  .track-banner.tb-themed { flex-wrap: wrap; min-height: 0; }
  .track-banner.tb-themed .tb-main { flex: 1 1 100%; }
  .track-banner.tb-themed .tb-panel { flex: 1 1 100%; max-width: 420px; }
}
/* A phone: the picture becomes a band across the top, the words below it on
   the banner's own colour, then the panel. Nothing scrolls sideways. */
@media (max-width: 640px) {
  .track-banner.tb-themed { padding: 150px 20px 26px; gap: 20px; border-radius: 12px; }
  .track-banner.tb-themed::after { inset: 7px; border-radius: 7px; }
  .track-banner.tb-themed .tb-art { bottom: auto; height: 140px; }
  .track-banner.tb-themed .tb-art::after { background: linear-gradient(180deg, transparent 55%, var(--bt-c) 100%); }
  .track-banner.tb-themed .tb-title { font-size: 34px; }
  .track-banner.tb-themed .tb-hook { font-size: 19px; }
  .track-banner.tb-themed .tb-panel { max-width: none; transform: none !important; }
  .track-banner.tb-themed .tb-btn { flex: 1 1 auto; justify-content: center; text-align: center; padding: 8px 14px; }
  .track-banner.tb-themed.tb-motif-curtains { padding-top: 200px; }
}

/* The page around the banner: its edge follows the app's theme. */
html.lamplight .track-banner.tb-themed { box-shadow: 0 0 0 1px #C2AE88, 0 0 0 4px #EFE6D3, 0 0 0 5px #B8892E, 0 8px 22px rgba(90, 60, 20, 0.18); }
html.quill .track-banner.tb-themed { box-shadow: 0 0 0 1px #B08D3C, 0 0 0 4px #0E0C09, 0 0 0 5px #8E7340, 0 10px 26px rgba(0, 0, 0, 0.55); }
html.quill .track-banner.tb-themed .tb-btn { font-family: 'Newsreader', Georgia, serif; }
html.quill .track-banner.tb-themed .tb-btn:not(.tb-btn-primary), html.quill main .track-banner.tb-themed .tb-btn:not(.tb-btn-primary) { color: var(--bt-t); }
html.quill main .track-banner.tb-themed .tb-btn-primary { color: var(--bt-c); }
html.quill main .track-banner.tb-themed .tb-item-title { color: var(--bt-pacc); }
html.quill main .track-banner.tb-themed.tb-panel-chalk .tb-item-title,
html.quill main .track-banner.tb-themed.tb-panel-chart .tb-item-title,
html.quill main .track-banner.tb-themed.tb-panel-glass .tb-item-title { color: var(--bt-t); }
html.quill .track-banner.tb-themed .tb-title, html.quill .track-banner.tb-themed .tb-panel-title { text-shadow: none; }
html.lamplight .track-banner.tb-themed .chip, html.quill .track-banner.tb-themed .chip { filter: none; }

/* ---------- Placards: the colour and motif on Tracks and Classes cards ---------- */
.bt-strip {
  display: flex; align-items: center; gap: 10px; height: 34px; margin: -20px -22px 4px; padding: 0 14px;
  background: var(--bt-c); color: var(--bt-m); border-radius: 11px 11px 0 0;
}
.bt-strip .bt-emblem { flex: 0 0 auto; }
.bt-strip .bt-rule { flex: 1 1 auto; height: 0; border-top: 1px solid var(--bt-m); box-shadow: 0 3px 0 -2px var(--bt-m); opacity: 0.75; }
.bt-placard-row { border-left: 8px solid var(--bt-c) !important; }
.bt-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; background: var(--bt-c); color: var(--bt-m); box-shadow: inset 0 0 0 1.5px var(--bt-m); }
html.lamplight .bt-strip, html.quill .bt-strip { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }

/* The tracks' small shields as their motif (unity Job 5). */
.bt-shield { display: block; flex: 0 0 auto; object-fit: contain; }
.bt-strip .bt-shield { margin-top: 4px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.bt-badge .bt-shield { width: 36px; height: 36px; }
.honours-shield { display: inline-block; vertical-align: middle; margin-right: 8px; }