/**
 * Impronta — TimePicker styles
 *
 * Design allineato a .form-input del sito (assets/css/app.css:94).
 * Guscio identico: stesso padding, border, radius, background, font Inter.
 * Il toggle 24h/12h e' un piccolo pill contenuto DENTRO il guscio, a destra.
 *
 * Token usati (esistono davvero, verificati in tokens.css):
 *   --bg, --ink, --ink30, --ink40, --ink06, --border, --gold, --terra,
 *   --r (border-radius 8px), --font (Inter).
 */

.tp{ display:block; width:100%; }

/* ── GUSCIO: identico a .form-input ─────────────────────────────────────── */
.tp__field{
  display:flex; align-items:center; gap:2px;
  width:100%;
  padding:12px 16px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
  font-family:var(--font);
  font-size:15px;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.tp__field:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(181,144,58,.12);
}
.tp.is-error .tp__field{ border-color:var(--terra); }

/* ── Input HH / MM: nessun bordo, tipografia del guscio ─────────────────── */
.tp__hh, .tp__mm{
  border:0; background:transparent; padding:0;
  font:inherit;              /* eredita Inter 15px dal guscio */
  color:inherit;
  text-align:center;
  width:2.2em;
  outline:none;
  -moz-appearance:textfield;
}
.tp__hh::-webkit-outer-spin-button, .tp__hh::-webkit-inner-spin-button,
.tp__mm::-webkit-outer-spin-button, .tp__mm::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.tp__hh::placeholder, .tp__mm::placeholder{
  color:var(--ink30);
}

.tp__sep{
  color:var(--ink40);
  padding:0 2px;
  user-select:none;
}

/* ── AM/PM: piccolo select minimale ─────────────────────────────────────── */
.tp__ampm{
  margin-left:10px;
  padding:2px 20px 2px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:transparent;
  font:inherit; font-size:12px;
  color:var(--ink);
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 10px) 55%, calc(100% - 7px) 55%;
  background-size:3px 3px, 3px 3px;
  background-repeat:no-repeat;
}
.tp__ampm:focus{ outline:none; border-color:var(--gold); }
.tp__ampm[hidden]{ display:none !important; }

/* ── Toggle 24h / 12h: piccolo, dentro il guscio, a destra ──────────────── */
.tp__toggle{
  display:inline-flex;
  margin-left:auto;              /* spinge il toggle a destra dentro il guscio */
  background:var(--ink06);
  border-radius:6px;
  padding:2px;
}
.tp__toggle-btn{
  appearance:none; border:0; background:transparent;
  padding:3px 8px;
  font:inherit; font-size:10px;
  letter-spacing:.06em;
  color:var(--ink40);
  cursor:pointer;
  border-radius:4px;
  transition:color .15s, background .15s;
  line-height:1.2;
}
.tp__toggle-btn:hover:not(.is-active){ color:var(--ink); }
.tp__toggle-btn.is-active{
  background:var(--bg);
  color:var(--gold);
}
.tp__toggle-btn:focus-visible{
  outline:1px solid var(--gold); outline-offset:1px;
}

/* ── Responsive: su schermi molto stretti il layout resta orizzontale ma
   il toggle si stringe. Nessuna new-line: il guscio deve rimanere UN campo. */
@media (max-width:420px){
  .tp__ampm{ margin-left:6px; padding:2px 18px 2px 6px; }
  .tp__toggle-btn{ padding:3px 6px; font-size:9.5px; }
}