/* Area: traineeapp (feature module). Global names in this file start with the area prefix. */

/* language button (top bar and login page) */
.xtap-lang { flex: none; min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08);
  color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; margin-right: 6px; }
.xtap-lang:hover { background: rgba(255, 255, 255, .16); }
.xtap-lang.login { margin: 10px auto 0; display: block; }
.xtap-lang:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* offline bar */
.xtap-offline { display: flex; gap: 8px; align-items: center; background: var(--gold-soft); color: var(--ink); border: 1px solid var(--gold); border-radius: 12px;
  padding: 10px 12px; margin: 8px 0; font-size: 15px; font-weight: 600; }
.xtap-offline[hidden] { display: none; }
.xtap-offline svg { flex: none; color: #8a6420; }
.xtap-sent { margin: 8px 0; }

/* home: the old small "Today" card is replaced by the Today card at the top */
.t-home.xtap-has-today > section.t-card[aria-label="Today"]:not(.xtap-today) { display: none; }
.xtap-top { display: flex; flex-direction: column; gap: 0; }
.xtap-today { border-left: 5px solid var(--gold); }
.xtap-today-head { display: flex; align-items: center; gap: 8px; }
.xtap-today-head svg { color: var(--gold); flex: none; }
.xtap-today-head .t-h { margin: 0; }
.xtap-today-class { font-size: 17px; margin: 8px 0 6px; overflow-wrap: anywhere; }
.xtap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.xtap-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); border-radius: 999px; padding: 4px 10px; font-size: 14px; }
.xtap-chip.ok { background: var(--leaf-soft); color: var(--leaf); font-weight: 600; }
.xtap-chip.bad { background: var(--red-soft); color: var(--red); font-weight: 600; }
.xtap-bring-box { background: var(--navy-soft); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.xtap-bring-box.eve { background: var(--gold-soft); }
.xtap-bring { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.xtap-bring li { display: flex; gap: 6px; align-items: flex-start; font-size: 15px; }
.xtap-bring li svg { flex: none; margin-top: 3px; color: var(--leaf); }
.xtap-today-tests { display: grid; gap: 6px; margin: 10px 0 4px; }
.xtap-testlink { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); background: var(--paper); }
.xtap-testlink svg { color: var(--gold); flex: none; }
.xtap-testlink span:nth-child(2) { flex: 1; font-weight: 600; }
.xtap-go { color: #fff; background: var(--navy); padding: 6px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; }
.xtap-next { margin-top: 10px; border-top: 1px dashed var(--line-strong); padding-top: 10px; }
.xtap-next p { margin: 4px 0; overflow-wrap: anywhere; }
.xtap-video-btn { margin-top: 6px; }

/* reminders and cards */
.xtap-rems { display: grid; gap: 8px; margin: 8px 0; }
.xtap-rem { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-weight: 600;
  background: var(--gold-soft); color: var(--ink); border: 1px solid var(--gold); }
.xtap-rem.test { background: var(--navy-soft); border-color: var(--line-strong); }
.xtap-rem span { flex: 1; }
.xtap-docs-card { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-left: 5px solid var(--red); }
.xtap-docs-card small { display: block; color: var(--mute); }
.xtap-bday { text-align: center; background: linear-gradient(160deg, #fff6e0, #fde9ef); border: 1px solid var(--gold); }
.xtap-bday h2 { font-size: 24px; margin: 6px 0; color: #8a2846; }
.xtap-bday-art { color: #c2457a; }
@media (prefers-color-scheme: dark) { .xtap-bday { background: linear-gradient(160deg, #2b2340, #3a2036); } .xtap-bday h2 { color: #ffc3d6; } }
.xtap-done { border-left: 5px solid var(--leaf); }
.xtap-btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* stars / badges */
.xtap-badges { display: grid; gap: 8px; }
.xtap-badge { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--chip); }
.xtap-badge.on { background: var(--gold-soft); border: 1px solid var(--gold); }
.xtap-badge-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--paper); color: var(--mute); }
.xtap-badge.on .xtap-badge-ic { background: var(--gold-grad); color: #fff; }
.xtap-badge small { display: block; color: var(--mute); font-size: 13.5px; }
.xtap-badge .bar { margin-top: 4px; }
.xtap-badge-ok { display: inline-flex; gap: 4px; align-items: center; color: var(--leaf); font-weight: 700; font-size: 13px; flex: none; }

/* leaderboard */
.xtap-lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xtap-lb-list li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--chip); }
.xtap-lb-list li.me { background: var(--gold-soft); border: 1px solid var(--gold); font-weight: 700; }
.xtap-lb-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; flex: none; }

/* safety */
.xtap-safety { border-left: 5px solid var(--red); }
.xtap-calls { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (max-width: 380px) { .xtap-calls { grid-template-columns: 1fr; } }
.xtap-call { display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
  background: var(--navy); color: #fff; }
.xtap-call.help { background: #a3263f; }
.xtap-call.sos { background: #6b0f1f; }
.xtap-call span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.xtap-call small { opacity: .85; font-size: 13px; overflow-wrap: anywhere; }

/* tour */
.xtap-tour { position: fixed; inset: 0; z-index: 90; background: rgba(7, 21, 58, .78); display: grid; place-items: center; padding: 16px; }
.xtap-tour-card { width: min(420px, 100%); background: var(--paper); color: var(--ink); border-radius: 20px; padding: 22px 20px; text-align: center; box-shadow: var(--shadow); }
.xtap-tour-kicker { color: #a37b2c; letter-spacing: .08em; font-size: 13px; font-weight: 700; margin: 0; text-transform: uppercase; }
.xtap-tour-ic { width: 96px; height: 96px; border-radius: 50%; margin: 14px auto; display: grid; place-items: center; background: var(--gold-grad); color: #fff; }
.xtap-tour-card h2 { font-size: 24px; margin: 6px 0; }
.xtap-tour-card p { font-size: 17px; line-height: 1.5; }
.xtap-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0; }
.xtap-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.xtap-dots span.on { background: var(--gold); width: 26px; border-radius: 6px; }
.xtap-tour-btns { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.xtap-tour-btns .btn.big { flex: 1; }

/* module rating */
.xtap-rate p { margin: 0 0 4px; font-weight: 600; }
.xtap-rate-btns { display: flex; gap: 4px; }
.xtap-star { width: 48px; height: 48px; font-size: 28px; border: 0; background: transparent; color: var(--line-strong); cursor: pointer; border-radius: 10px; }
.xtap-star.on { color: var(--gold); }
.xtap-star:focus-visible { outline: 3px solid var(--gold); }

/* screens */
.xtap-area { display: block; }
.xtap-vid-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.xtap-vid-top small { display: block; color: var(--mute); }
.xtap-vid-no { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; flex: none; }
.xtap-vid.locked { opacity: .75; }
.xtap-vid.locked .xtap-vid-no { background: var(--line-strong); }
.xtap-vid-frame { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 8px; }
.xtap-vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xtap-voice-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.xtap-voice { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xtap-voice audio { max-width: 100%; }
.btn.rec { background: var(--red); color: #fff; border-color: var(--red); }
.xtap-q p { margin: 6px 0; overflow-wrap: anywhere; }
.xtap-ans { background: var(--leaf-soft); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.xtap-ans p { margin: 2px 0 0; }
.xtap-wait { color: #8a6420; font-weight: 600; }
.xtap-msg { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
.xtap-msg.new { border-left: 5px solid var(--gold); }
.xtap-msg p { margin: 2px 0; }
.xtap-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.xtap-grv-row { border-top: 1px solid var(--line); padding: 8px 0; }
.xtap-grv-row p { margin: 4px 0 0; }
.xtap-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.xtap-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.xtap-req { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding: 8px 0; }
.xtap-req small { display: block; color: var(--mute); overflow-wrap: anywhere; }
.xtap-req p { flex-basis: 100%; margin: 0; }
.xtap-doc-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xtap-prev img { max-width: 100%; max-height: 260px; border-radius: 10px; margin-top: 8px; display: block; }
.xtap-askpage { display: flex; justify-content: center; margin: 12px auto 0; max-width: 420px; }

/* staff */
.xtap-qhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.xtap-qhead small { flex: 1; min-width: 160px; }
.xtap-qcard.open { border-left: 4px solid var(--gold); }
.xtap-grvcard.urgent { border-left: 4px solid var(--red); }
.xtap-grvtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.xtap-diff { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.xtap-diff del { color: var(--mute); }
.xtap-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .xtap-extra-grid { grid-template-columns: 1fr; } }
.xtap-histtable td { vertical-align: top; }
.xtap-docreq { border-top: 1px solid var(--line); padding-top: 8px; }

/* My profile = full registration form */
.xfp-sec > summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; font-size: 15px; }
.xfp-sec > summary::-webkit-details-marker { display: none; }
.xfp-sec > summary::after { content: '▾'; color: var(--mute); }
.xfp-sec:not([open]) > summary::after { content: '▸'; }
.xfp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.xfp-grid .xtap-check { grid-column: 1 / -1; }
.xfp-wait { display: block; color: #8a5a00; font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.xfp-meter { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 8px 0 4px; }
.xfp-meter > div { height: 100%; background: linear-gradient(90deg, #C29A45, #1E6B3E); border-radius: 6px; }
.xfp-doc { border-top: 1px solid var(--line); padding-top: 10px; }
.xfp-doc:first-child { border-top: 0; padding-top: 0; }
.xfp-doc .xtap-doc-top small { display: block; }
.xfp-doc [hidden], .xfp-sec [hidden] { display: none !important; }
.xfp-req { color: #B3261E; font-weight: 700; }
.xfp-miss { border-color: #B3261E !important; box-shadow: 0 0 0 2px rgba(179,38,30,.15); }
.xfp-thumb img { display: block; max-width: 100%; max-height: 180px; border-radius: 10px; margin: 8px 0 2px; border: 1px solid var(--line); }