/* One header stylesheet for the React calendar/details and static rating pages. */
.bf-header{--bf-bg:250 248 247;--bf-text:15 15 14;--bf-muted:110 107 99;--bf-line:15 15 14;--bf-line-alpha:.06;--bf-gold:212 169 58;
  position:sticky;top:0;z-index:30;background:rgb(var(--bf-bg)/.94);color:rgb(var(--bf-text));
  font-family:Geist,system-ui,-apple-system,sans-serif;line-height:1.5;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgb(var(--bf-line)/var(--bf-line-alpha))}
.dark .bf-header{--bf-bg:17 20 19;--bf-text:248 247 242;--bf-muted:177 181 173;--bf-line:248 247 242;--bf-line-alpha:.16}
.bf-header *{box-sizing:border-box}
.bf-header a{color:inherit;text-decoration:none;touch-action:manipulation}
.bf-header :focus-visible{outline:2px solid #b59940;outline-offset:4px}
.bf-header-bar{max-width:72rem;margin:0 auto;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bf-header-brand{flex:none;font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.bf-header-brand span{color:rgb(var(--bf-gold))}
.bf-header-tools{display:flex;align-items:center;gap:12px;min-width:0}
.bf-header-nav{display:flex;align-self:stretch;align-items:center;gap:16px;font-size:14px}
.bf-header-nav>a,.bf-header-nav>span{display:inline-flex;align-items:center;gap:4px;min-height:44px;border-bottom:3px solid transparent;color:rgb(var(--bf-muted));font-weight:500;white-space:nowrap}
.bf-header-nav>a[aria-current=page]{color:rgb(var(--bf-text));font-weight:650;border-bottom-color:#efcf69}
.bf-header-nav>a:hover{color:rgb(var(--bf-text))}
.bf-header-nav small{font-size:10px}
.bf-header-language{position:relative;flex:none}
.bf-header-language summary{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:0 10px;border:1px solid rgb(var(--bf-line)/var(--bf-line-alpha));border-radius:8px;
  background:rgb(var(--bf-bg));font-size:13px;font-weight:600;list-style:none;cursor:pointer;touch-action:manipulation}
.bf-header-language summary::-webkit-details-marker{display:none}
.bf-header-language summary::marker{content:""}
.bf-header-language summary svg{color:rgb(var(--bf-muted));flex:none}
.bf-header-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:236px;padding:4px;border:1px solid rgb(var(--bf-line)/var(--bf-line-alpha));border-radius:10px;
  background:rgb(var(--bf-bg));box-shadow:0 6px 20px #00000014;font-size:14px;overflow:hidden;isolation:isolate}
.bf-header-language-options{display:flex;flex-direction:column}
.bf-header-language-options a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;font-weight:400}
.bf-header-language-options a:hover{background:rgb(var(--bf-line)/.05)}
.bf-header-language-options a[aria-current=true]{font-weight:700}
.bf-header-appearance{margin-top:4px;padding:10px 8px 6px;border-top:1px solid rgb(var(--bf-line)/var(--bf-line-alpha))}
.bf-header-appearance>span{display:block;padding:0 4px 6px;font-size:12px;font-weight:600;color:rgb(var(--bf-muted))}
.bf-header-appearance>div{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border-radius:8px;background:rgb(var(--bf-line)/.05)}
.bf-header-appearance button{min-height:40px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:rgb(var(--bf-muted));font:inherit;font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation}
.bf-header-appearance button:hover{color:rgb(var(--bf-text))}
.bf-header-appearance button[aria-pressed=true]{background:rgb(var(--bf-bg));color:rgb(var(--bf-text));box-shadow:0 1px 4px #0000001a}
.bf-header-theme{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:rgb(var(--bf-muted));cursor:pointer;touch-action:manipulation}
.bf-header-theme:hover{color:rgb(var(--bf-text))}
.bf-header .bf-header-sun,.dark .bf-header .bf-header-moon{display:none}
.dark .bf-header .bf-header-sun{display:block}
@media(min-width:640px){.bf-header-bar{padding:20px 32px}.bf-header-brand{font-size:20px}.bf-header-tools{gap:24px}.bf-header-nav{gap:28px}}
@media(max-width:600px){
  .bf-header-bar{padding:12px;gap:8px}
  .bf-header-brand{font-size:17px}
  .bf-header-tools{gap:6px}
  .bf-header-nav{gap:14px;font-size:13px;margin-right:2px}
  .bf-header-theme{width:40px;height:40px}
  .bf-header-language summary{min-height:40px;padding:0 8px}
  .bf-header-menu{min-width:180px}
}
/* Narrow phones: drop the arrow and tighten gaps so brand, nav, language and theme fit on one line. */
@media(max-width:360px){
  .bf-header-bar{padding:12px 10px;gap:6px}
  .bf-header-brand{font-size:15px}
  .bf-header-tools{gap:4px}
  .bf-header-nav{gap:10px;font-size:12px}
  .bf-header-language summary{padding:0 6px;gap:4px;font-size:12px}
  .bf-header-language summary svg:last-child{display:none}
}
/* Match the existing app dark canvas when following the same saved theme to ratings. */
.dark body:has(.bf-header[data-static]){--bg:rgb(17 20 19);--surface:rgb(23 27 25);--surface-2:rgb(29 34 31);--text:rgb(248 247 242);--muted:rgb(177 181 173);--faint:rgb(141 146 137);--line:rgb(248 247 242 / .10);--line-2:rgb(248 247 242 / .16);--gold-text:#efcf69}
.dark body:has(.bf-header[data-static]) tbody tr:hover td{background:var(--surface-2)}
@media(max-width:340px){
  .bf-header-bar{padding:12px 8px;gap:4px}
  .bf-header-brand{font-size:14px}
  .bf-header-tools{gap:2px}
  .bf-header-nav{gap:8px;font-size:11.5px;margin-right:0}
  .bf-header-language summary{padding:0 5px;gap:3px}
}