/* The web platform's own styles (arx-free 1.11.0, Phase 2d) - on top of the kiosk's tokens.css / app.css, which make the
   kiosk's blocks (the report, the coach, the history) look here as they do there. The web is used on a phone or a desktop,
   not on a 1920 px kiosk screen: the page scrolls, the header wraps, the footer holds the way back and one action. */

html, body { height: auto; min-height: 100%; overflow-y: auto; }
body { display: flex; flex-direction: column; }
.screen { flex: 1 1 auto; overflow: visible; padding: 16px; max-width: 1100px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.header { position: sticky; top: 0; z-index: 5; flex-wrap: wrap; row-gap: 6px; }
.header .left, .header .right { flex-wrap: wrap; }
.footer { position: sticky; bottom: 0; z-index: 5; }
.web-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.web-nav a { display: inline-block; padding: 10px 14px; border-radius: 12px; background: var(--panel, #fff); color: inherit; text-decoration: none; border: 1px solid var(--line, #ddd); font-weight: 600; }
.web-nav a.current { background: var(--headline, #1f5f8b); color: #fff; border-color: var(--headline, #1f5f8b); }
.web-card { background: var(--panel, #fff); border: 1px solid var(--line, #ddd); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.web-card h2 { margin: 0 0 10px; font-size: 1.2rem; }
.web-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.web-photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: #dfe4e4; }
.web-form { display: grid; gap: 12px; max-width: 480px; }
.web-form label { display: grid; gap: 4px; font-weight: 600; }
.web-form input, .web-form select, .web-form textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, #ccc); }
.web-form label.row { display: flex; align-items: center; gap: 10px; font-weight: 500; }   /* a checkbox next to its words */
.web-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.web-table th, .web-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #e3e3e3); vertical-align: top; }
.web-table tr.clickable { cursor: pointer; }
.web-login { max-width: 420px; margin: 40px auto; }
.web-login .brand-hero { justify-content: center; }
.web-muted { color: var(--muted, #667); }
.web-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; letter-spacing: 0.06em; word-break: break-all; }
.web-qr { width: 220px; height: 220px; image-rendering: pixelated; }
.web-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.85rem; background: #e8eef3; }
.web-badge.warn { background: #fde7c3; }
.web-badge.danger { background: #f7d4d4; }
.web-badge.ok { background: #d8f0dc; }
@media (max-width: 640px) {
  .screen { padding: 10px; }
  .header .hbtn { font-size: 0.9rem; padding: 6px 8px; }
}