/* 伴工室 original vector identity for 快印桌牌. Load after page styles. */
:root {
  --brand-blue: #004ea2;
  --brand-blue-hover: #003d80;
  --brand-orange: #f08300;
  --brand-ink: #172334;
  --brand-muted: #5b687c;
  --brand-paper: #ffffff;
  --brand-surface: #f4f7fd;
  --brand-soft: #e7eff9;
  --brand-line: #d7e1ed;
  --brand-focus: #004ea2;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 0;
  color: var(--brand-ink);
  line-height: 1;
  text-decoration: none;
}
.brand-link:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 6px;
  border-radius: 3px;
}
.brand-link .brand-image, .brand-image {
  display: block;
  width: 184px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 138 / 31;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
  filter: none;
  box-shadow: none;
}
.brand-image--compact { width: 164px; }
.brand-symbol { display: block; width: 40px; height: auto; aspect-ratio: 1; object-fit: contain; flex: 0 0 auto; }
@media (max-width: 600px) {
  .brand-link .brand-image, .brand-image { width: 144px; }
  .brand-image--compact { width: 136px; }
}
/* Mobile identity stays on the viewport centre, independent of side actions. */
@media (max-width: 740px) {
  .app-header .brand-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; gap: 8px; }
  .app-header .home-brand { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; }
  .app-header .home-brand .brand-image { width: var(--workspace-mobile-brand-width, 96px); height: auto; }
  .app-header .project-entry { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; min-width: 0; }
  .app-header .project-entry button { min-height: 44px; white-space: nowrap; }
  .app-header .account-entry { grid-column: 1; grid-row: 1; justify-self: start; }
  .app-header .site-badge, .app-header .service-entry { display: none; }
}
@media (max-width: 380px) {
  .app-header .home-brand { grid-column: 1 / -1; grid-row: 1; min-height: 28px; }
  .app-header .account-entry { grid-column: 1; grid-row: 2; }
  .app-header .project-entry { grid-column: 2 / -1; grid-row: 2; }
}
@media print {
  .brand-link .brand-image, .brand-image { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}