/*
 * MastroDiChiavi panel (story 9). Only the erweb palette (mastrodichiavi.md §Palette), white and
 * light tints of the palette (one palette colour mixed with white, at most 25%; here 12%). Every
 * colour is a :root variable; no other colour literal appears below. Contrast, as checked by
 * tests/PanelUiTest.php: every text pair >= 4.5:1 (>= 3:1 only for large bold text), focus
 * outlines >= 3:1 on their background. Current values: blu-scuro on white 7.4:1 and on the tints
 * >= 6.1:1; white on ottanio 5.1:1, on viola 5.3:1; verde on white 3.2:1 only for the large bold
 * counter; arancione (3.0:1 on white) and blu-avio never carry text; in the ottanio header the
 * focus outline is white (5.1:1).
 */
:root {
  --erw-blu-avio: #6A90B4;
  --erw-ottanio: #007A86;
  --erw-blu-scuro: #2D5886;
  --erw-arancione: #ED711F;
  --erw-verde: #48A14D;
  --erw-viola: #8750C6;
  --erw-bianco: #FFFFFF;
  --erw-blu-avio-chiaro: #EDF2F6;
  --erw-ottanio-chiaro: #E0EFF0;
  --erw-arancione-chiaro: #FDEEE4;
  --erw-verde-chiaro: #E9F4EA;
  --erw-viola-chiaro: #F1EAF8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--erw-blu-avio-chiaro);
  color: var(--erw-blu-scuro);
}
[hidden] { display: none !important; }

/* Header: ottanio band, title and IT/EN selector. */
.top { background: var(--erw-ottanio); color: var(--erw-bianco); }
.top .bar {
  max-width: 34rem; margin: 0 auto; padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.top h1 { margin: 0; font-size: 1.15rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.lang { display: flex; gap: .25rem; flex: none; }
.lang button {
  min-width: 2.75rem; min-height: 2.25rem; padding: .25rem .5rem;
  font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--erw-bianco); background: var(--erw-ottanio);
  border: 2px solid var(--erw-bianco); border-radius: 4px; cursor: pointer;
}
.lang button[aria-pressed="true"] { color: var(--erw-ottanio); background: var(--erw-bianco); }
.top button:focus-visible { outline-color: var(--erw-bianco); }

main { max-width: 34rem; margin: 0 auto; padding: 1rem; }
h2 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
h2:first-child { margin-top: 0; }
a { color: var(--erw-ottanio); font-weight: 600; }

.card {
  background: var(--erw-bianco);
  border: 1px solid var(--erw-blu-avio);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 0 0 1rem;
}

/* Forms */
label { display: block; margin: 0 0 1rem; }
label span { display: block; font-weight: 600; margin-bottom: .25rem; }
input {
  width: 100%; padding: .65rem; font: inherit; font-size: 1rem;
  color: var(--erw-blu-scuro); background: var(--erw-bianco);
  border: 1px solid var(--erw-blu-scuro); border-radius: 4px;
}
input:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--erw-arancione); outline-offset: 2px;
}
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
.primary {
  display: block; width: 100%; padding: .75rem; text-align: center; text-decoration: none;
  font-size: 1rem; font-weight: 700;
  color: var(--erw-bianco); background: var(--erw-ottanio);
  border: 0; border-radius: 4px;
}

/* Messages and warnings: orange accent, dark blue text. */
.msg, .warn {
  margin: 0 0 1rem; padding: .75rem 1rem;
  color: var(--erw-blu-scuro); background: var(--erw-arancione-chiaro);
  border-left: 5px solid var(--erw-arancione); border-radius: 4px;
  font-weight: 600;
}
.warnings:empty { display: none; }
.done {
  margin: 0 0 1rem; padding: .75rem 1rem; font-weight: 600;
  color: var(--erw-blu-scuro); background: var(--erw-verde-chiaro);
  border-left: 5px solid var(--erw-verde); border-radius: 4px;
}

/* Counters */
.counters {
  background: var(--erw-bianco);
  border: 2px solid var(--erw-verde);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.counters p { margin: 0; }
.counters .valid { font-size: 1.1rem; font-weight: 600; }
.counters .valid strong {
  display: block; color: var(--erw-verde);
  font-size: 2.5rem; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums;
}
.counters .small { margin-top: .35rem; }
.counters .small strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.counters.last { border-color: var(--erw-arancione); }

/* Authorized IPs */
.ips { list-style: none; margin: 0; padding: 0; }
.ips li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem;
  padding: .4rem 0; border-bottom: 1px solid var(--erw-blu-avio);
}
.ips li:last-child { border-bottom: 0; }
.ips code { font-size: .95rem; overflow-wrap: anywhere; }
.state {
  padding: .1rem .5rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  color: var(--erw-blu-scuro); background: var(--erw-verde-chiaro); border: 1px solid var(--erw-verde);
}
.state.pending { background: var(--erw-arancione-chiaro); border-color: var(--erw-arancione); }

/* Permission badges */
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.badges li {
  padding: .25rem .75rem; border-radius: 999px; font-weight: 700;
  color: var(--erw-bianco); background: var(--erw-viola);
  overflow-wrap: anywhere;
}

.note {
  margin: 1.25rem 0 1rem; padding: .75rem 1rem;
  background: var(--erw-ottanio-chiaro); border-radius: 4px;
}

/* "Termina ora": white, orange border, dark blue text. */
.end {
  display: block; width: 100%; padding: .75rem; font-size: 1rem; font-weight: 700;
  color: var(--erw-blu-scuro); background: var(--erw-bianco);
  border: 2px solid var(--erw-arancione); border-radius: 4px;
}

/* Activation */
.qr svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 1rem auto; }
.user { text-align: center; font-weight: 700; }
.key span { display: block; font-weight: 600; margin-bottom: .25rem; }
.key code {
  display: block; padding: .5rem; text-align: center; font-size: 1.05rem; letter-spacing: .05em; word-break: break-all;
  background: var(--erw-viola-chiaro); border-radius: 4px;
}

@media (max-width: 400px) {
  main { padding: .75rem; }
  .card { padding: 1rem; }
  .top .bar { padding: .6rem .75rem; }
  .top h1 { font-size: 1rem; }
  .counters .valid strong { font-size: 2.1rem; }
}