/* ============================================================
   TOMNATIC FURNIR — sistema monocromatico, editoriale
   Nero su bianco · filetti sottili · le foto sono l'unico colore
   (portato 1:1 da _design_reference/components/tom.css)
   ============================================================ */

:root {
  --ink:      #111111;   /* testo */
  --ink-2:    #555555;   /* testo secondario */
  --line:     #BBBBBB;   /* filetti / bordi */
  --line-2:   #DDDDDD;   /* filetti chiari */
  --fill:     #F2F2F2;   /* superfici / totali */
  --bg:       #FFFFFF;   /* sfondo */
  --paper:    #F3EFE6;   /* V6 "Rivista": carta calda — SOLO dentro cornici/pannelli/tile/dropzone, mai sfondo pagina */

  --font-sans: "Inter Tight";
  --font-mono-raw: "Geist Mono";

  /* --font-sans / --font-mono-raw sono iniettati da next/font (Inter Tight, Geist Mono);
     qui li avvolgiamo nelle catene di fallback richieste ed esponiamo come --font / --mono */
  --font:     var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:     var(--font-mono-raw), ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: 16px;               /* mai sotto 14px (per Ivano) */
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";   /* sul root */
}

/* La pagina/app è avvolta in .tom per ereditare font, colore e feature settings */
.tom {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}
.tom img { display: block; max-width: 100%; }

/* ---------- LOGO (sempre nero, leggibile) ---------- */
.tom-logo { display: inline-flex; align-items: flex-end; gap: 10px; }
.tom-logo svg { display: block; height: 1em; width: auto; }
.tom-logo svg path, .tom-logo svg polygon { fill: var(--ink); }
/* chip bianco per tenere il logo nero leggibile sopra le foto */
.logo-chip {
  display: inline-flex; align-items: center;
  background: #fff; padding: 12px 18px;
}

/* ---------- tipografia di servizio ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-2);
}
.label-mono {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.rule { border: 0; border-top: 1px solid var(--ink); height: 0; }
.hair { border: 0; border-top: 1px solid var(--line); height: 0; }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 600; font-size: 15px;
  padding: 14px 26px; border: 1px solid var(--ink);
  cursor: pointer; transition: all .18s ease; white-space: nowrap;
  letter-spacing: .01em; background: var(--ink); color: #fff;
  text-decoration: none;
}
.btn:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-on-dark { background: #fff; color: var(--ink); border-color: #fff; }
.btn-on-dark:hover { background: transparent; color: #fff; }
.btn svg { width: 16px; height: 16px; }

/* ---------- switch lingua ---------- */
.lang { display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.lang button {
  font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); padding: 4px 7px; text-transform: uppercase;
  transition: color .15s ease;
}
.lang button:hover { color: var(--ink); }
.lang button[data-on="1"] { color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; }
.lang .sep { color: var(--line); }
.lang.on-dark button { color: rgba(255,255,255,.62); }
.lang.on-dark button:hover { color: #fff; }
.lang.on-dark button[data-on="1"] { color: #fff; }
.lang.on-dark .sep { color: rgba(255,255,255,.4); }

/* link discreto */
.dlink { color: var(--ink); text-decoration: none; display: inline-flex;
  align-items: center; gap: 8px; font-weight: 600; border-bottom: 1px solid var(--ink);
  padding-bottom: 3px; }
.dlink svg { width: 15px; height: 15px; }

/* immagini b/n opzionali */
.duo { filter: grayscale(1) contrast(1.04); }

::selection { background: var(--ink); color: #fff; }

/* Focus visibile, sobrio e monocromatico (a11y Ivano-friendly): contorno nero, no colore */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* ============================================================
   LAYOUT landing / login / app  —  canvas 1440 + responsive
   (le media query realizzano il par. "Responsive" del README)
   ============================================================ */

.v3-page { --pad: 80px; width: 100%; max-width: 1440px; margin: 0 auto; }
.v3-app  { --pad: 56px; width: 100%; max-width: 1440px; margin: 0 auto; }

/* barra-logo: dimensione logo e padding scendono su mobile.
   !important perché la var è impostata inline su .v3-logobar (inline batte il foglio). */
@media (max-width: 600px) {
  .v3-logobar { --v3-logo-size: 26px !important; }
  .v3-logobar-inner { --v3-bar-pad: 20px !important; }
}

/* ---- LANDING ---- */
.v3-hero { height: 880px; }
.v3-hero-h1 { font-size: clamp(40px, 6vw, 86px); }
.v3-village { height: 520px; }
.v3-access { height: 460px; }

.v3-about-grid { display: grid; grid-template-columns: 260px 1fr; gap: 64px; }
.v3-mosaic-a { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.v3-mosaic-b { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; }

.v3-stat-3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.v3-stat-4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }

/* mosaico → 1 colonna, bande più basse */
@media (max-width: 900px) {
  .v3-page { --pad: 24px; }
  .v3-app  { --pad: 20px; }
  .v3-mosaic-a, .v3-mosaic-b { grid-template-columns: 1fr; }
  .v3-about-grid { grid-template-columns: 1fr; gap: 20px; }
  .v3-hero { height: 560px; }
  .v3-village { height: 420px; }
  .v3-access { height: 380px; }
  .v3-stat-3, .v3-stat-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .v3-stat-3, .v3-stat-4 { grid-template-columns: 1fr; }
  .v3-footer { flex-wrap: wrap; gap: 24px; }
}

/* ---- LOGIN ---- */
.v3-login-card { width: 480px; max-width: 92vw; }
@media (max-width: 480px) {
  .v3-login-card { padding: 36px 24px 32px !important; }
}

/* ---- APP ---- */
.v3-appbody { display: grid; grid-template-columns: 276px 1fr; min-height: 760px; }
.v3-doctypes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) {
  .v3-doctypes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .v3-appbody { grid-template-columns: 1fr; min-height: 0; }
  .v3-appbody > nav { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .v3-doctypes { grid-template-columns: 1fr; }
}

/* Review & calculate (STEP 6): griglia campi 2→1 colonna */
.v3-review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px) {
  .v3-review-grid { grid-template-columns: 1fr; }
}

/* STEP 9 — card numeriche di "Totali & Vendite" (monocromo, 4→2→1 colonne) */
.v3-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .v3-stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .v3-stat-cards { grid-template-columns: 1fr; } }

/* ============================================================
   V6 · RIVISTA — landing editoriale + chrome app.
   Foto SEMPRE in cornice (passe-partout), carta solo dentro i pannelli,
   nessun radius, nessuna ombra sui contenuti.
   ============================================================ */

/* lastra centrale, margini larghi da rivista (1440 di riferimento) */
.v6-page { width: 100%; max-width: 1440px; margin: 0 auto; --m: 128px; --lead: 196px; }
.v6-pad  { padding-left: var(--m); padding-right: var(--m); }
.v6-lead { padding-left: var(--lead); padding-right: var(--lead); }

/* griglie editoriali */
.v6-hero   { display: grid; grid-template-columns: 1.55fr 1fr; gap: 72px; align-items: end; }
.v6-about  { display: grid; grid-template-columns: 1fr 1.12fr; gap: 80px; align-items: center; }
.v6-where  { display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; align-items: end; }
.v6-stat4  { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.v6-row    { display: grid; grid-template-columns: 64px 248px 1fr; gap: 40px; align-items: center; }
.v6-row-txt { display: flex; justify-content: space-between; align-items: center; gap: 48px; }

/* responsive (il par. "Responsive" del README: breakpoint concordati) */
@media (max-width: 1120px) { .v6-page { --m: 56px; --lead: 56px; } }
@media (max-width: 900px) {
  .v6-hero, .v6-about, .v6-where { grid-template-columns: 1fr; gap: 40px; }
  .v6-stat4 { grid-template-columns: repeat(2, 1fr); }
  .v6-row { grid-template-columns: 44px 1fr; }
  .v6-row .v6-row-thumb { display: none; }
  .v6-row-txt { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 640px) {
  .v6-page { --m: 22px; --lead: 22px; }
  .v6-stat4 { grid-template-columns: 1fr; }
}

/* login a 2 colonne con lastra contenuta a destra */
.v6-login { display: grid; grid-template-columns: 1.04fr 1fr; min-height: 100vh; }
@media (max-width: 860px) {
  .v6-login { grid-template-columns: 1fr; }
  .v6-login-plate { display: none; }
}

/* app: corpo sidebar + contenuto (bordi ink come da mock V6) */
.v6-appbody { display: grid; grid-template-columns: 276px 1fr; min-height: 720px; border-top: 1px solid var(--ink); }
.v6-doctypes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .v6-doctypes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .v6-appbody { grid-template-columns: 1fr; min-height: 0; }
  .v6-appbody > nav { border-right: 0 !important; border-bottom: 1px solid var(--ink); }
}
@media (max-width: 520px) { .v6-doctypes { grid-template-columns: 1fr; } }

/* ============================================================
   TOUCH-FIRST · iPad (profilo utente ~70 anni)
   Tap target ≥44px, nessuna interazione hover-only, niente
   hover "appiccicato" dopo il tocco. Le safe-area iOS sono
   applicate su testata/footer nelle pagine (env(safe-area-inset-*)).
   ============================================================ */

/* Tap target minimi: i bottoni restano alti ≥44px anche quando il
   padding è ridotto inline (testate di landing/app/login). */
.btn { min-height: 44px; }
.dlink { min-height: 44px; align-items: center; }

/* Switch lingua: ogni voce diventa un bersaglio comodo da toccare. */
.lang button {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Su dispositivi senza puntatore fine (touch): l'hover NON si applica
   — così non resta "acceso" dopo un tocco — e il feedback passa a :active. */
@media (hover: none) {
  .btn:hover { background: var(--ink); }
  .btn-ghost:hover { background: transparent; color: var(--ink); }
  .btn-on-dark:hover { background: #fff; color: var(--ink); }
  .lang button:hover { color: var(--ink-2); }
  .lang.on-dark button:hover { color: rgba(255, 255, 255, 0.62); }
  .lang button[data-on="1"]:hover { color: var(--ink); }
  .lang.on-dark button[data-on="1"]:hover { color: #fff; }

  .btn:active { background: #000; }
  .btn-ghost:active { background: var(--ink); color: #fff; }
  .btn-on-dark:active { background: transparent; color: #fff; }
  .lang button:active { color: var(--ink); }
}