/* Components shared by every screen. Each block lists its states. */

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: -.02em; font-size: 1.0625rem; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-mark .bg { fill: var(--accent); }
.brand-mark .fg { stroke: var(--on-accent); }
.brand small { font-weight: 500; color: var(--faint); letter-spacing: 0; font-size: var(--fs-xs); margin-left: 2px; }

/* ---------- Buttons ----------
   .btn (primary) · .btn-secondary · .btn-ghost · .btn-danger · .btn-report
   sizes: .btn-sm · .btn-lg · .btn-block   states: :disabled · [aria-busy="true"] (loading) */
.btn {
  --b-bg: var(--accent); --b-fg: var(--on-accent); --b-line: transparent; --b-hover: var(--accent-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-sm);
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-line);
  font-weight: 600; font-size: var(--fs-ui); line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative; user-select: none;
}
.btn:hover { background: var(--b-hover); }
.btn:active { transform: translateY(1px); }
.btn-secondary { --b-bg: var(--surface); --b-fg: var(--text); --b-line: var(--line-2); --b-hover: var(--surface-2); }
.btn-ghost { --b-bg: transparent; --b-fg: var(--text); --b-line: transparent; --b-hover: var(--surface-2); }
.btn-danger { --b-bg: var(--error); --b-fg: #fff; --b-hover: color-mix(in srgb, var(--error) 85%, #000); }
:root[data-theme="dark"] .btn-danger { --b-fg: #200a0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger { --b-fg: #200a0b; } }
/* WhatsApp: brand green with near-black text (9.4:1); the same in both themes */
.btn-wa { --b-bg: #25d366; --b-fg: #0b141a; --b-line: transparent; --b-hover: #1ebe5b; justify-content: center; font-weight: 650; }
.btn-wa .i { width: 1.25em; height: 1.25em; }
.btn-report { --b-bg: var(--surface); --b-fg: var(--error); --b-line: color-mix(in srgb, var(--error) 70%, transparent); --b-hover: var(--error-bg); font-weight: 550; }
.btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-lg { min-height: 52px; padding: 0 var(--s-6); font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--b-bg); }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--b-fg); border-right-color: transparent; animation: spin .7s linear infinite;
}
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2s; } }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 6px; }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.hint { font-size: var(--fs-xs); color: var(--faint); }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 110px; resize: vertical; line-height: var(--lh-ui); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input-code { font-variant-numeric: tabular-nums; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 48px; }
.input-wrap .reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; border-radius: var(--r-xs); }
.error-text { display: flex; gap: 6px; align-items: flex-start; color: var(--error); font-size: var(--fs-sm); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.rules { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--faint); margin: 0; padding: 0; list-style: none; }
.rules li { display: flex; gap: 6px; align-items: center; }
.rules li.ok { color: var(--success); }

/* ---------- Segmented control (prototype) ---------- */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.seg button { white-space: nowrap; flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 550; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--text); }

/* ---------- Chips (filters) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: .9375rem; }
.chip .count { color: var(--faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.chip[aria-pressed="true"] .count { color: var(--accent-text); }
.chip:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.badge-easy { background: var(--easy-bg); color: var(--easy); }
.badge-medium { background: var(--medium-bg); color: var(--medium); }
.badge-hard { background: var(--hard-bg); color: var(--hard); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-error { background: var(--error-bg); color: var(--error); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-accent { background: var(--accent-weak); color: var(--accent-text); }
.badge-new { background: var(--accent); color: var(--on-accent); }
/* Difficulty bars: three pills, filled by level, so colour is never the only signal */
.bars { display: inline-flex; gap: 2px; }
.bars i { width: 3px; height: 10px; border-radius: 2px; background: currentColor; opacity: .25; }
.bars.l1 i:nth-child(-n+1), .bars.l2 i:nth-child(-n+2), .bars.l3 i { opacity: 1; }
/* First Aid page chip */
.fa { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; vertical-align: 2px; text-decoration: none; }

/* ---------- Cards and panels ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.card-pad { padding: clamp(18px, 3vw, 28px); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.stat { padding: var(--s-4) var(--s-4) var(--s-3); }
.stat b { display: block; font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: var(--fs-sm); color: var(--muted); }
.section-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-bottom: var(--s-2); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.table .n { text-align: right; font-variant-numeric: tabular-nums; }
.table .code { font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 600; white-space: nowrap; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 10px 12px 12px; border: 0; background: none; color: var(--muted); font-weight: 550; white-space: nowrap; text-decoration: none; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--text); }
.tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* ---------- Progress ---------- */
.progress { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: inherit; transition: width var(--t-slow) var(--ease); }

/* ---------- Dialog ---------- */
.dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-float); }
.dialog::backdrop { background: var(--scrim); }
.dialog-body { padding: var(--s-6); display: grid; gap: var(--s-4); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.dialog[open] { animation: rise var(--t) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Toast ---------- */
.toasts { position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: var(--s-3); padding: 12px 12px 12px 16px; border-radius: var(--r); background: var(--text); color: var(--bg); box-shadow: var(--shadow-float); font-size: var(--fs-sm); font-weight: 500; animation: rise var(--t) var(--ease); }
.toast .i { color: var(--accent-text); }
.toast button { margin-left: auto; background: none; border: 0; color: inherit; opacity: .7; padding: 6px; border-radius: 6px; }

/* ---------- Tooltip ---------- */
.tip { position: relative; }
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 6px 10px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 5;
}

/* ---------- Banners and alerts ---------- */
.alert { display: flex; gap: var(--s-3); align-items: flex-start; padding: 12px 16px; border-radius: var(--r); background: var(--info-bg); color: var(--text); font-size: var(--fs-sm); }
.alert .i { color: var(--info); margin-top: 1px; }
.alert-warning { background: var(--warning-bg); } .alert-warning .i { color: var(--warning); }
.alert-error { background: var(--error-bg); } .alert-error .i { color: var(--error); }
.alert-success { background: var(--success-bg); } .alert-success .i { color: var(--success); }

/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; gap: var(--s-3); text-align: center; padding: var(--s-12) var(--s-6); color: var(--muted); }
.empty .i { width: 32px; height: 32px; color: var(--faint); }
.empty p { max-width: 36ch; }

/* ---------- Skeleton ---------- */
.skel { display: block; border-radius: 6px; background: var(--surface-2); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* ---------- App bar ---------- */
.bar { position: sticky; top: 0; z-index: var(--z-bar); background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) { .bar { backdrop-filter: saturate(1.4) blur(10px); } }
.bar-in { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; }

/* ---------- Watermark (content pages) ---------- */
.watermarked { position: relative; }
.watermark { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; user-select: none; }
.watermark span { position: absolute; white-space: nowrap; color: var(--watermark); font-size: 13px; font-weight: 600; transform: rotate(-24deg); letter-spacing: .02em; }

/* ---------- Report flag (used beside every notes subsection, question, card) ---------- */
.report-link { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--error) 65%, transparent); color: var(--error); background: transparent; font-size: var(--fs-xs); font-weight: 600; }
.report-link:hover { background: var(--error-bg); }

/* Report dialog: category choices */
.cats { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.cats legend { margin-bottom: 10px; padding: 0; }
@media (max-width: 420px) { .cats { grid-template-columns: minmax(0, 1fr); } }
.skel-block { display: grid; gap: 8px; }

/* Password fields with show/hide, live rules, access code input (sign-in pages and settings) */
.input-code { font-size: 1.25rem; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.input-code::placeholder { letter-spacing: .12em; font-weight: 500; }
.pw { position: relative; }
.pw .input { padding-right: 48px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: var(--r-xs); }
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }
.rule { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--faint); margin-top: 6px; }
.rule .i { opacity: .35; }
.rule.ok { color: var(--success); }
.rule.ok .i { opacity: 1; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.check a { text-underline-offset: 2px; }