/* ICONS:BEGIN (generated from the SVG paths in the build script: CSS masks, colour = currentColor) */
.ic { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: middle; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-grid { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.ic-chip { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='.5'/%3E%3Cpath d='M9 2.5V6M15 2.5V6M9 18v3.5M15 18v3.5M2.5 9H6M2.5 15H6M18 9h3.5M18 15h3.5'/%3E%3C/svg%3E"); }
.ic-route { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.5 6h7M6 8.5V12a4 4 0 0 0 4 4h5.5'/%3E%3C/svg%3E"); }
.ic-receipt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.ic-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M15.5 4.6a3.5 3.5 0 0 1 0 6.8M18 14.2a6.5 6.5 0 0 1 3.5 5.8'/%3E%3C/svg%3E"); }
.ic-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.5-3.2 8.2-7.5 9.5-4.3-1.3-7.5-5-7.5-9.5V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.3 10'/%3E%3C/svg%3E"); }
.ic-plug { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5'/%3E%3C/svg%3E"); }
.ic-key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.5'/%3E%3Cpath d='M11.2 11.8L20 3M16.5 6.5L19 9M14 9l2 2'/%3E%3C/svg%3E"); }
.ic-file { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.ic-sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.ic-logout { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3M14 16l4-4-4-4M18 12H9'/%3E%3C/svg%3E"); }
.ic-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11.5' height='11.5' rx='2'/%3E%3Cpath d='M15.5 8.5V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7.5a2 2 0 0 0 2 2h2.5'/%3E%3C/svg%3E"); }
.ic-external { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E"); }
.ic-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ic-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ic-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ic-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); }
.ic-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.ic-play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10-6.5z'/%3E%3C/svg%3E"); }
.ic-stop { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='6.5' width='11' height='11' rx='1.5'/%3E%3C/svg%3E"); }
.ic-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.6 3.6 5.4 3.6 8.5s-1.2 5.9-3.6 8.5c-2.4-2.6-3.6-5.4-3.6-8.5s1.2-5.9 3.6-8.5z'/%3E%3C/svg%3E"); }
.ic-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3L20 9.4M20 4v5.4h-5.4'/%3E%3C/svg%3E"); }
.ic-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E"); }
.ic-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.01'/%3E%3C/svg%3E"); }
.ic-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E"); }
.ic-laptop { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='5' width='15' height='10.5' rx='1.5'/%3E%3Cpath d='M2.5 19h19'/%3E%3C/svg%3E"); }
.ic-monitor { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12.5' rx='1.5'/%3E%3Cpath d='M9 20.5h6M12 16.5v4'/%3E%3C/svg%3E"); }
.ic-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.ic-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4L3 11l6.5 2.5L12 20l3-5.5z'/%3E%3Cpath d='M9.5 13.5L21 4'/%3E%3C/svg%3E"); }
.ic-chev-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ic-chev-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-more { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h.01M12 12h.01M19 12h.01' stroke-width='3.2'/%3E%3C/svg%3E"); }
.ic-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.ic-user-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M18.5 8v6M15.5 11h6'/%3E%3C/svg%3E"); }
.ic-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.ic-cloud { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10a4 4 0 0 0 .6-8A6 6 0 0 0 6.2 9.6 4.5 4.5 0 0 0 7 18.5z'/%3E%3C/svg%3E"); }
.ic-cloud-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10a4 4 0 0 0 .6-8A6 6 0 0 0 6.2 9.6 4.5 4.5 0 0 0 7 18.5zM4 4l16 16'/%3E%3C/svg%3E"); }
.ic-hand { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V6.5a1.5 1.5 0 0 1 3 0V12M11 11V5a1.5 1.5 0 0 1 3 0v6M14 11V6.5a1.5 1.5 0 0 1 3 0V14a7 7 0 0 1-7 7h-.5a6 6 0 0 1-4.8-2.4L3.5 16a1.6 1.6 0 0 1 2.4-2.1L8 15.5'/%3E%3C/svg%3E"); }
.ic-ban { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); }
.ic-box { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }
.ic-minimize { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.ic-square { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='5.5' width='13' height='13' rx='1'/%3E%3C/svg%3E"); }
.ic-bolt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E"); }
.ic-wallet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3'/%3E%3Crect x='4' y='8' width='16' height='11' rx='2'/%3E%3Cpath d='M16 13.5h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
.ic-activity { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E"); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355627a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.steps > li.done::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
/* ICONS:END */

/* the dark theme: the drawn chevron and check take the dark theme's colours; the navy tiles take the lighter navy
   (the design system's u-tile does the same), so they still stand out on the dark page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .steps > li.done::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1526' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) :is(.badge-letter, .hm-mono, .hm-mark:not(.off):not(.bad), .pub-top .brand svg) { background: var(--u-brand-on); }
}
:root[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .steps > li.done::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1526' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] :is(.badge-letter, .hm-mono, .hm-mark:not(.off):not(.bad), .pub-top .brand svg) { background: var(--u-brand-on); }

/* MCP servers (mcp.js) */
.seg.wrap { display: flex; flex-wrap: wrap; }
.mcp-tools { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.mcp-tools li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.mcp-tools small { flex-basis: 100%; color: var(--u-muted); }
#mcp-rows details summary { cursor: pointer; color: var(--u-accent); }

/* ---------- the public pages of the server: the company's entry page "/" (home.html) and sign-in /login (login.html) ---------- */
.public a:not(.btn):focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; border-radius: 3px; }
.pub-acts { display: flex; align-items: center; gap: 18px; }
.pub-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--u-muted); white-space: nowrap; }
.pub-link:hover { color: var(--u-fg); text-decoration: none; }
.pub-link .ic { width: 15px; height: 15px; }
.pub-foot .pub-link { font-family: var(--u-font); }
.side-note a { font-weight: 500; }
.note.lg-done { background: var(--u-good-soft); border-left-color: var(--u-good); }
.note.lg-done > .ic { color: var(--u-good); }
.lg-page { background: var(--u-bg); }

/* the company's entry page "/" (home.html): its name, the assistant in the browser, the app for the computer */
.hm-main { padding: 8px 32px 0; }
.hm { width: min(960px, 100%); display: grid; gap: 36px; padding-top: 52px; }
.hm-brand, .hm-brand > span:last-child { min-width: 0; }
.hm-brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* a long name never pushes the language away */
/* the company's mark: a navy tile with its first letter (or the people icon while there is no name) */
.hm-mono { width: 30px; height: 30px; border-radius: var(--u-radius); display: grid; place-items: center; flex: none; background: var(--u-navy); color: #ffffff; font: 600 15px/1 var(--u-font); }
.hm-mono .ic { width: 16px; height: 16px; }
.hm-mono.on { background: var(--u-navy); color: #ffffff; }
.hm-intro { display: grid; gap: 14px; max-width: 680px; }
/* the eyebrow carries the mark's bar: "un-" */
.hm-eyebrow { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 500 var(--u-fs-xs)/1.2 var(--u-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--u-navy); }
.hm-eyebrow::before { content: ""; width: 18px; height: 3px; background: currentColor; }
.hm-intro h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.hm-lead { max-width: 600px; font-size: 16.5px; line-height: 1.6; color: var(--u-muted); }
.hm-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hm-way { display: flex; flex-direction: column; }
.hm-way-b { flex: 1; padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; }
.hm-way-b > .hm-mark { margin-bottom: 6px; }
.hm-way h2 { font-size: 18px; }
.hm-way p { font-size: 14.5px; line-height: 1.6; color: var(--u-muted); }
.hm-act { margin-top: 8px; display: grid; gap: 10px; justify-items: start; }
.hm-way-f { align-items: flex-start; line-height: 1.5; }
.hm-way-f .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.hm-dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hm-dl-btn { height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.hm-dl-btn .ic, .hm-dl-sec .ic { width: 17px; height: 17px; }
.hm-dl-sec { height: 44px; }
.hm-mac { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--u-muted); }
.hm-mac .ic { width: 17px; height: 17px; }
.hm-dl-meta { font: 400 var(--u-fs-xs)/1.5 var(--u-mono); color: var(--u-muted); }
.hm-dl-wait { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--u-muted); font-size: 13.5px; }
.hm-dl-none { display: flex; align-items: flex-start; gap: 12px; }
.hm-dl-none b { display: block; font-weight: 600; }
.hm-dl-none div > span { display: block; color: var(--u-muted); font-size: 13.5px; }
/* the icon tile of each way: navy, like the design system's u-tile; a problem keeps its state colour */
.hm-mark { width: 36px; height: 36px; border-radius: var(--u-radius); display: grid; place-items: center; flex: none; background: var(--u-navy); color: #ffffff; }
.hm-mark .ic { width: 18px; height: 18px; }
.hm-mark.off { background: var(--u-sunken); color: var(--u-muted); }
.hm-mark.bad { background: var(--u-bad-soft); color: var(--u-bad); }
.hm-foot { width: min(960px, calc(100% - 64px)); margin: 72px auto 0; padding: 18px 0 26px; align-items: center; }

@media (max-width: 800px) {
  .hm-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .hm-main { padding: 0 16px; }
  .hm { gap: 26px; padding-top: 22px; }
  .hm-intro h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.015em; }
  .hm-lead { font-size: 15.5px; }
  .hm-way-b { padding: 20px 18px; }
  .hm-act { justify-items: stretch; }
  .hm-dl-btn, .hm-dl-sec { width: 100%; }
  .hm-foot { width: auto; margin: 48px 16px 0; padding: 16px 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-dl-wait .spin { animation: none; }
}

/* the online assistant's sign-in (app-login.html): the code app's QR code and the six-digit field */
.qr-box { display: flex; justify-content: center; padding: 12px; border: 1px solid var(--u-line-2); border-radius: var(--u-radius-lg); background: #ffffff; }  /* a QR code reads best dark on white */
.qr-box svg { width: 200px; height: 200px; }
.code-input { font-family: var(--u-mono); font-size: 22px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { #pl-open-app { display: none; } } /* on a computer the QR code is the way */
/* on a phone nothing may push the card wider than the screen: the long key and the button's label wrap */
#pl-form { min-width: 0; max-width: 100%; }
#pl-secret { word-break: break-all; white-space: normal; }
#pl-sso-ticket, #sso-redirect, #sso-start { overflow-wrap: anywhere; white-space: normal; }  /* a code or an address to copy is shown whole */
#pl-open-app, #pl-sso-open, #pl-sso, #pl-submit { white-space: normal; height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; text-align: center; }
/* "or" between the password and the company's own sign-in system */
.or-line { display: flex; align-items: center; gap: 12px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--u-line); }
/* the person's security events (app-security.html): what the administrator did stands out, the time on the right */
.ps-panel { width: min(720px, 100%); }
.ps-panel .panel-h > .ic { width: 17px; height: 17px; color: var(--u-muted); }
.ps-panel .panel-b { padding-bottom: 4px; }
.ps-panel .attn .when { margin-left: auto; flex: none; font: 400 var(--u-fs-xs)/1.4 var(--u-mono); color: var(--u-muted); white-space: nowrap; }
.ps-panel .attn .text b { font-weight: 500; }