/* WireAndWidgets additions on top of hub.css. Palette sampled from the logo. */
:root {
  --ink: #313A41; --blue: #3F4953; --blue-dark: #2A3138; --blue-tint: #E8ECEF;
  --sky: #CE7440; --bolt: #CE7440; --bg: #F1F2F3; --muted: #4F5A64;
  --orange: #CE7440; --orange-text: #A8531F; --steel: #617284;
}
a { color: var(--orange-text); } a:hover { color: #7F3C13; }
::selection { background: #F6D9C5; }
.grp-calc { --grp: #A8531F; --grp-tint: #F8E9DE; }
.grp-ref  { --grp: #3F4953; --grp-tint: #E6E9EC; }
.grp-text { --grp: #4F6175; --grp-tint: #E7ECF1; }
.brand { display: block; padding: 1rem 1.1rem .85rem; }
.brand-mark { display: block; width: 4.6rem; height: auto; }
.brand .brand-name { margin-top: .5rem; font: 700 1.3rem/1 var(--font-display); letter-spacing: .03em; color: var(--steel); }
.brand-name b { color: var(--ink); font-weight: 700; } .brand-name i { font-style: normal; }
.hero { margin: 0 0 1rem; } .hero img { display: block; width: min(100%, 38rem); height: auto; }

.topbar #install-btn { margin-left: auto; }
.site-foot { padding: 1rem 1.5rem 2rem; font-size: .85rem; color: var(--muted); max-width: 60rem; }
.intro-lead { font-size: 1.15rem; max-width: 42rem; margin-bottom: 1.5rem; }
.prose { max-width: 40rem; }
.prose h2 { font: 600 1.35rem/1.2 var(--font-display); margin: 1.5rem 0 .4rem; }
@media print { .site-foot, .sidebar, .topbar { display: none; } }
.tool-tile { flex: 1; }
.intro { margin-bottom: 1.5rem; }
.intro-lead { margin-bottom: 0; }
.tool-tile { grid-template-columns: minmax(0, 1fr); }
.backup-bar { display: flex; gap: .4rem; margin-left: auto; }
.backup-bar + #install-btn { margin-left: .4rem; }
.grp-labels { --grp: #2F6F73; --grp-tint: #E1F0F0; }
@media (max-width: 640px) { .backup-bar .btn { padding-inline: .6rem; font-size: .85rem; } }
/* Retint the label and sticker tools' blue accents to the site palette */
body .bg-blue-600, body .bg-blue-500 { background-color: var(--blue); }
body .bg-blue-700, body .hover\:bg-blue-700:hover { background-color: var(--blue-dark); }
body .bg-blue-50, body .bg-blue-100 { background-color: var(--blue-tint); }
body .text-blue-600, body .text-blue-700, body .text-blue-800 { color: var(--blue); }
body .border-blue-600, body .border-blue-500, body .border-blue-400 { border-color: var(--blue); }
.grp-planning { --grp: #8A6A1F; --grp-tint: #F5EEDB; }