/* Navigation and outer frame follow the reviewed Gustav Speaks homepage shell. */
/* Homepage shell. Cabinet palette above is scoped to its own surfaces. */
:root{--paper:#f2efe8;--paper-dim:#b6ae9f;--night:#09090a;--night-soft:#111115;--chalk:#f2efe8;--muted:#b6ae9f;--gold:#d6b47a;--line:rgba(255,255,255,.12)}
body{padding:28px 16px 40px;background:radial-gradient(circle at 8% 2%,rgba(143,174,194,.15),transparent 32rem),radial-gradient(circle at 94% 12%,rgba(159,195,173,.1),transparent 30rem),linear-gradient(180deg,#090a0b,#08090a)}
.page-grid{opacity:1;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
.site-frame{width:100%;max-width:1180px;margin:0 auto;padding:24px 24px 16px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(12,12,14,.82);box-shadow:0 24px 70px rgba(0,0,0,.42)}
.site-frame>main,.site-frame>footer{width:100%;max-width:none;margin-inline:0}
.site-header,.lang-switcher-wrap{--ink:#f2efe8;--accent:#d6b47a;--muted:#b6ae9f;--border:rgba(255,255,255,.12);--radius:10px;font-family:Georgia,"Times New Roman",serif;line-height:normal}
.site-frame>.site-header{position:sticky;top:12px;width:100%;max-width:none;min-height:0;margin:0 0 18px;padding:0;border:0;background:transparent;z-index:200}
    .site-nav-wrap {
      position: sticky;
      top: 12px;
      z-index: 30;
      margin: 0 0 18px;
      padding: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius);
      background: rgba(8, 9, 10, 0.88);
      backdrop-filter: blur(16px);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
    }

    .site-nav {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 4px;
      overflow: visible;
      white-space: nowrap;
    }

    .site-nav > a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 8px 13px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      transition:
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease;
    }

    .site-nav > a:hover,
    .site-nav > a.is-active {
      background: rgba(255, 255, 255, 0.08);
      color: var(--ink);
    }

    .site-nav > a.is-primary {
      margin-left: auto;
      background: var(--accent);
      color: #111;
    }

    .site-nav > a:hover {
      transform: translateY(-1px);
    }

    .mobile-nav-tools {
      display: none;
    }

    .mobile-more,
    .public-council-menu {
      position: relative;
    }

    .mobile-more summary,
    .public-council-menu > summary {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      justify-content: center;
      padding: 7px 11px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.035);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      line-height: 1;
      text-decoration: none;
      text-transform: uppercase;
      cursor: pointer;
      list-style: none;
    }

    .mobile-more summary::-webkit-details-marker,
    .public-council-menu > summary::-webkit-details-marker {
      display: none;
    }

    .mobile-more[open] summary,
    .public-council-menu[open] > summary {
      color: var(--ink);
      background: rgba(255, 255, 255, 0.09);
    }

    .mobile-more.has-active summary,
    .public-council-menu.has-active > summary {
      border-color: rgba(214, 180, 122, 0.5);
      color: var(--ink);
    }

    .public-council-menu {
      flex: 0 0 auto;
      margin-left: auto;
    }

    .public-council-menu > summary {
      min-height: 36px;
      gap: 8px;
      padding-inline: 13px 11px;
    }

    .public-council-menu > summary::after {
      color: currentColor;
      content: "\2304";
      font-size: 0.78em;
      line-height: 1;
      transform: translateY(-1px);
    }

    .public-council-menu[open] > summary::after {
      transform: rotate(180deg) translateY(-1px);
    }

    .mobile-more-menu,
    .public-council-panel {
      position: absolute;
      right: 0;
      z-index: 60;
      display: grid;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(14, 15, 16, 0.98);
      box-shadow: 0 20px 54px rgba(0, 0, 0, 0.58);
      backdrop-filter: blur(20px);
    }

    .mobile-more-menu {
      top: calc(100% + 50px);
      width: min(240px, calc(100vw - 44px));
      padding: 8px;
    }

    .public-council-panel {
      top: calc(100% + 10px);
      width: min(280px, calc(100vw - 24px));
      overflow: hidden;
    }

    .mobile-more:not([open]) .mobile-more-menu {
      display: none;
    }

    .mobile-more-menu a {
      display: flex;
      min-height: 42px;
      align-items: center;
      padding: 9px 12px;
      border-radius: 10px;
      color: var(--muted);
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      text-decoration: none;
      text-transform: uppercase;
    }

    .mobile-more-menu a:hover,
    .mobile-more-menu a:focus-visible,
    .mobile-more-menu a.is-active {
      color: var(--ink);
      background: rgba(255, 255, 255, 0.08);
    }

    .mobile-more summary:focus-visible,
    .public-council-menu > summary:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .public-council-panel-heading {
      display: grid;
      gap: 2px;
      padding: 13px 14px 11px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.025);
    }

    .public-council-panel-heading > span {
      color: #9fc3ad;
      font-size: 0.57rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .public-council-panel-heading strong {
      font-size: 0.94rem;
      font-weight: 400;
    }

    .public-council-panel a {
      display: grid;
      gap: 2px;
      padding: 11px 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.075);
      color: var(--ink);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      line-height: 1.25;
      text-align: left;
      text-decoration: none;
      text-transform: none;
    }

    .public-council-panel-heading + a {
      border-top: 0;
    }

    .public-council-panel a:hover,
    .public-council-panel a:focus-visible,
    .public-council-panel a.is-active {
      color: var(--accent);
      background: rgba(214, 180, 122, 0.1);
      outline: none;
    }

    .public-council-panel a small {
      color: var(--muted);
      font-size: 0.66rem;
      letter-spacing: 0.02em;
    }

    .lang-switcher-wrap {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }

    .lang-switcher {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid rgba(0, 0, 0, 0.16);
      background: rgba(255, 255, 255, 0.04);
      padding: 2px;
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .lang-toggle-btn {
      border: none;
      background: transparent;
      padding: 4px 10px;
      border-radius: 999px;
      cursor: pointer;
      color: var(--muted);
      font: inherit;
    }

    .lang-toggle-btn[aria-pressed="true"] {
      background: var(--ink);
      color: #111;
    }

.site-header .site-nav-wrap{position:relative;top:auto;width:100%;margin:0}
.site-header .site-nav{width:100%;min-width:0}
.site-header .site-nav>a{font-family:inherit;font-size:.78rem;letter-spacing:.12em;line-height:normal;transform:none}
.site-header .site-nav>a:hover{transform:translateY(-1px)}
.site-header .public-council-menu{width:auto;margin-left:auto}
.site-header .public-council-menu>summary{width:auto;font-family:inherit;font-weight:400}
.site-header .public-council-panel{position:absolute;top:calc(100% + 10px);right:0;max-height:70vh;overflow-y:auto}
.site-header .public-council-panel a,.site-header .public-council-panel-heading{font-family:inherit}
.masthead h1{text-shadow:none;color:var(--chalk)}
@media(max-width:800px){
 body{padding:18px 10px 26px}
 .site-frame{padding:18px 16px 12px}
 .site-frame>.site-header{top:6px;margin-bottom:12px}
 .lang-switcher-wrap{display:none}
 .site-header .site-nav-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
 .site-header .mobile-nav-tools,.site-header .site-nav{display:contents}
 .mobile-nav-tools .lang-switcher{justify-self:start;grid-column:1;grid-row:1;margin:0}
 .mobile-more{grid-column:2;grid-row:1}
 .site-header .public-council-menu{grid-column:3;grid-row:1;width:auto;margin:0}
 .site-header .public-council-menu>summary{min-height:36px;padding:7px 11px;font-size:.7rem}
 .site-header .site-nav>a{grid-row:2;min-width:0;width:auto;min-height:34px;padding:7px 4px;font-size:.62rem;letter-spacing:.045em;line-height:normal;white-space:nowrap}
 .site-header .site-nav>a:nth-child(1){grid-column:1}
 .site-header .site-nav>a:nth-child(2){grid-column:2}
 .site-header .site-nav>a:nth-child(3){grid-column:3}
 .site-header .site-nav>a:nth-child(4){grid-column:4}
 .site-header .site-nav>.mobile-nav-hidden{display:none}
 .site-header .site-nav-wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 2px}
 .mobile-nav-tools .lang-switcher{grid-column:1 / 3}
 .mobile-more{grid-column:3;justify-self:end}
 .site-header .public-council-menu{grid-column:4;justify-self:end}
 .site-header .public-council-panel{top:calc(100% + 48px);right:0;width:min(280px,calc(100vw - 68px))}
 .mobile-more-menu{right:-78px;width:min(240px,calc(100vw - 68px))}
}
@media(max-width:800px){
 .site-header .mobile-nav-tools{display:flex;grid-column:1 / -1;grid-row:1;align-items:center;gap:6px;padding-right:105px}
 .mobile-nav-tools .lang-switcher{flex:0 0 auto;margin-right:auto}
 .mobile-nav-tools .mobile-more{flex:0 0 auto}
}


/* Recorder-specific integration, with private form colors kept in their own scope. */
html[lang="en"] .lang-de,html[lang="de"] .lang-en{display:none!important}
.site-header .site-nav{font:inherit}
.site-header .site-nav>a{border-bottom:0}
.site-frame>main{padding:0}
.site-frame>footer{padding:30px 0 10px}
.beta-banner{justify-content:flex-start;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:var(--paper);font:.84rem/1.5 Georgia,"Times New Roman",serif}
.beta-banner b{border-color:var(--line);color:var(--gold);font:inherit;font-size:.7rem;letter-spacing:.1em}
.site-header a:focus-visible,.site-header summary:focus-visible,.lang-toggle-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:800px){.beta-banner{gap:10px;padding:11px 12px;font-size:.78rem}.beta-banner b{font-size:.6rem}.site-frame>footer{padding:25px 0 8px}}
@media(prefers-reduced-motion:reduce){.site-header a{transition:none!important;transform:none!important}}

/* Give the language, More and Members controls their own space in both languages. */
.site-header .site-nav-wrap{display:flex;align-items:center;gap:4px}
.site-header .site-nav{flex:1}
.site-header .public-council-menu{flex:0 0 auto}
@media(max-width:800px){
 .site-header .site-nav-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
 .site-header .mobile-nav-tools{position:static;display:flex;grid-column:1;grid-row:1;min-width:0;padding:0;gap:6px}
 .site-header .mobile-nav-tools .lang-switcher{grid-column:auto;grid-row:auto;margin-right:auto}
 .site-header .mobile-more{position:static;grid-column:auto;grid-row:auto;justify-self:auto}
 .site-header .public-council-menu{grid-column:2;grid-row:1;justify-self:end}
 .site-header .site-nav{display:grid;grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 .site-header .site-nav>a:nth-child(n){grid-column:auto;grid-row:auto}
 .site-header .mobile-more-menu{left:0;right:auto;top:calc(100% + 8px);width:min(280px,calc(100vw - 68px))}
}

@media(max-width:360px){
 .site-header .lang-switcher{font-size:.68rem;letter-spacing:.08em}
 .site-header .lang-toggle-btn{padding:4px 8px}
 .site-header .mobile-more>summary,.site-header .public-council-menu>summary{padding:7px 8px;font-size:.61rem;letter-spacing:.06em}
}