/* The site's own controls, laid over the report: the report selector and the
   links in the sidebar, the Q&A Bot, and the login page. The report's own
   tokens (--teal, --rule, --soft, --sans, --serif) are reused so the two read as
   one page; the login page, which has no report, defines them itself. */

:root { --qa-w: 380px; }

/* ---------------------------------------------------------------- sidebar */
.side-pick { padding: 12px 20px 10px; border-bottom: 1px solid var(--rule); }
.side-pick label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase;
                   letter-spacing: .04em; margin-bottom: 4px; }
.side-pick select { width: 100%; font: 14px var(--sans); padding: 6px 8px; border: 1px solid var(--rule);
                    background: #fff; color: var(--ink); border-radius: 0; }
.side-link { display: block; width: 100%; text-align: left; padding: 6px 20px; font: 14px var(--sans);
             color: var(--teal); text-decoration: none; background: none; border: 0; cursor: pointer; }
.side-link:hover { background: #e6edef; }
/* the page you are on, in the sidebar's foot: marked like the current section */
.side-link.is-here { color: var(--teal); font-weight: 700; background: #fff; cursor: default;
                     box-shadow: inset 3px 0 0 var(--teal); }
.side-link.is-here:hover { background: #fff; }
.side-foot form { margin: 0; }

/* ---------------------------------------------------------------- Q&A Bot */
.qa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; width: 52px; height: 52px;
          display: grid; place-items: center; background: var(--teal); color: #fff; border: 0;
          cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.qa-fab:hover, .qa-fab:focus-visible { background: #003443; }
.qa-fab[aria-expanded="true"] { display: none; }
.qa-panel { position: fixed; right: 24px; bottom: 24px; z-index: 31; width: var(--qa-w);
            height: min(600px, calc(100vh - 48px)); display: flex; flex-direction: column;
            background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--teal);
            box-shadow: 0 10px 34px rgba(0, 0, 0, .22); font: 14px/1.5 var(--sans); }
.qa-panel[hidden] { display: none; }
.qa-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px;
           border-bottom: 1px solid var(--rule); }
.qa-title { display: flex; align-items: center; gap: 8px; font: 700 16px var(--serif); color: var(--teal); }
.qa-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
            padding: 2px 6px; }
.qa-close:hover { color: var(--teal); }
.qa-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.qa-hint { color: var(--muted); font-size: 13px; margin: 0; }
.qa-msg { max-width: 88%; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; }
.qa-msg p { margin: 0 0 6px; } .qa-msg p:last-child { margin-bottom: 0; }
.qa-msg ul { margin: 0 0 6px; padding-left: 18px; }
.qa-user { align-self: flex-end; background: var(--teal); color: #fff; }
.qa-bot { align-self: flex-start; background: var(--soft); color: var(--ink); border-left: 3px solid var(--teal); }
.qa-bot.qa-error { border-left-color: var(--red); }
.qa-bot.qa-pending::after { content: "…"; color: var(--muted); }
.qa-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rule); }
.qa-form textarea { flex: 1; resize: none; font: 14px/1.4 var(--sans); padding: 8px; border: 1px solid var(--rule);
                    border-radius: 0; color: var(--ink); }
.qa-form textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.qa-form button { background: var(--teal); color: #fff; border: 0; padding: 0 14px; font: 700 14px var(--sans);
                  cursor: pointer; }
.qa-form button:disabled { background: var(--muted); cursor: default; }
@media (max-width: 600px) {
  .qa-panel { right: 0; bottom: 0; width: 100vw; height: 100vh; border: 0; }
  .qa-fab { right: 16px; bottom: 16px; }
}
@media print { .qa-fab, .qa-panel { display: none !important; } }

/* ---------------------------------------------------------------- login */
.login-page { --teal: #00455A; --red: #C11627; --ink: #1d2427; --muted: #5f6b70; --rule: #cfd8dc;
              --sans: Arial, Helvetica, sans-serif; --serif: "Times New Roman", Times, Georgia, serif;
              margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f3f6f7;
              font: 15px/1.5 var(--sans); color: var(--ink); padding: 16px; box-sizing: border-box; }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--rule);
              border-top: 3px solid var(--teal); padding: 28px 28px 24px; box-sizing: border-box; }
.login-logo { width: 180px; height: auto; display: block; margin-bottom: 18px; }
.login-card h1 { font: 700 24px var(--serif); color: var(--teal); margin: 0; }
.login-sub { color: var(--muted); margin: 2px 0 18px; }
.login-card label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.login-card input { width: 100%; box-sizing: border-box; font: 15px var(--sans); padding: 9px 10px;
                    border: 1px solid var(--rule); border-radius: 0; margin-bottom: 14px; }
.login-card input:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.login-card button { width: 100%; background: var(--teal); color: #fff; border: 0; padding: 10px;
                     font: 700 15px var(--sans); cursor: pointer; }
.login-card a { color: var(--teal); }
.login-error { color: var(--red); font-weight: 700; margin: 0 0 12px; }