/* The kiosk panel on a venue card.
 *
 * Its own file rather than more rules in app.html: the kiosk is one product of
 * three and it should be possible to work on it without editing the file the
 * whole app lives in. Uses the app's own tokens throughout, so it inherits any
 * change to the palette rather than drifting from it.
 */

.kiosk { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.kiosk h4 { margin: 0 0 4px; font-size: 13px; font-weight: 650; color: var(--ink); }
.kiosk .why { color: var(--faint); font-size: 13px; margin: 0 0 12px; }

/* The one thing somebody is looking for when they open this: the code. */
.kiosk .pairing {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 14px; border: 1px solid var(--accent); border-radius: 10px;
  background: var(--ground);
}
.kiosk .code {
  font-size: 30px; font-weight: 650; letter-spacing: 6px; color: var(--ink);
  line-height: 1;
}
.kiosk .pairing .expiry { color: var(--faint); font-size: 12.5px; }

.kiosk .blocked {
  padding: 12px; border: 1px dashed var(--line); border-radius: 10px;
  color: var(--muted); font-size: 13px;
}
.kiosk .blocked b { color: var(--ink); font-weight: 600; }

.kiosk .devices { margin-top: 10px; }
.kdev {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--ground);
}
.kdev + .kdev { margin-top: 8px; }
.kdev .grow { min-width: 190px; }
.kdev .kname { font-weight: 600; font-size: 14px; }
.kdev .kmeta { color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.kdev button { padding: 6px 12px; font-size: 12.5px; }

.kiosk .krow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.kiosk button { padding: 8px 14px; font-size: 13px; }

/* Settings are folded away. Most days nobody needs them. */
.ksettings { margin-top: 12px; }
.ksettings > summary {
  cursor: pointer; font-size: 13px; color: var(--muted);
  padding: 6px 0; list-style: none;
}
.ksettings > summary::-webkit-details-marker { display: none; }
.ksettings > summary::before { content: "\25B8 "; color: var(--faint); }
.ksettings[open] > summary::before { content: "\25BE "; }
.ksettings .body {
  padding: 12px; margin-top: 4px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--ground);
}
.ksettings .grid { display: flex; gap: 12px; flex-wrap: wrap; }
.ksettings label { flex: 1; min-width: 170px; font-size: 12.5px; color: var(--muted); }
.ksettings label input[type="text"],
.ksettings label input[type="password"],
.ksettings label select { margin-top: 4px; width: 100%; }
.ksettings .checks { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.ksettings .checks label {
  flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 7px;
  color: var(--ink); font-size: 13px;
}
.ksettings .note { color: var(--faint); font-size: 12px; margin-top: 10px; }
.ksettings .save { margin-top: 12px; display: flex; gap: 10px; align-items: center; }