/* Use the actual program shell for its buttons, logos, colours and two bar heights.
   These rules only fit the website's existing sections and scene controls around it.
   0.1.17 (Hiroshi, 10.11.2026): everything is in the top bar again — ≡ and the logo at the left, the cup and the four
   programs in the middle, then the sections, the language, the music, FX and Needle at the right. The strip below
   holds only the chosen program's actions. --site-scale is the size of the bar (0.8; the switch barScale in
   site-program-navigation.mjs sets data-bar-scale, and 100 gives the size of 09.11 back). */
.site-program-header,.site-program-bar{--shell-border:#20323e;--shell-nav:#b6c7d1;--shell-lit:#e9f5fa;--shell-dim:#5f717f;--site-scale:1;--site-logo:32px;flex:none}
.site-program-header[data-bar-scale="80"],.site-program-header[data-bar-scale="80"]+.site-program-bar{--site-scale:.8}
:is(.public-scene,.app-shell)>header.site-program-header{grid-template-columns:minmax(0,auto) auto minmax(0,auto);grid-template-areas:'start family end';justify-content:space-between;min-height:calc(49px*var(--site-scale));padding:2px clamp(12px,1.2vw,24px);gap:0 10px;border-bottom:1px solid var(--shell-border);font:400 11px/1.4 "Living Sans",system-ui,sans-serif}
:is(.public-scene,.app-shell)>header.site-program-header>.living-identity{grid-area:start;justify-self:start;width:auto;padding:0;gap:2px}
:is(.public-scene,.app-shell)>header.site-program-header .living-wordmark{width:auto}
:is(.public-scene,.app-shell)>header.site-program-header .living-wordmark-art{width:clamp(170px,calc(18vw*var(--site-scale)),calc(500px*var(--site-scale)));transition:opacity .18s}
:is(.public-scene,.app-shell)>header.site-program-header[data-logos=bright] .living-wordmark-art{opacity:.85}
.site-program-header .site-home{display:block;border-radius:2px}
.site-program-header .site-home:is(:hover,:focus-visible) .living-wordmark-art{opacity:.95}
.site-program-header .site-home:focus-visible{outline:1px solid #b9dae9;outline-offset:2px}
.site-program-header .site-menu>summary{min-height:calc(44px*var(--site-scale))}
.site-program-header .site-menu-list{min-height:44px}
.site-program-header .site-header-end{grid-area:end;justify-self:end;display:flex;align-items:center;gap:0 6px;min-width:0}
.site-program-header .site-header-controls{display:flex;align-items:center;gap:0 2px;flex:none}
.site-program-header .scene-navigation{min-width:0;margin:0;gap:0;flex-wrap:nowrap;font:inherit;white-space:nowrap}
.site-program-header .scene-navigation>button,.site-program-header .scene-navigation>.header-dropdown>button,.site-program-header .scene-navigation>.language-picker>button{min-height:calc(44px*var(--site-scale));padding:8px 6px;font:inherit;white-space:nowrap}
/* The words at the right are lit (Hiroshi: „всичките бутончета, горните, трябва да се светнати“). */
.site-program-header[data-logos=bright] .scene-navigation>button,.site-program-header[data-logos=bright] .scene-navigation>.header-dropdown>button,.site-program-header[data-logos=bright] .scene-navigation>.language-picker>button{color:#dcebf2}
/* „Hiroshi Rinzai“ is lit only while he is online (point 73: „Трябва да свети само когато е онлайн“). Offline it keeps the grey
   of site-bar.css; online it is lit as the other words are, by the rule above. */
.site-program-header[data-logos=bright] .scene-navigation .author-presence.offline{color:#929ba3}
.site-program-header .scene-controls{grid-area:auto;border:0;padding:0}
.site-program-header .scene-controls .scene-control,.site-program-header .site-header-music .app-music-button{min-width:calc(44px*var(--site-scale));min-height:calc(44px*var(--site-scale))}
.site-program-header .site-header-music .app-music-button{width:calc(44px*var(--site-scale))}
/* One height of the top bar on the three pages (Г-01, points 65 and 68). On /sketch/ and /dance/ the two music buttons are the
   shell's own, with its 24px signs, and made the bar 47px high where the main site's is 42px. Here the sign takes the bar's scale,
   as the main site's signs do (.site-header-music .ui-icon below). */
.site-program-header .site-header-music .app-music-button svg{width:calc(24px*var(--site-scale));height:calc(24px*var(--site-scale));flex:0 0 calc(24px*var(--site-scale))}
.site-program-header[data-logos=bright] .scene-controls .scene-control{color:#c6d6de}
.site-program-header[data-logos=bright] .scene-controls .scene-control[aria-pressed=true]{color:#e4f4fb}
.site-program-header[data-logos=bright] .site-header-music .music-control{color:#c6d6de}
.site-program-header .app-family{min-width:0;gap:calc(4px*var(--site-scale))}
.site-program-header .app-family>.app-word{min-height:calc(44px*var(--site-scale))}
.site-program-header .app-family>.app-program{padding:calc(4px*var(--site-scale)) calc(8px*var(--site-scale))}
.site-program-header .app-program-logo{height:calc(var(--site-logo)*var(--site-scale))}
/* The cup for the competition, before Dance. */
.site-program-header .site-cup{justify-content:center;padding:calc(4px*var(--site-scale)) calc(8px*var(--site-scale));color:var(--shell-dim)}
.site-program-header .site-cup-icon{display:block;width:calc(30px*var(--site-scale));height:calc(30px*var(--site-scale));fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* Lit until one is chosen; then the chosen one stays lit and the others fade (Hiroshi, 10.11.2026). */
.site-program-header[data-logos=bright] .app-family>.app-program .app-program-logo{opacity:1}
.site-program-header[data-logos=bright] .app-family>.site-cup{color:#e6c877}
.site-program-header[data-logos=bright] .app-family.has-selection>.app-program:not([aria-pressed=true]) .app-program-logo{opacity:.4}
.site-program-header[data-logos=bright] .app-family.has-selection>.site-cup:not([aria-pressed=true]){color:#7d6f48}
.site-program-header[data-logos=bright] .app-family.has-selection>.app-word:not([aria-pressed=true]):is(:hover,:focus-visible) .app-program-logo{opacity:.85}
.site-program-header[data-logos=bright] .app-family.has-selection>.site-cup:not([aria-pressed=true]):is(:hover,:focus-visible){color:#e6c877}
.site-program-header .app-family>.app-word[aria-current=page]{cursor:pointer}
.site-header-music .ui-icon{display:block;width:calc(24px*var(--site-scale));height:calc(24px*var(--site-scale));flex:0 0 calc(24px*var(--site-scale))}
.site-program-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:'tools subs end';min-height:calc(45px*var(--site-scale));padding:0 clamp(12px,1.2vw,24px);gap:0 14px;background:#030b10;font:400 11px/1.4 "Living Sans",system-ui,sans-serif}
.site-program-bar>.app-subs{position:static;grid-area:subs;justify-self:center;justify-content:center;min-height:calc(44px*var(--site-scale));gap:4px;padding:0;border:0;background:transparent;flex-wrap:nowrap}
.site-program-bar:not(.has-open-tool)>.app-subs{display:flex}
/* 0.1.17 (points 58, 59): the program's words stand at the left of the lower bar, the other buttons and the credits · plan at
   the right (the layout rules are in app-shell/app-shell.css, .site-bar-row). */
.site-program-bar .app-bar-left>.app-subs{position:static;display:flex;align-items:center;gap:4px;min-height:calc(44px*var(--site-scale));padding:0;border:0;background:transparent;flex-wrap:nowrap}
.site-program-bar .app-bar-left>.app-tools:empty{display:none}
.site-program-bar .app-bar-right .app-word{min-height:calc(44px*var(--site-scale));font:inherit;text-decoration:none;color:#dcebf2}
.site-program-bar .app-bar-right .site-action-compact{display:none}
.site-program-bar .app-word{min-height:calc(44px*var(--site-scale));font:inherit;text-decoration:none;color:#dcebf2}
.site-program-bar .site-action-compact{display:none}
.site-program-bar .site-program-notice{margin:0;padding:0 6px;color:#82939f;white-space:normal}
.site-program-bar .site-program-info{color:#82939f}
.site-program-bar [hidden]{display:none!important}
.is-loading>.site-program-bar{visibility:hidden}
.returning-visit .is-loading>.site-program-bar{visibility:visible}
@media(max-width:1500px){.site-program-header{--site-logo:26px}}
/* Narrower windows: the sections take a second row, in full view (never inside ≡). */
@media(max-width:1320px){
 :is(.public-scene,.app-shell)>header.site-program-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:'start family controls' 'sections sections sections'}
 .site-program-header .site-header-end{display:contents}
 .site-program-header .scene-navigation{grid-area:sections;justify-self:center;justify-content:center;flex-wrap:wrap;white-space:normal}
 .site-program-header .site-header-controls{grid-area:controls;justify-self:end}
}
@media(max-width:900px){:is(.public-scene,.app-shell)>header.site-program-header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'start controls' 'family family' 'sections sections'}.site-program-header .app-family{justify-self:center}}
@media(max-width:640px){
 :is(.public-scene,.app-shell)>header.site-program-header{padding:2px 8px;gap:0 4px}
 :is(.public-scene,.app-shell)>header.site-program-header .living-wordmark-art{width:min(44vw,190px)}
 .site-program-bar{padding:0 6px}
 .site-program-bar>.app-tools{display:none}
 .site-program-bar>.app-subs{justify-self:center;gap:0;min-width:0}
 .site-program-bar .app-word{padding:8px 4px}
 .site-program-bar .site-action-label{display:none}
 .site-program-bar .site-action-compact{display:inline}
}
@media(max-width:360px){
 .site-program-header .app-family{gap:2px}
 .site-program-header .app-family>.app-program{padding:4px}
 .site-program-header{--site-logo:22px}
}
/* 64: the cup is replaced by his word logo „competition“; pale and bright as the other logos. */
.site-program-header .site-cup-logo{display:block}
.site-program-header[data-logos=bright] .app-family.has-selection>.site-cup:not([aria-pressed=true]) .app-program-logo{opacity:.4}
.site-program-header[data-logos=bright] .app-family.has-selection>.site-cup:not([aria-pressed=true]):is(:hover,:focus-visible) .app-program-logo{opacity:.85}