/* ===== era dial ===== */
.era-dial{
  position:relative;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md);
  padding:18px 22px 16px;
  margin-bottom:28px;
}
.era-dial-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.era-dial-label{ font-family:var(--font-display); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }
.era-dial-current{ font-family:var(--font-mono); font-size:13px; color:var(--gold-2); }
.era-track{ position:relative; height:44px; display:flex; align-items:center; }
.era-line{ position:absolute; left:0; right:0; top:50%; height:2px; background:var(--panel-border); transform:translateY(-50%); }
.era-fill{ position:absolute; left:0; top:50%; height:2px; background:linear-gradient(90deg,var(--gold-1),var(--gold-2)); transform:translateY(-50%); transition:width .3s ease; }
.era-stops{ position:relative; display:flex; justify-content:space-between; width:100%; }
.era-stop{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; background:none; border:none; color:inherit;
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted); padding:0; z-index:1;
}
.era-stop .dot{ width:10px; height:10px; border-radius:50%; background:var(--panel-border); border:2px solid var(--bg); transition:all .15s ease; }
.era-stop.active .dot{ background:var(--gold-2); box-shadow:0 0 0 4px rgba(240,200,105,0.15); transform:scale(1.15); }
.era-stop.active{ color:var(--gold-2); }
.era-stop:hover .dot{ background:var(--gold-1); }

/* ===== mosaic tiles ===== */
.mosaic{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows:96px;
  gap:10px;
}
.tile{
  position:relative; overflow:hidden;
  border:1px solid var(--panel-border); background:var(--panel);
  border-radius:0; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px 18px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.tile:hover, .tile:focus-visible, .tile.selected{
  background:linear-gradient(90deg, rgba(30,167,224,0.28), rgba(30,167,224,0.06));
  border-color:var(--select-1);
  outline:none;
}
.tile:focus-visible{ outline:2px solid var(--select-2); outline-offset:-2px; }
.tile .eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; color:var(--text-muted); text-transform:uppercase; margin-bottom:6px; }
.tile h3{ font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:0.3px; text-transform:uppercase; line-height:1.15; }
.tile p{ font-size:12.5px; color:var(--text-muted); margin-top:4px; line-height:1.4; max-width:90%; }
.tile-icon{ position:absolute; top:16px; right:16px; opacity:0.5; }
.tile-icon svg{ width:22px; height:22px; stroke:var(--gold-2); }

.tile-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(30,167,224,0.30), transparent 65%);
  pointer-events:none;
}
.tile-glow::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(45,90,61,0.32), transparent 55%);
  pointer-events:none;
}

/* ===== generic panels / forms (used from Step 6+) ===== */
.panel{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius-md); padding:var(--space-4);
}
.field{ margin-bottom:var(--space-3); }
.field label{
  display:block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;
}
.field input, .field select{
  width:100%; background:var(--bg); border:1px solid var(--panel-border);
  color:var(--text); padding:10px 12px; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:14px;
}
.field input:focus, .field select:focus{ outline:2px solid var(--gold-2); border-color:transparent; }

.btn{
  font-family:var(--font-display); font-weight:600; letter-spacing:1px;
  text-transform:uppercase; font-size:13px; border:none; cursor:pointer;
  padding:12px 22px; min-height:44px; border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2)); color:#0a0e14;
  transition:filter .15s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn.secondary{
  background:transparent; color:var(--text); border:1px solid var(--panel-border);
}
.btn.secondary:hover{ background:var(--panel-hover); }

/* Desktop/tablet largo: piu respiro, tessere leggermente piu alte */
@media (min-width:1000px){
  .mosaic{ grid-auto-rows:108px; }
}
/* Tablet */
@media (max-width:900px) and (min-width:601px){
  .mosaic{ grid-template-columns:repeat(3, 1fr); }
}
/* Mobile: colonne strette, tessere piu comode al tocco */
@media (max-width:600px){
  .mosaic{ grid-template-columns:1fr 1fr; grid-auto-rows:88px; gap:8px; }
  nav.tabs button{ padding:9px 16px; font-size:12.5px; }
}
@media (max-width:380px){
  .mosaic{ grid-template-columns:1fr; }
}