/* Design tokens are provided by assets/tokens.css */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:var(--bg2);color:var(--text)}
a{color:var(--hi)} a:hover{opacity:.9}
.container{max-width:960px;margin:0 auto;padding:24px}
header{display:flex;gap:14px;align-items:center;justify-content:space-between;margin:6px 0 18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 200deg,var(--hi),var(--ok));box-shadow:var(--shadow)}
.title{font-weight:800;letter-spacing:.2px}

.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:var(--pad);box-shadow:var(--shadow)}
.progress{height:10px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,var(--hi),var(--ok));width:0}

.qtext{font-size:1.25rem;line-height:1.5;margin:6px 0 14px}
.meta{color:var(--muted);font-size:.9rem}
/* ---- Meta / info toggle (scoped) ---- */
#quizCard .meta-wrap { display:flex; align-items:center; gap:8px }
#quizCard .meta-details { display:inline-block }
#quizCard .meta-details > summary {
  list-style:none; cursor:pointer; user-select:none;
  width:22px; height:22px; line-height:20px; text-align:center;
  border:1px solid rgba(255,255,255,.15); border-radius:999px;
  font-size:.9rem; color:var(--muted); background:transparent;
}
#quizCard .meta-details[open] > summary { color:#fff; border-color:rgba(255,255,255,.35) }
#quizCard .meta-details > summary::-webkit-details-marker { display:none }
#quizCard .meta-details > div {
  margin-top:6px; padding:8px 10px;
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  background:rgba(255,255,255,.03);
}

/* mobile tweak */
@media (max-width:600px){
  #quizCard .meta-wrap { gap:6px; flex-wrap:wrap }
}

.answers{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:700px){.answers{grid-template-columns:1fr 1fr}}

button.answer{appearance:none;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;background:var(--surface-muted);color:var(--text);text-align:left;cursor:pointer;transition:transform .04s ease, border-color .2s}
button.answer:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
button.answer.correct{border-color:rgba(49,208,161,.9);box-shadow:0 0 0 2px rgba(49,208,161,.25) inset}
button.answer.incorrect{border-color:rgba(255,107,107,.9);box-shadow:0 0 0 2px rgba(255,107,107,.22) inset}
button.answer[disabled]{opacity:.8;cursor:default}

/* visible keyboard focus for answer buttons */
button.answer:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px }

.feedback{margin-top:10px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:var(--bg2)}
.feedback.correct{border-color:rgba(49,208,161,.35)}
.feedback.incorrect{border-color:rgba(255,107,107,.35)}

.row{display:flex;gap:12px;align-items:center}
.spacer{flex:1}
.controls{margin-top:14px}
.btn{appearance:none;border:1px solid transparent;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--hi);color:#fff}
.btn.secondary{background:var(--surface-muted);color:var(--text);border-color:rgba(255,255,255,.12)}
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none }
/* Accessible focus ring */
.btn:focus-visible { outline:2px solid var(--hi); outline-offset:2px }
/* If you prefer to hide it entirely instead: */
/* .btn:disabled { visibility:hidden } */

.hidden{display:none !important}

/* --- Link-like button (for compact toggles) --- */
.linkish{appearance:none;background:transparent;border:0;color:var(--hi);font-weight:700;cursor:pointer;padding:0}
.linkish:focus-visible{outline:2px solid var(--hi);outline-offset:2px;border-radius:6px}

/* --- Small reveal animation container --- */
.reveal{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:.0;transition:grid-template-rows .22s ease,opacity .22s ease}
.reveal.open{grid-template-rows:1fr;opacity:1}
.reveal>div{min-height:0;overflow:hidden}

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); z-index: 1000; padding: 16px }
.modal .modal-card { width: 100%; max-width: 520px; background: var(--card); color: var(--text); border:1px solid rgba(0,0,0,.15); border-radius: 14px; box-shadow: var(--shadow); padding: 16px }
.modal textarea { width: 100%; background: var(--bg2); color: var(--text); border:1px solid rgba(0,0,0,.2); border-radius: 10px; padding: 10px; resize: vertical }
.modal textarea:focus-visible { outline:2px solid var(--hi); outline-offset: 2px }

/* ---- Mobile sticky actions (keep Next visible) ---- */
@media (max-width: 640px){
  .controls{
    position: sticky; bottom: 0; z-index: 10;
    margin-top: 16px; padding: 10px 0 8px;
    background: linear-gradient(180deg, rgba(18,26,35,0), var(--card) 24%);
    /* Safe area for devices with home indicator */
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.06);
  }
}

.results h2{margin-top:0}
.score-badge{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--surface-muted);border:1px solid rgba(255,255,255,.12);font-weight:800}
.score-badge.good{border-color:rgba(49,208,161,.55)}
.score-badge.ok{border-color:rgba(255,180,84,.55)}
.score-badge.bad{border-color:rgba(255,107,107,.55)}

table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
th{color:var(--muted);font-weight:600}

.pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.15);margin:0 6px 6px 0;color:var(--muted);font-size:.85rem}
.small{font-size:.9rem;color:var(--muted)}

.review-item{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;margin-bottom:10px;background:var(--surface-muted)}
.review-item .q{font-weight:600;margin-bottom:6px}
.review-item .meta{margin-top:6px}

/* ---- Home picker polish ---- */
.home-list{display:flex;flex-direction:column;gap:12px}

.home-item{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-radius:12px;
  background:var(--surface-muted);border:1px solid rgba(255,255,255,.08);
}

/* simple header row helper if present */
.home-row { display:flex; align-items:center; justify-content:space-between; gap:12px }

.home-main{flex:1;min-width:0}
.home-title{font-weight:800;font-size:1.1rem;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-meta{color:var(--muted);opacity:.95;font-size:.9rem;margin-top:2px;white-space:nowrap}
.home-item .btn{white-space:nowrap}

/* keep the card from jumping while manifest renders */
#homeCard{min-height:180px}

.home-actions { display:flex; align-items:center; gap:10px; }
.home-setup { position:relative }
  .home-setup > summary {
    list-style:none; cursor:pointer; user-select:none;
    width:36px; height:36px; border-radius:10px;
    display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.12);
    background:var(--surface-muted); color:var(--text);
  }
.home-setup[open] > summary { border-color:rgba(255,255,255,.28) }
.home-setup > summary::-webkit-details-marker { display:none }
.home-setup .home-controls { margin-top:10px; }

@media (max-width:640px){
  .home-actions { width:100%; gap:8px }
  .home-actions .btn { margin-left:auto }
  .home-setup .home-controls { min-width:100% }
}

.home-controls { display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width:680px){
  /* Labels left, controls right; clean alignment */
  .home-controls { grid-template-columns: 120px 1fr; align-items:center }
}
.domains {
  width: 220px; max-width: 60vw;
  padding: 10px 12px; border-radius: 10px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--bg2); color:var(--text);
}
.domains:focus { outline:none; border-color: rgba(255,255,255,.28); }
.qty {
  width: 88px; padding: 10px 12px; border-radius: 10px;
  border:1px solid rgba(255,255,255,.12); background:var(--bg2); color:var(--text);
}
.qty:focus { outline:none; border-color: rgba(255,255,255,.28); }

/* Question media (images/videos) */
.qmedia { margin: 8px 0 12px }
.qmedia figure { margin: 0 }
.qmedia img, .qmedia video {
  width: 100%; max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  display: block;
}
.qmedia figcaption { margin-top: 6px }

.domain-chips {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:6px;
  grid-column: 1 / -1; /* span both columns so chips don't get squeezed */
}
.chip {
  appearance:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:var(--surface-muted); color:var(--text);
  border-radius:999px; padding:7px 11px;
  font-size:.85rem; line-height:1;
}
.chip:hover { border-color:rgba(255,255,255,.22); }
.chip.on {
  border-color: rgba(106,176,255,.6);
  box-shadow: 0 0 0 2px rgba(106,176,255,.15) inset;
}
.chip.util { border-style:dashed; opacity:.9; }
.chip:focus { outline:none; border-color: rgba(255,255,255,.35); }

/* If any stray debug text shows near the chips, hide it */
.domain-chips::before { display: none !important; }

/* --- Mobile layout polish --- */
@media (max-width: 640px) {
  /* Keep controls readable & not cramped */
  .home-controls { gap: 8px; flex-wrap: wrap }
  .qty { width: 96px }                 /* small but tappable */
  .domains { width: 100%; max-width: 100% }   /* full-width CSV input */
  .home-item .btn { width: 100% }      /* Start button full width */

  /* Chip grid: tight but tappable wrap */
  .domain-chips { gap: 6px; margin-top: 8px }
  .chip { padding: 6px 10px; line-height: 1.2; flex: 0 0 auto }

  /* Give page some bottom room when keyboard appears */
  .container { padding-bottom: max(24px, 14vh, env(safe-area-inset-bottom)) }
}

/* Wide layout: 3-column setup controls and end-aligned Start */
@media (min-width:680px){
  /* Keep Start at the end of the actions row on desktop */
  .home-actions { margin-left:auto }
}

/* A11y utility for hidden labels */
.visually-hidden {
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Utility: visible only when printing */
.print-only { display:none !important }
@media print { 
  .print-only { display:block !important }
  .print-header { display:flex !important }
}

/* Print header (title + timestamp) */
.print-header { margin-bottom: 6px; display:flex; align-items: baseline; justify-content: space-between; gap:12px; }
.print-header .print-title { font-size: 1.3rem; font-weight: 800; }
.print-header .print-date { margin-top: 0; color: #444; text-align: right; }

/* -------- Print summary -------- */
@media print {
  :root { --bg:#fff; --bg2:#fff; --card:#fff; --text:#000; --muted:#333; }
  body { background:#fff !important; color:#000 !important; }
  .container { max-width:800px; padding:0; }
  header, #homeCard, #quizCard, .controls, #reviewBtn, #retakeBtn, #copyLinkBtn, #printBtn { display:none !important; }

  /* Light, paper-friendly surfaces */
  .card { background:#fff !important; border:0 !important; box-shadow:none !important; }
  .results.card { border:0; box-shadow:none; }
  .review-item { background:#fff !important; border:1px solid #ddd !important; box-shadow:none !important; }
  .score-badge { background:#fff !important; color:#000 !important; }
  .score-badge.good { border-color:#2abf91 !important; }
  .score-badge.ok   { border-color:#e0a24d !important; }
  .score-badge.bad  { border-color:#e06b6b !important; }
  .pill { border-color:#bbb !important; color:#000 !important; background:#fff !important; }
  .chip { background:#fff !important; color:#000 !important; border:1px solid #bbb !important; box-shadow:none !important; }
  .chip.on { box-shadow:none !important; border-color:#999 !important; font-weight:700; }
  a { color:#000; text-decoration:underline; }

  /* Condense tables and make domain summary two-up cards */
  table { border-collapse:separate; border-spacing:0; }
  th, td { padding:6px 8px; border-bottom:1px solid #e5e5e5; }
  #domainSummary thead { display:none; }
  #domainSummary table { width:100%; border:0; }
  #domainSummary tbody { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
  #domainSummary tr { display:grid; grid-template-columns: auto auto 1fr; gap:8px; align-items:center; border:1px solid #ddd; border-radius:8px; padding:6px 8px; break-inside:avoid; page-break-inside:avoid; }
  #domainSummary td { border:0; padding:0; }
  #domainSummary td:nth-child(2)::before { content:'— '; color:#888; margin:0 6px 0 8px }
  #domainSummary td:nth-child(3) { justify-self:end }

  /* Avoid awkward breaks inside important blocks */
  .review-item { break-inside:avoid; page-break-inside:avoid; }
  h2, h3 { break-after:avoid; }
}