/* STT Mobile/Tablet Overlay v2.7.0.13 */

/* View switch */
.stt-view-switch{display:flex;gap:8px;margin:12px 0 8px;flex-wrap:wrap}
.stt-view-switch .stt-pill{border:1px solid #d1d5db;background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:700}
.stt-view-switch .stt-pill[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}

/* Force views */
.stt-report.stt-force-mobile canvas.stt-scale{display:none !important;}
.stt-report.stt-force-desktop .stt-scale-summary .stt-scale-rows{display:none !important;}

/* Tablet dual: radar + cards */
@media (min-width: 641px) and (max-width: 1024px){
  .stt-report.stt-tablet-dual .stt-scale-dual{
    display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start;
  }
}

/* Scale cards (mobile & tablet right pane) */
.stt-scale-summary .stt-scale-rows{ margin-top:8px; }
.stt-scale-summary .stt-scale-rows .stt-row{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  margin:12px 0;
  border-left:6px solid #111;
}
.stt-scale-summary .stt-scale-rows .stt-row:nth-child(even){ background:#f9fafb; }
.stt-scale-summary .stt-row-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.stt-scale-summary .stt-row-name{ display:inline-flex; align-items:center; max-width:68%; font-weight:700; color:#111827; line-height:1.25; }
.stt-scale-summary .stt-row-name .stt-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; flex:0 0 auto; }
.stt-scale-summary .stt-row-name .stt-label{ display:inline-block; }
.stt-scale-summary .stt-badge{ display:inline-block; white-space:nowrap; font-weight:800; border-radius:999px; padding:4px 9px; background:#111; color:#fff; font-size:13px; line-height:1; }
.stt-scale-summary .stt-mini-bar{ position:relative; height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; margin:8px 0 6px; }
.stt-scale-summary .stt-mini-bar > span{ position:absolute; left:0; top:0; bottom:0; background: var(--stt-accent, #10b981); width:0; }
.stt-scale-summary .stt-row-meta{ margin-top:6px; font-size:12.5px; color:#6b7280; }

/* Mobile radar size + legend */
@media (max-width: 640px){
  .stt-report canvas.stt-scale{ display:block; width:100% !important; height:auto !important; aspect-ratio:1 / 1; }
  .stt-radar-legend{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 12px; margin:10px 0 4px; }
  .stt-radar-legend .stt-legend-item{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#111827; }
  .stt-radar-legend .stt-legend-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
  .stt-scale-summary .stt-badge{ font-size:12px; padding:4px 9px; }
}

/* Trophy shelf */
.stt-trophy-shelf{ margin:16px 0; }
.stt-trophy-shelf .stt-mini-tabs{ display:flex; gap:8px; margin-bottom:10px; }
.stt-trophy-shelf .stt-mini-tabs .stt-pill{ border:1px solid #d1d5db; background:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; font-weight:700; }
.stt-trophy-shelf .stt-mini-tabs .stt-pill[aria-pressed="true"]{ background:#111; color:#fff; border-color:#111; }
.stt-trophy-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; }
.stt-trophy{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px; position:relative; }
.stt-trophy .stt-title{ font-weight:800; font-size:15px; margin-bottom:4px; }
.stt-trophy .stt-sub{ font-size:12.5px; color:#374151; }
.stt-trophy .stt-emoji{ font-size:28px; position:absolute; right:10px; top:8px; }
.stt-trophy .stt-date{ margin-top:6px; font-size:11px; color:#6b7280; }

/* Kid Mode graffiti vibe */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&display=swap');
.stt-report.stt-kid-on{
  --spray1: rgba(255, 0, 102, 0.18);
  --spray2: rgba(0, 180, 255, 0.18);
  --spray3: rgba(255, 230, 0, 0.18);
  background-image:
    radial-gradient(circle at 15% 10%, var(--spray1), transparent 42%),
    radial-gradient(circle at 80% 30%, var(--spray2), transparent 45%),
    radial-gradient(circle at 40% 85%, var(--spray3), transparent 46%);
  background-repeat:no-repeat;
  background-size: 120% 120%, 100% 100%, 100% 100%;
  border-radius: 12px;
  padding: 8px;
}
.stt-report.stt-kid-on .stt-section-title,
.stt-report.stt-kid-on h2, .stt-report.stt-kid-on h3{
  font-family: 'Bangers','Luckiest Guy','Impact','Arial Black',system-ui,sans-serif;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(17,17,17,.25);
}
.stt-report.stt-kid-on .stt-scale-summary .stt-scale-rows .stt-row{
  border: 2px solid #111;
  box-shadow: 4px 4px 0 rgba(17,17,17,0.25);
  transform: rotate(-0.25deg);
}
.stt-report.stt-kid-on .stt-scale-summary .stt-badge{
  background: #111; color:#fff; border:2px solid #fff; box-shadow: 0 0 0 2px #111;
}
.stt-report.stt-kid-on .stt-trophy{
  border:2px solid #111;
  box-shadow: 4px 4px 0 rgba(17,17,17,.25);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.5), transparent 40%);
}

/* Kid Mode: photo graffiti frame */
.stt-kid-photo-wrap{ position:relative; display:inline-block; }
.stt-kid-photo-wrap img{ position:relative; z-index:2; border-radius:12px; }
.stt-kid-photo-wrap::before{
  content:''; position:absolute; inset:-10px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,0,102,.25), transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(0,180,255,.25), transparent 40%),
    radial-gradient(circle at 30% 90%, rgba(255,230,0,.25), transparent 45%);
  filter: blur(6px) saturate(115%);
  border-radius:16px;
  z-index:1;
}