/* XP Tracker free web tools (batch 2, 11-09c). Loaded only on /tools/* pages, after site.css.
   Same tokens as site.css. No pill chips: labels are plain text, buttons are 10px rectangles. */
.tool{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:24px;max-width:860px;margin:0 auto}
.tool h2{font-family:'Cinzel',serif;font-size:1.25rem;color:#fff;margin-bottom:6px}
.tool-form{display:grid;gap:18px}
.tool-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.tool{padding:18px}.tool-row{grid-template-columns:1fr}}
.tool label,.tool .lbl{display:block;font-weight:700;font-size:.92rem;color:#fff;margin-bottom:6px}
.tool .hint{display:block;font-weight:400;font-size:.82rem;color:var(--text-3);margin-top:4px;line-height:1.45}
.tool input[type=text],.tool input[type=number],.tool input[type=date],.tool input[type=time],.tool select,.tool textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--text);background:var(--bg-2);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 12px;min-height:46px}
.tool textarea{min-height:96px;resize:vertical}
.tool input:focus,.tool select:focus,.tool textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,168,67,.18)}
.tool input[type=range]{width:100%;accent-color:var(--gold);min-height:32px}
.tool .range-v{font-family:'Cinzel',serif;font-weight:700;color:var(--gold-2);margin-left:6px}
.tool fieldset{border:0;padding:0;margin:0}
.tool .opts{display:grid;gap:8px}
.tool .opt{display:flex;gap:10px;align-items:flex-start;background:var(--bg-2);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;cursor:pointer;font-weight:600;color:#d8d8e8;transition:border-color .2s,background .2s}
.tool .opt:hover{border-color:var(--line-2)}
.tool .opt input{margin-top:5px;accent-color:var(--gold);flex:none}
.tool .opt:has(input:checked){border-color:var(--gold);background:rgba(212,168,67,.08);color:#fff}
.tool .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tool button.btn{cursor:pointer}
.tool details{border-top:1px solid var(--line);padding-top:14px}
.tool summary{cursor:pointer;font-weight:700;color:var(--gold-2)}
.tool details[open] summary{margin-bottom:14px}

/* results: animate in, never pop */
.tool-out{margin-top:22px;border-top:1px solid var(--line);padding-top:20px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.tool-out.on{opacity:1;transform:none}
.tool-out[hidden]{display:none}
.res-big{font-family:'Cinzel',serif;font-weight:700;font-size:2.1rem;line-height:1.15;color:var(--gold-2)}
.res-sub{color:var(--text-2);margin-top:6px}
.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
@media (max-width:640px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.res-cell{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.res-cell b{display:block;font-family:'Cinzel',serif;font-size:1.25rem;color:#fff;line-height:1.2}
.res-cell span{font-size:.82rem;color:var(--text-3)}
.res-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.res-list li{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:#d8d8e8}
.res-list li b{color:#fff}
.tool table{width:100%;border-collapse:collapse;font-size:.92rem}
.tool th,.tool td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tool th{color:var(--text-3);font-weight:600}
.bar{height:10px;background:var(--bg-2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));width:0;transition:width .6s ease}
.tool .note{font-size:.84rem;color:var(--text-3);margin-top:12px;line-height:1.55}
.tool .err{color:#ff9a9a;font-size:.88rem;margin-top:6px}
.tool .quiz-q{display:none}
.tool .quiz-q.on{display:block;animation:tin .3s ease}
.tool .quiz-step{font-size:.82rem;color:var(--text-3);margin-bottom:8px}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.result-card{display:none}
.result-card.on{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;animation:tin .4s ease}
@media (max-width:640px){.result-card.on{grid-template-columns:1fr}}
.result-card picture img{border-radius:12px}

/* soft app card at the end of each tool */
.quest-cta{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;max-width:860px;margin:0 auto}
.quest-cta picture img{border-radius:10px}
.quest-cta h2{font-family:'Cinzel',serif;font-size:1.2rem;color:#fff;margin:4px 0 8px}
.quest-cta p{color:var(--text-2);margin-bottom:14px}
@media (max-width:600px){.quest-cta{grid-template-columns:1fr}.quest-cta picture{max-width:180px}}

/* printable output */
.print-sheet{display:none}
@media print{
  body *{visibility:hidden}
  .print-sheet,.print-sheet *{visibility:visible}
  .print-sheet{display:block;position:absolute;left:0;top:0;width:100%;color:#000;background:#fff;font-family:'Exo 2',Arial,sans-serif}
  .print-sheet table{width:100%;border-collapse:collapse}
  .print-sheet th,.print-sheet td{border:1px solid #999;padding:4px;font-size:10pt;color:#000}
  .print-sheet h2,.print-sheet h3,.print-sheet p,.print-sheet li,.print-sheet span,.print-sheet strong{color:#000!important}
  .print-sheet h1{font-family:'Cinzel',serif;font-size:18pt;color:#000;margin-bottom:6pt}
  .qrc,.nav,.foot{display:none!important}
}
@media (prefers-reduced-motion:reduce){.tool-out,.bar i{transition:none}.tool .quiz-q.on,.result-card.on{animation:none}}