/* Sponsor area — proposal B "Operativa". Structural CSS, the same for every theme (#99).
   No build step: plain CSS served as-is. Colours, fonts, radii and shadows are custom
   properties defined by the theme (public/themes/<name>/theme.css, linked before this file);
   tests/Feature/ThemeTest checks that every theme defines all the ones read here. */

:root { color-scheme: light; --tabbar-h: 76px; }
h1, h2, h3, h4, h5 { margin: 0 0 0.4em; font-family: var(--font-display); color: var(--text-strong); }
p { margin: 0 0 1em; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-soft); color: var(--text-body); font: var(--body-base); min-height: 100dvh; }
a, a:hover { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface-soft); }
.app.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.hdr { background: var(--surface-ink); color: #fff; padding: calc(10px + env(safe-area-inset-top)) 16px 14px; position: sticky; top: 0; z-index: 20; }
.hdr .row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hdr .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hdr .mark { width: 38px; height: 38px; flex: none; background: #fff; border-radius: 10px; padding: 3px; object-fit: contain; }
.hdr .title { font: 900 22px/1.05 var(--font-display); letter-spacing: var(--tracking-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--acc, var(--brand)); box-shadow: 0 0 0 2px #fff; flex: none; }
.hdr .sub { font: 600 13px/1.35 var(--font-body); color: var(--ink-300); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hdr .sub b { color: var(--accent); font-weight: 800; }
.hdr .back { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font-body); color: var(--ink-300); margin-bottom: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font: 800 13px/1 var(--font-display); color: #fff; border: 2px solid #fff; flex: none; }
.switcher { margin-top: 10px; }
.switcher select { width: 100%; font: 700 14px/1 var(--font-body); padding: 9px 12px; border-radius: var(--radius-pill); border: 1px solid var(--ink-600); background: var(--ink-900); color: #fff; }

.main { flex: 1; padding: 14px 14px 22px; }
.h { font: 700 11px/1 var(--font-mono); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin: 20px 4px 8px; display: flex; justify-content: space-between; gap: 8px; }
.h:first-child { margin-top: 2px; }
.lead-txt { margin: 0 4px 12px; color: var(--text-muted); font-size: 15px; }

/* Cards and rows */
.card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.card + .card { margin-top: 8px; }
.stripe { border-left: 6px solid var(--acc, var(--brand)); }
.stripe.past { border-left-color: var(--acc, var(--ink-700)); }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.li + .li { border-top: 1px solid var(--border-muted); }
.li .t { flex: 1; min-width: 0; }
.li .t b { display: block; font: 800 16px/1.2 var(--font-display); color: #000; }
.li .t span { display: block; font: 600 13px/1.35 var(--font-body); color: var(--text-muted); }
.li .t em { display: flex; align-items: center; gap: 5px; font: 700 12.5px/1.3 var(--font-body); font-style: normal; color: #9a7400; margin-top: 3px; }
.li > .i { color: var(--ink-400); }
.tag { font: 800 10.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius-pill); background: var(--ink-100); color: var(--ink-700); white-space: nowrap; }
.tag.y { background: var(--accent); color: var(--on-accent); }
.tag.k { background: #000; color: #fff; }
.tag.ok { background: var(--success-soft); color: #1f7d51; }
.tag.wa { background: var(--warning-soft); color: #9a7400; }
.tag.pu { background: var(--brand-100); color: var(--brand-deep); }
.tag.bad { background: var(--danger-soft); color: #b23a35; }
.empty { padding: 18px 14px; color: var(--text-muted); font-size: 14px; text-align: center; }

.today { background: #fff; border: 2px solid #000; border-radius: var(--radius-lg); box-shadow: var(--offset-sm); overflow: hidden; }
.today .head { background: var(--acc, var(--brand)); color: #fff; padding: 14px 16px; position: relative; }
.today .head small { font: 700 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .9; display: inline-flex; align-items: center; gap: 6px; }
.today .head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.today .head b { display: block; font: 900 28px/1 var(--font-display); letter-spacing: var(--tracking-tight); margin-top: 4px; }
.today .head .tag { position: absolute; top: 12px; right: 12px; border: 1.5px solid #000; }
.today .body { padding: 14px; display: grid; gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { background: var(--surface-soft); border-radius: var(--radius-sm); padding: 10px; }
.kpi b { display: block; font: 800 30px/1 var(--font-cond); color: #000; }
.kpi span { display: block; font: 600 11.5px/1.2 var(--font-body); color: var(--text-muted); } /* block: a label on two lines keeps its own line height (#261) */

.carousel { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.promo { flex: none; width: 220px; background: var(--acc, var(--brand-deep)); color: #fff; border-radius: var(--radius-md); padding: 14px; display: grid; gap: 6px; scroll-snap-align: start; }
.promo b { font: 900 20px/1.05 var(--font-display); }
.promo span { font: 600 12.5px/1.3 var(--font-body); opacity: .85; }
.promo .go { justify-self: start; margin-top: 4px; font: 800 13px/1 var(--font-display); background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: var(--radius-pill); }

/* Buttons */
.cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font: 800 16px/1 var(--font-display); padding: 15px; border-radius: var(--radius-pill); border: 2px solid #000; background: #000; color: #fff; text-align: center; }
.cta.y { background: var(--accent); color: var(--on-accent); box-shadow: var(--offset-sm); }
.cta.o { background: #fff; color: #000; }
.cta.g { background: transparent; border-color: transparent; color: var(--ink-600); padding: 10px; }
.cta.sm { width: auto; font-size: 13px; padding: 8px 12px; }
.cta[disabled], .cta.disabled { opacity: .4; pointer-events: none; }
.cta:focus-visible, .seg a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); }

/* Segmented control */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--ink-100); border-radius: var(--radius-pill); padding: 4px; margin-bottom: 12px; }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; font: 700 13px/1 var(--font-body); padding: 0 6px; border-radius: var(--radius-pill); color: var(--ink-600); } /* 40 px tap target (#6) */
.seg a.on { background: #fff; color: #000; box-shadow: var(--shadow-xs); }

/* Services */
.progress { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--font-body); color: var(--text-muted); padding: 2px 4px; }
.progress .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--ink-200); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--success); }
.sv { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 14px; align-items: center; }
.sv + .sv { border-top: 1px solid var(--border-muted); }
.sv b { font: 700 14.5px/1.25 var(--font-body); color: #000; }
.sv small { grid-column: 1; font: 600 12px/1.35 var(--font-body); color: var(--text-muted); }
.sv small.warn { color: #9a7400; }
/* #127: a ti.to discount code, easy to select and copy; a long code wraps instead of scrolling */
.sv b.code { font-family: var(--font-mono); letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; min-width: 0; }
.sv .tag, .sv form, .sv .ask { grid-row: 1 / span 3; grid-column: 2; }
.ask { display: inline-flex; align-items: center; min-height: 44px; font: 800 13px/1 var(--font-display); border: 2px solid #000; border-radius: var(--radius-pill); padding: 0 14px; background: #fff; color: #000; }

/* Showcase */
.hero { background: var(--acc, var(--brand)); color: #fff; padding: calc(16px + env(safe-area-inset-top)) 16px 18px; }
.hero .back { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font-body); opacity: .85; }
.hero b { display: block; font: 900 32px/1 var(--font-display); letter-spacing: var(--tracking-tight); margin-top: 12px; }
.hero .conf-logo { display: block; height: 56px; max-width: 70%; object-fit: contain; object-position: left; margin-top: 12px; background: #fff; border-radius: var(--radius-md); padding: 6px; }
.hero span { font: 600 14px/1.4 var(--font-body); opacity: .9; }
.mx-wrap { overflow-x: auto; }
.mx { width: 100%; border-collapse: collapse; font: 600 12.5px/1.2 var(--font-body); background: #fff; }
.mx th { font: 800 12px/1.1 var(--font-display); padding: 10px 4px 6px; text-align: center; color: #000; }
.mx th small { display: block; font: 800 13px/1 var(--font-cond); color: var(--brand-deep); margin-top: 3px; white-space: nowrap; }
.mx th.sold, .mx th.sold small { color: var(--ink-400); text-decoration: line-through; }
.mx td { padding: 8px 4px; border-top: 1px solid var(--border-muted); text-align: center; color: #000; }
.mx td:first-child { text-align: left; padding-left: 12px; color: var(--ink-700); min-width: 132px; }
.mx th, .mx td { padding-left: 6px; padding-right: 6px; }
.mx .y { color: var(--success); font-weight: 800; }
.mx .n { color: var(--ink-300); }

/* Forms */
label.f { display: grid; gap: 6px; font: 700 13.5px/1.2 var(--font-body); color: #000; }
input[type=email], input[type=search], input[type=text], select, textarea {
  width: 100%; font: 500 16px/1.3 var(--font-body); padding: 13px 14px; border: 2px solid #000; border-radius: var(--radius-md); background: #fff; color: #000;
}
textarea { min-height: 96px; resize: vertical; }
.stack { display: grid; gap: 12px; }
.flash { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius-md); font: 600 14px/1.4 var(--font-body); }
.flash.ok { background: var(--success-soft); color: #1f5f41; }
.flash.err { background: var(--danger-soft); color: #8f2c28; }
.flash.dev { background: var(--warning-soft); color: #5c4600; word-break: break-all; }
.lockbar { display: flex; align-items: center; gap: 10px; background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-md); padding: 10px 12px; font: 600 13px/1.35 var(--font-body); color: var(--brand-deep); }

/* Leads */
.ld { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 14px; }
.ld + .ld { border-top: 1px solid var(--border-muted); }
.ld b { font: 800 15.5px/1.2 var(--font-display); color: #000; }
.ld time { font: 700 11.5px/1 var(--font-mono); color: var(--text-subtle); align-self: center; }
.ld span { grid-column: 1 / -1; font: 600 12.5px/1.35 var(--font-body); color: var(--text-muted); }
.ld q { grid-column: 1 / -1; quotes: none; font: 500 13px/1.35 var(--font-body); color: var(--ink-700); }
.ld .tag { justify-self: start; grid-column: 1 / -1; margin-top: 4px; }

/* Login / terms */
.auth { min-height: 100dvh; display: flex; flex-direction: column; }
.auth .top { background: var(--surface-ink); color: #fff; padding: calc(28px + env(safe-area-inset-top)) 20px 24px; display: grid; gap: 10px; }
.auth .top img { width: 96px; height: 96px; background: #fff; padding: 8px; border-radius: var(--radius-lg); box-shadow: var(--offset-accent); margin-bottom: 6px; }
.auth .top b { font: 900 28px/1.05 var(--font-display); }
.auth .top span { color: var(--ink-300); font: 500 14.5px/1.4 var(--font-body); }
.auth .body { padding: 20px; display: grid; gap: 14px; }
.steps { display: grid; gap: 10px; margin-top: 6px; }
.steps div { display: flex; gap: 10px; align-items: flex-start; font: 600 14px/1.35 var(--font-body); color: var(--ink-700); }
.steps i { font: 800 12px/1 var(--font-display); font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); border: 2px solid #000; flex: none; }
.legal-body { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px; max-height: 50vh; overflow: auto; white-space: pre-line; font-size: 14.5px; }

/* Tab bar */
.tabbar { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; background: #fff; border-top: 1px solid var(--border-default); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
.tabbar a { display: grid; justify-items: center; gap: 3px; font: 700 10.5px/1 var(--font-body); color: var(--ink-500); padding: 4px 0; }
.tabbar a.on { color: #000; }
.tabbar a.on .i { color: var(--brand-deep); }
.tabbar a.off { opacity: .35; pointer-events: none; }
.fab { justify-self: center; width: 64px; height: 64px; margin-top: -30px; border-radius: 50%; background: var(--accent); border: 3px solid #000; box-shadow: var(--offset-sm); display: grid !important; place-items: center; color: var(--on-accent) !important; }
.fab .i { width: 30px; height: 30px; stroke-width: 2.4; }
.fab.off { background: var(--ink-200); box-shadow: none; }

/* Scanner (full screen) */
.scanner { position: fixed; inset: 0; background: #000; color: #fff; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1d1c22; }
.scanner .top { position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; }
.glass { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--radius-pill); padding: 9px 13px; font: 700 14px/1 var(--font-body); color: #fff; }
.glass .live { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.scanner .frame { position: absolute; z-index: 3; left: 50%; top: 42%; width: min(68vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 28px; box-shadow: 0 0 0 999px rgba(0,0,0,.5); pointer-events: none; }
.scanner .frame::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.scanner .hint { position: absolute; z-index: 4; left: 16px; right: 16px; top: calc(42% + min(34vw, 140px) + 14px); text-align: center; font: 600 14px/1.4 var(--font-body); }
.scanner .camerr { position: absolute; z-index: 4; left: 16px; right: 16px; top: 22%; background: rgba(0,0,0,.75); border-radius: 16px; padding: 14px; font-size: 14px; display: none; }
.scanner .tools { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 22px; }
.scanner .tools label { display: grid; justify-items: center; gap: 6px; font: 600 11.5px/1 var(--font-body); color: var(--ink-200); }
.round { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.round.close { background: #fff; color: #000; }
.sheet { position: absolute; z-index: 10; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); max-width: 544px; margin: 0 auto; background: #fff; color: var(--text-body); border-radius: 26px; padding: 16px; display: none; gap: 12px; box-shadow: var(--shadow-xl); max-height: 88dvh; overflow: auto; }
.sheet.on { display: grid; }
.res { display: flex; align-items: center; gap: 12px; }
.res .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; font: 900 22px/1 var(--font-display); background: var(--success-soft); color: #1f7d51; }
.res .ico.bad { background: var(--danger-soft); color: #b23a35; }
.res .ico.warn { background: var(--warning-soft); color: #9a7400; }
.res b { display: block; font: 900 24px/1.05 var(--font-display); color: #000; }
.res span { font: 600 13px/1.3 var(--font-body); color: var(--text-muted); }
.op { border-top: 1px solid var(--border-default); padding-top: 12px; display: grid; gap: 8px; }
.ck { display: flex; gap: 10px; align-items: flex-start; font: 700 15px/1.3 var(--font-body); color: #000; }
.ck input { width: 22px; height: 22px; accent-color: #000; margin: 0; flex: none; }
.disc { margin: 0; font: 500 12.5px/1.45 var(--font-body); background: var(--warning-soft); border-radius: var(--radius-sm); padding: 10px; color: var(--ink-700); white-space: pre-line; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.person b { display: block; font: 900 24px/1.1 var(--font-display); color: #000; }
.person div { font: 500 14.5px/1.4 var(--font-body); color: var(--ink-700); }
.badge-c { display: inline-block; margin-top: 6px; font: 700 12px/1 var(--font-body); color: #1f7d51; background: var(--success-soft); padding: 6px 9px; border-radius: var(--radius-pill); }
.saved { font: 600 12px/1 var(--font-body); color: var(--text-muted); text-align: right; }
/* #128: quick tag, one tap (scanner) or a radio group (lead page); 44 px targets */
.rate { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.rate legend { font: 700 13.5px/1.2 var(--font-body); color: #000; margin-bottom: 6px; padding: 0; }
.rate button, .rate label { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0; padding: 0 6px; border: 2px solid #000; border-radius: var(--radius-pill); background: #fff; color: #000; font: 800 13.5px/1.1 var(--font-display); text-align: center; cursor: pointer; }
.rate input { position: absolute; opacity: 0; pointer-events: none; }
.rate button[aria-pressed=true], .rate label:has(input:checked) { background: #000; color: #fff; }
.rate label:has(input:focus-visible), .rate button:focus-visible { outline: none; box-shadow: var(--ring); }
.sheet .more { font: 700 13.5px/1.2 var(--font-body); text-align: center; color: #000; min-height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: underline; }
.attendee { position: fixed; inset: 0; z-index: 40; background: #fff; color: #000; display: none; }
.attendee.on { display: flex; }
.attendee .flip { flex: 1; display: flex; flex-direction: column; }
.attendee.rot .flip { transform: rotate(180deg); }
.attendee .ahead { background: var(--brand-deep); color: #fff; padding: 26px 22px 20px; }
.attendee .ahead small { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.attendee .ahead b { display: block; font: 900 30px/1.05 var(--font-display); margin-top: 8px; }
.attendee .abody { flex: 1; padding: 20px 22px max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.attendee .abody p { margin: 0; font-size: 17px; }
.attendee .legal { font-size: 13px; color: var(--text-muted); }
.attendee .grow { flex: 1; }
.attendee .rotbtn { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 2; font: 600 12px/1 var(--font-body); padding: 7px 10px; border-radius: var(--radius-pill); border: 1px solid var(--ink-300); background: #fff; }
/* #205: the "Codice" panel is a card in the upper part of the screen, not a sheet on the bottom
   edge: the thumb never lands on the phone's own navigation bar, and the keyboard (which covers
   the lower half, and on iOS does not resize the page) never covers the field or the buttons.
   The backdrop covers the whole scanner, so a stray tap reaches nothing underneath. */
.manual { position: absolute; z-index: 11; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: flex-start; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 56px) 14px calc(env(safe-area-inset-bottom) + 24px); }
.manual.on { display: flex; }
.manual form { width: 100%; max-width: 480px; margin: 0 auto; background: #fff; color: #000; border-radius: 26px; padding: 22px 18px; display: grid; gap: 16px; box-shadow: var(--shadow-lg); }
.manual label { font: 800 19px/1.2 var(--font-display); }
.manual input { font: 700 22px/1.2 var(--font-mono); min-height: 58px; padding: 14px 16px; letter-spacing: .04em; }
.manual .split { gap: 14px; }
.manual .cta { min-height: 54px; }
/* #210: a phone in landscape (about 812×375) leaves about 200 px with the keyboard open, less than
   the stacked card: a compact card right under the top edge, field and buttons on one row. */
@media (orientation: landscape) and (max-height: 500px) {
  .manual { padding: calc(env(safe-area-inset-top) + 8px) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); }
  .manual form { max-width: 720px; padding: 12px 14px; gap: 8px 12px; grid-template-columns: 1fr auto; border-radius: 20px; }
  .manual label { grid-column: 1 / -1; font-size: 16px; }
  .manual input { min-height: 50px; padding: 10px 14px; font-size: 20px; min-width: 0; }
  .manual .split { gap: 12px; grid-template-columns: 1fr 1fr; min-width: 260px; }
  .manual .cta { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =====================================================================
   Desktop (PC / tablet landscape): same pages, wider canvas.
   - the bottom tab bar becomes a left sidebar with a labelled Scanner button;
   - content gets multi-column grids; dialogs become centred cards;
   - the attendee consent screen is not rotated (the screen is turned, not flipped).
   ===================================================================== */
.tabbar .brand, .fab-label, .desktop-hint { display: none; }

@media (min-width: 900px) {
  :root { --side: 232px; }
  body { background: var(--surface-sunken); }
  .app { max-width: 1180px; padding-left: var(--side); background: transparent; }
  .app.has-tabbar { padding-bottom: 0; }
  .app:not(.has-tabbar) { padding-left: 0; }
  .hdr { position: static; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 22px 28px 20px; }
  .hdr .title { font-size: 28px; }
  .hdr .switcher { max-width: 320px; }
  .hero { border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 26px 28px 24px; }
  .hero b { font-size: 40px; }
  .main { padding: 22px 28px 40px; }

  /* sidebar navigation */
  .tabbar {
    left: max(0px, calc(50% - 590px)); transform: none; top: 0; bottom: 0; width: var(--side); max-width: none;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 20px 14px; border-top: 0; border-right: 1px solid var(--border-default);
  }
  .tabbar .brand { display: flex; align-items: center; gap: 10px; min-height: 60px; font: 900 18px/1.1 var(--font-display); color: #000; padding: 0 6px 18px; } /* 42 px tap target even without a theme logo (#99) */
  .tabbar .brand img { width: 42px; height: 42px; }
  .tabbar a { display: flex; align-items: center; gap: 12px; justify-items: start; font: 700 15px/1 var(--font-body); padding: 12px 12px; border-radius: var(--radius-md); }
  .tabbar a:hover { background: var(--surface-soft); }
  .tabbar a.on { background: var(--brand-50); }
  .fab { order: -1; width: auto; height: auto; margin: 0 0 14px; border-radius: var(--radius-pill) !important; justify-content: center; display: flex !important; padding: 13px 16px !important; font: 800 16px/1 var(--font-display) !important; }
  .fab .i { width: 22px; height: 22px; }
  .fab-label { display: inline; }
  .tabbar .brand { order: -2; }

  /* content grids */
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cards .card + .card { margin-top: 0; }
  .carousel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .promo { width: auto; }
  .today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .today .head { display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; }
  .today .head b { font-size: 34px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
  .seg { max-width: 460px; }
  .ld { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: baseline; }
  .ld span { grid-column: 2; grid-row: 1; }
  .ld span + span { grid-row: 2; }
  .ld time { grid-column: 3; grid-row: 1; }
  .ld q { grid-column: 1 / -1; }
  form.stack { max-width: 560px; }
  .lockbar { max-width: 640px; }

  /* login / terms: centred card */
  .app:not(.has-tabbar) { max-width: 520px; padding-top: 6vh; }
  .auth { min-height: auto; border-radius: var(--radius-xl); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); margin: 0 !important; }

  /* scanner on a computer */
  .scanner .frame { width: 300px; top: 45%; }
  .scanner .hint { top: calc(45% + 165px); }
  .desktop-hint { display: block; position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); top: calc(45% + 200px); width: min(520px, 90vw); text-align: center; font: 500 13.5px/1.45 var(--font-body); color: var(--ink-300); margin: 0; }
  .sheet { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: 480px; }
  .attendee .flip { max-width: 640px; margin: 0 auto; width: 100%; }
  .manual { align-items: center; } /* no keyboard on screen: a centred card */
}

/* Lead detail (#32) */
a.ld { color: inherit; text-decoration: none; }
a.ld:hover, a.ld:focus-visible { background: var(--surface-muted, #f6f5f2); outline: none; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; padding: 14px; font: 600 14px/1.4 var(--font-body); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: #000; overflow-wrap: anywhere; }

/* Attendee consent language switch (#40) */
.langs { display: inline-flex; gap: 6px; margin-top: 10px; }
.langs[hidden] { display: none; }
.langs button { min-width: 48px; min-height: 40px; border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit; font: 800 14px/1 var(--font-body); }
.langs button[aria-pressed="true"] { background: #fff; color: #000; }
.langs button[hidden] { display: none; }

/* Offline scanner queue (#17) */
.offline-bar { position: absolute; left: 50%; transform: translateX(-50%); top: 64px; z-index: 5; margin: 0; padding: 8px 14px; border-radius: 999px; background: #fff3cd; color: #6b4e00; font: 700 13px/1.2 var(--font-body); box-shadow: var(--shadow-sm); max-width: calc(100% - 32px); text-align: center; }
.offline-bar[hidden] { display: none; }

/* Language switch (#80) */
.locale { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.locale button { min-width: 40px; min-height: 40px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: inherit; border-radius: 999px; font: 800 12px/1 var(--font-body); cursor: pointer; }
.locale button[aria-current] { background: #fff; color: #000; cursor: default; }
.auth .top .locale { margin: 12px auto 0; }

/* #93: QR "aggiungi dispositivo": as large as the phone allows, white quiet zone on any theme */
.device-qr { display: grid; gap: 12px; padding: 14px; justify-items: center; text-align: center; }
.device-qr .qr { width: min(100%, 320px); aspect-ratio: 1; background: #fff; }
.device-qr .qr svg { display: block; width: 100%; height: 100%; }

/* #206: contact without a badge. Fields of the base form (16 px text, ~50 px tall); the consent
   card shows the notice in the language picked by the radios (without :has() support every
   language stays visible, never none). Buttons inside the page flow, away from the tab bar. */
.contact .consent { padding: 4px 14px 14px; display: grid; gap: 10px; margin: 6px 0 0; min-width: 0; }
.contact .consent legend { margin: 0; padding: 10px 0 0; float: left; width: 100%; }
.contact .consent p { margin: 0; font-size: 15px; }
.contact .consent .legal { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.contact .consent .hand { font-weight: 700; color: #000; }
.clangs { display: flex; gap: 6px; }
.clangs label { display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; border: 2px solid #000; border-radius: var(--radius-pill); font: 800 14px/1 var(--font-body); cursor: pointer; }
.clangs input { position: absolute; opacity: 0; pointer-events: none; }
.clangs label:has(input:checked) { background: #000; color: #fff; }
.clangs label:has(input:focus-visible) { box-shadow: var(--ring); }
.consent:has(.clangs input[value=it]:checked) .notice:not([data-locale=it]),
.consent:has(.clangs input[value=en]:checked) .notice:not([data-locale=en]) { display: none; }
.contact .ck { min-height: 44px; align-items: center; }

/* Business-card photo (#207): on the lead page and in the gallery */
.cardphoto { padding: 14px; margin-top: 14px; }
.cardphoto .h { margin: 0 0 10px; }
.cardphoto img, .gallery img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-muted, #f6f5f2); }
.cardphoto img { margin-bottom: 12px; }
.cardphoto input[type="file"] { min-height: 44px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery > .card { display: block; margin: 0; padding: 8px; color: inherit; text-decoration: none; min-width: 0; }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; max-height: none; }
.gallery b { display: block; margin-top: 6px; font: 800 14px/1.25 var(--font-display); overflow-wrap: anywhere; }
.gallery .empty { grid-column: 1 / -1; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Offline contact on the scanner (#213): a short form in the sheet, which scrolls over the keyboard */
.sheet .cform { display: grid; gap: 4px; }
.sheet .cform label { font: 700 13px/1.2 var(--font-body); color: #000; margin-top: 4px; }
.sheet .cform input, .sheet .cform textarea { width: 100%; min-height: 44px; }
.sheet .cform textarea { min-height: 64px; }
.sheet .cform .disc:empty { display: none; }