/* 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; } }
/* ⭐ HIS HOME HAS TWO SMALL TILES, NOT HQ'S MANY (Tony, 2026-10-22). HQ's grid (styles.css) makes as many 150 px columns as fit — four on a phone held sideways (700 px, measured on the bench) — and three from 760 px, so «I miei soldi» and «I miei numeri» filled two of them and left a hole on the right. Here they share the row half and half from 400 px up; below that HQ's own rule already gives two, or one on the narrowest phones. ⚠️ The wide tiles must say `1 / -1`, not HQ's `span 3`: three columns asked of a two-column grid would invent a third one. */
@media (min-width: 400px) {
  .hq-home .hq-grid { grid-template-columns: repeat(2, 1fr); }
  .hq-home .hq-tile--new { grid-column: 1 / -1; }
}