/* Compass-line icon family: ocean outline, sunset accents, always paired with a label. */
.ssf-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; overflow: visible; }
.ssf-icon-accent { stroke: var(--ssf-icon-accent, currentColor); }
.ssf-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; }
.ssf-with-icon > .ssf-icon { pointer-events: none; }
.topbar nav .ssf-icon, .admin-site-links .ssf-icon { --ssf-icon-accent: var(--sun); }
.topbar nav { gap: clamp(16px, 2vw, 30px); }
.topbar nav > span.ssf-with-icon { cursor: default; }
.admin-site-links strong.ssf-with-icon { justify-content: flex-start; }
.instrument-card > span.ssf-with-icon { display: flex; justify-content: flex-start; color: #a9c3c9; font-size: 14px; line-height: 1.3; }
.instrument-card > span .ssf-icon { --ssf-icon-accent: var(--sun); color: var(--aqua); }
.ssf-with-icon:disabled { opacity: .55; cursor: not-allowed; }
.ssf-with-icon:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.photo-button .ssf-icon, .history-presets .ssf-icon { width: 22px; height: 22px; flex-basis: 22px; }
.photo-control-card .photo-button { display: flex; align-items: center; justify-content: center; }
.photo-control-card .photo-button span { color: inherit; text-transform: none; font: inherit; }
.admin-toolbar { flex-wrap: wrap; }
.admin-signin-link { margin-top: 20px; color: var(--ocean); font-size: 14px; }
.admin-site-links > a.ssf-with-icon { display: grid; grid-template-columns: 24px minmax(0, 1fr); justify-content: start; }
.admin-site-links > a.ssf-with-icon > .ssf-icon { grid-row: 1 / 3; }
@media (max-width: 1100px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; }
  .topbar nav { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: space-around; gap: 8px; }
  .topbar nav > a, .topbar nav > span { min-height: 44px; padding: 6px 3px; }
}
@media (max-width: 620px) {
  .topbar .brand { min-width: 0; gap: 8px; }
  .topbar .brand-compass { width: 42px; height: 42px; }
  .topbar .brand-lockup strong em { font-size: 22px; }
  .topbar .brand-lockup strong b { display: block; margin: 5px 0 0; font-size: 11px; letter-spacing: .16em; }
  .admin-topbar { flex-direction: column; }
  .admin-toolbar { width: 100%; max-width: none; }
  .admin-toolbar > * { width: auto; flex: 1 1 120px; }
  .topbar nav { font-size: 12px; letter-spacing: .02em; }
  .topbar nav .ssf-with-icon { flex-direction: column; gap: 3px; }
  .topbar nav .ssf-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .topbar .account-link { max-width: 110px; padding-inline: 9px; gap: 5px; font-size: 14px; white-space: normal; }
  .topbar .account-link .ssf-icon { width: 20px; height: 20px; flex-basis: 20px; }
}