/* psssb-typing.css — scoped to the PSSSB practice widget only.
   Reuses the site's existing --tte-* theme tokens; adds no new global rule. */

.psssb-panel {
  background: var(--tte-surface, #fff);
  border: 1px solid var(--tte-border, #d7dee6);
  border-radius: var(--tte-radius-lg, 14px);
  padding: 20px;
  margin: 18px 0;
}

/* Entry screen only -- a clearly distinct accent border so the practice
   widget reads as its own interactive zone, not another content block. */
.psssb-panel-highlight {
  border-width: 2px;
  border-style: solid;
  border-color: var(--tte-primary, #1a56db) !important; /* site's .tte-settings sets border-color !important */
  box-shadow: 0 0 0 4px var(--tte-primary-soft, rgba(26, 86, 219, .08));
}
.psssb-panel-highlight select,
.psssb-panel-highlight input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.psssb-test-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.psssb-test-lang { font-weight: 600; font-size: 1.05rem; }
.psssb-kbd-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tte-gold-soft, #fdf2d0);
  color: var(--tte-navy, #10261f);
  vertical-align: middle;
}
.psssb-timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tte-primary, #1a56db);
  min-width: 4ch;
  text-align: right;
}

.psssb-chunk-progress {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--tte-muted, #667085);
  font-weight: 500;
}

.psssb-passage {
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--tte-input-bg, #f6f8fa);
  border: 1px solid var(--tte-border, #d7dee6);
  border-radius: var(--tte-radius-md, 10px);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--tte-ink, #1a1f27);
}
.psssb-gurmukhi { font-family: 'Noto Sans Gurmukhi', 'Noto Sans', sans-serif; }

.psssb-input {
  width: 100%;
  margin-top: 10px;
  min-height: 110px;
  resize: vertical;
  font-size: 1.05rem;
  line-height: 1.7;
  padding: 12px 14px;
  border-radius: var(--tte-radius-md, 10px);
  border: 1px solid var(--tte-border, #d7dee6);
  background: var(--tte-surface, #fff);
  color: var(--tte-ink, #1a1f27);
  font-family: inherit;
}
.psssb-input:focus {
  outline: none;
  border-color: var(--tte-primary, #1a56db);
  box-shadow: var(--tte-focus-ring, 0 0 0 3px rgba(26,86,219,.18));
}

.psssb-chunk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.psssb-chunk-hint { font-size: 0.78rem; color: var(--tte-muted, #667085); text-align: center; }

.psssb-kbd-toggle {
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--tte-primary, #1a56db);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
.psssb-kbd-panel {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--tte-input-bg, #f6f8fa);
  border-radius: var(--tte-radius-md, 10px);
  font-size: 0.85rem;
}
.psssb-kbd-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.psssb-kbd-table th, .psssb-kbd-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--tte-border, #d7dee6);
  font-size: 0.85rem;
}

.psssb-restart-link {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--tte-muted, #667085);
  text-decoration: underline;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}

.psssb-break { text-align: center; }
.psssb-break-timer {
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tte-primary, #1a56db);
  margin: 14px 0;
}

.psssb-result-card {
  border: 1px solid var(--tte-border, #d7dee6);
  border-radius: var(--tte-radius-md, 10px);
  padding: 16px;
  margin-bottom: 14px;
}
.psssb-result-lang { font-weight: 600; margin-bottom: 10px; }
.psssb-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.psssb-result-grid > div { display: flex; flex-direction: column; }
.psssb-result-num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.psssb-result-label { font-size: 0.75rem; color: var(--tte-muted, #667085); }
.psssb-qualify-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.psssb-qualify-pill.pass { background: rgba(38,166,91,.14); color: var(--tte-success, #1e8e3e); }
.psssb-qualify-pill.fail { background: rgba(214,69,69,.14); color: var(--tte-danger, #d64545); }

.psssb-overall {
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: var(--tte-radius-md, 10px);
  font-weight: 600;
  text-align: center;
}
.psssb-overall.pass { background: rgba(38,166,91,.12); color: var(--tte-success, #1e8e3e); }
.psssb-overall.fail { background: rgba(214,69,69,.12); color: var(--tte-danger, #d64545); }

.psssb-result-note {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--tte-muted, #667085);
}

@media (max-width: 480px) {
  .psssb-panel { padding: 14px; }
  .psssb-result-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .psssb-result-num { font-size: 1.2rem; }
  .psssb-timer { font-size: 1.15rem; }
  .psssb-passage, .psssb-input { font-size: 0.95rem; }
}