/* Ruang 04 · Tryout Tahap 0. Memakai komponen bersama (shared/ui.css) dan token tema; tidak ada palet baru. */
.t-page{max-width:900px}
.t-muted{color:var(--u-muted);font-size:14px;margin:0}
.t-code{font-family:KaTeX_Main,'Latin Modern Math',serif;color:var(--u-muted);font-size:14px;margin-right:6px}
.t-cards{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.t-card{display:flex;flex-direction:column;gap:8px;padding:16px}
.t-card h2{margin:0;font-size:20px}.t-card p{margin:0;font-size:14px;line-height:1.5;color:var(--u-ink)}
.t-card .u-btn{margin-top:auto;align-self:flex-start}
.t-last{color:var(--u-ok)!important}
.t-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.t-facts li{border:1px solid var(--u-line);border-radius:var(--u-radius-sm);padding:8px 14px;background:var(--u-panel)}
.t-rules,.t-skill-list{margin:0;padding-left:20px;line-height:1.6}
.t-actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
/* Mengerjakan */
.t-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px;margin-top:8px}
.t-bar>div{display:flex;flex-direction:column;gap:2px}
.t-timer{font-variant-numeric:tabular-nums;font-size:22px;font-weight:650;color:var(--u-accent)}
.t-timer.is-low{color:var(--color-incorrect)}
.t-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.t-nav{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.t-nav-btn{font:inherit;min-width:44px;min-height:44px;border-radius:var(--u-radius-sm);border:1px solid var(--u-line);background:transparent;color:var(--u-ink);cursor:pointer;position:relative}
.t-nav-btn.is-done{background:var(--u-panel-2);border-color:var(--u-line-strong)}
.t-nav-btn.is-flag::after{content:'';position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:#f2c98a}
.t-nav-btn[aria-current=step]{border-color:var(--u-accent);box-shadow:0 0 0 1px var(--u-accent) inset}
.t-nav-btn:focus-visible{outline:2px solid var(--u-accent);outline-offset:2px}
.t-question{padding:18px 16px}
.t-question h1.t-q-number{font-size:14px;line-height:1.4;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--u-muted);margin:0 0 6px}
.t-q-number:focus{outline:none}
.t-prompt{font-size:18px;line-height:1.5;margin:0}
.t-domain{font-size:13px;color:var(--u-muted);margin:6px 0 0;line-height:1.5}
.t-stimulus{margin:16px 0;padding:12px;overflow-x:auto;text-align:center;font-size:22px}
.t-options{border:0;margin:0;padding:0;display:grid;gap:8px}
.t-legend,.t-options legend{font-size:14px;color:var(--u-muted);margin-bottom:8px;padding:0}
.t-option{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1px solid var(--u-line);border-radius:var(--u-radius-sm);background:var(--u-panel-2);cursor:pointer}
.t-option:has(input:checked){border-color:var(--color-selection);box-shadow:0 0 0 1px var(--color-selection) inset}
.t-question .t-option input{appearance:auto;-webkit-appearance:auto;width:20px;height:20px;min-width:0;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;accent-color:var(--u-accent);flex:none}
.t-option-key{color:var(--u-muted);font-size:14px}
.t-option-body{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:18px}
.t-options.is-compact{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.t-options.is-compact legend{grid-column:1/-1}
.t-fields{display:grid;gap:14px}
.t-field{display:flex;flex-direction:column;gap:6px}
.t-field-label{font-size:15px;color:var(--u-ink)}
.t-input-row{display:flex;align-items:center;gap:8px}
.t-input{font:inherit;font-size:20px;min-height:48px;width:min(100%,260px);padding:6px 12px;border-radius:var(--u-radius-sm);border:1px solid var(--u-line-strong);background:var(--u-bg);color:var(--u-ink)}
.t-input:focus-visible{outline:2px solid var(--u-accent);outline-offset:1px}
.t-hint{font-size:13px;color:var(--u-muted);margin:0}
.t-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:14px}
.t-flag[aria-pressed=true]{border-color:#f2c98a;color:#f2c98a}
.t-confirm-card{margin-top:16px;padding:16px;border-color:var(--u-accent)}
.t-confirm-card h2{margin:0 0 6px;font-size:18px}.t-confirm-card p{margin:0}
.t-warn{color:#f2c98a;font-size:14px}
/* Laporan */
.t-score{padding:16px;margin-top:16px}.t-score p{margin:0}.t-score p:first-child{font-size:20px}.t-score b{font-size:32px;color:var(--u-accent)}
.t-skills{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.t-skill{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 14px;border:1px solid var(--u-line);border-radius:var(--u-radius);background:var(--u-panel)}
.t-skill.is-weak{border-color:var(--color-incorrect)}
.t-skill-score{font-size:14px;white-space:nowrap}
.t-skill.is-ok .t-mark{color:var(--color-correct)}.t-skill.is-weak .t-mark{color:var(--color-incorrect)}
.t-mark{font-weight:700;margin-right:6px}
.t-skill-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.t-link{display:inline-flex;align-items:center;min-height:44px;color:var(--u-link);text-decoration:underline;text-underline-offset:3px;font-size:14px}
.t-review{border:1px solid var(--u-line);border-radius:var(--u-radius-sm);background:var(--u-panel);margin-top:8px}
.t-review summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:48px;padding:8px 14px;cursor:pointer}
.t-review summary small{color:var(--u-muted);flex-basis:100%}
.t-review.is-ok .t-mark{color:var(--color-correct)}.t-review.is-wrong .t-mark{color:var(--color-incorrect)}
.t-review-status{font-size:14px}
.t-review-body{padding:0 14px 14px}
.t-your{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.t-your>span:first-child{color:var(--u-muted);font-size:14px}
.t-ans-field{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.t-solution{border-top:1px solid var(--u-line);margin-top:10px;padding-top:6px}.t-solution h4{margin:8px 0 4px;font-size:14px;color:var(--u-muted)}
@media(max-width:900px){.t-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.t-cards{grid-template-columns:minmax(0,1fr)}.t-stimulus{font-size:18px}.t-controls .u-btn{flex:1 1 auto}}