/* lhq.css — L-HQ's own few rules. Everything else is HQ's stylesheet (css/styles.css), copied as it is by lhq/build.js, so the app looks and behaves like HQ on a phone, an iPad and a desktop. */
/* His mark is the Telaio mark in GOLD — HQ's is teal — so the two apps are never confused on one phone. */
.lhq-mark { width: 64px; height: 64px; border-radius: 16px; display: block; margin: 0 auto 6px; }
.hq-hq.lhq-word { color: var(--hq-gold); font-size: 22px; }
.hq-head__brand .hq-hq.lhq-word { font-size: 15px; }
/* What is not built yet: visible, so he knows it is coming, and plainly not a button. */
.lhq-tile--soon { opacity: .55; cursor: default; }
.lhq-soon { position: absolute; top: 11px; right: 11px; font-size: 10.5px; font-weight: 700; color: var(--hq-soft);
  border: 1px solid var(--hq-line2); border-radius: 999px; padding: 3px 8px; }
/* The notice and its «Ho capito», on one line when there is room. */
.lhq-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.lhq-notice > span { display: flex; align-items: center; gap: 8px; flex: 1 1 18em; }
.lhq-notice .btn { flex: none; }
.hqgate__brand { margin: 6px 0 0; }
/* The clients' apps paint a pinstripe photo behind everything (`--app-bg` in styles.css). HQ's dark backdrop (.hq) covers it completely, so here it is simply not asked for — one download less on every opening. */
:root { --app-bg: none; }
/* ⚠️ ON A PHONE the header holds the mark, the language, his name and two buttons — «Procacciatori» does not fit beside them and ran under the language buttons (seen on the bench, 375 px). It stays where there is room: the sign-in screen, and every header from 561 px up. */
@media (max-width: 560px) { .hq-head__brand .hq-hq.lhq-word { display: none; } }