/* WikiWander, styled as part of the CosmoVentures site.
   Everything is scoped under .tool-app. Tokens (--card, --ink, --dim, --faint, --glow, --line) come from cosmoventures.css. */
.tool-app{display:flex;flex-direction:column;gap:20px;max-width:820px;margin-inline:auto;font-size:1rem}
.tool-app *{box-sizing:border-box}
.tool-app [hidden]{display:none!important}
.tool-app button{font:inherit;color:inherit}

/* top row: status and language */
.tool-app .ww-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tool-app .ww-status{margin:0;font-family:var(--mono);font-size:.78em;color:var(--faint);letter-spacing:.02em;line-height:1.5}
.tool-app .ww-status .err{color:#9b2335}
.tool-app .ww-sep{margin-inline:.35em}
.tool-app .lang-switch{display:flex;gap:6px}
.tool-app .lang-btn{min-width:44px;min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--dim);font-family:var(--mono);font-size:.78em;letter-spacing:.04em;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.tool-app .lang-btn:hover{border-color:var(--ink);color:var(--ink)}
.tool-app .lang-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* white cards */
.tool-app .ww-panel,.tool-app .ww-card,.tool-app .savedWrap{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(19,21,43,.04),0 8px 24px rgba(19,21,43,.05);min-width:0}
.tool-app .ww-panel{padding:22px 24px}
.tool-app .ww-label{font-family:var(--mono)!important;font-weight:400!important;font-size:.78em;letter-spacing:.04em;color:var(--faint)!important;margin:0 0 12px!important}

/* topic chips: calm bordered buttons */
.tool-app .chipGrid{display:flex;flex-wrap:wrap;gap:8px}
.tool-app .chip{min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font-size:.9em;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.tool-app .chip:hover{border-color:var(--ink)}
.tool-app .chip.active{background:var(--glow);border-color:var(--glow);color:#fff}

/* buttons */
.tool-app .ww-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:10px 20px;border:1px solid rgba(19,21,43,.3);border-radius:2px;background:transparent;color:var(--ink);font-size:.8em;letter-spacing:.02em;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.tool-app .ww-btn:hover:not(:disabled){border-color:var(--ink);background:rgba(19,21,43,.04)}
.tool-app .ww-btn.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.tool-app .ww-btn.primary:hover:not(:disabled){background:var(--glow);border-color:var(--glow)}
.tool-app .ww-btn.saved{border-color:var(--glow);color:var(--glow);background:var(--glow-soft)}
.tool-app .ww-btn.small{min-height:36px;padding:6px 14px}
.tool-app .ww-btn:disabled{opacity:.45;cursor:not-allowed}
.tool-app :is(button,input,summary,a):focus-visible{outline:2px solid var(--glow);outline-offset:2px}

/* custom topic */
.tool-app .customWrap{display:none;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.tool-app .customWrap.show{display:flex}
.tool-app .customInput{flex:1 1 220px;min-width:0;min-height:44px;padding:10px 14px;border:1px solid rgba(19,21,43,.2);border-radius:4px;background:#fff;color:var(--ink);font:inherit;font-size:1rem}
.tool-app .customInput::placeholder{color:var(--faint)}
.tool-app .customInput:focus{border-color:var(--glow)}

/* article card */
.tool-app .ww-card{overflow:hidden}
.tool-app .media{max-height:260px;background:var(--void);border-bottom:1px solid var(--line);overflow:hidden}
.tool-app .media img{display:block;width:100%;height:clamp(150px,30vw,260px);object-fit:cover}
.tool-app .body{padding:28px}
.tool-app .ww-kicker{margin:0 0 10px;font-family:var(--mono);font-size:.78em;letter-spacing:.04em;color:var(--glow)}
.tool-app .title{font-size:clamp(1.6rem,3.4vw,2.1rem)!important;line-height:1.12;letter-spacing:-.01em;overflow-wrap:anywhere}
.tool-app .meta{margin:10px 0 0;font-size:.82em;color:var(--faint)}
.tool-app .meta a{color:var(--glow);text-underline-offset:3px}
.tool-app .concept{margin:18px 0 0;font-size:1.02em;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
.tool-app .errorText{margin:12px 0 0;color:#9b2335;font-size:.9em}
.tool-app .errorText:empty{display:none}
.tool-app .controls{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tool-app .rightControls{display:flex;gap:10px;flex-wrap:wrap}

/* states */
.tool-app .ww-card[data-state=loading] .title,.tool-app .ww-card[data-state=loading] .concept{color:var(--faint)}
.tool-app .ww-card[data-state=loading] .concept{animation:wwpulse 1.4s ease-in-out infinite}
.tool-app .ww-card[data-state=loading] .meta a,.tool-app .ww-card[data-state=error] .meta a,.tool-app .ww-card[data-state=empty] .meta a{visibility:hidden}
.tool-app .ww-card[data-state=error]{border-left:3px solid #9b2335}
@keyframes wwpulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.tool-app .ww-card[data-state=loading] .concept{animation:none}}

/* about */
.tool-app details.about{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
.tool-app details.about>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:.88em;color:var(--dim);min-height:32px;align-items:center}
.tool-app details.about>summary::-webkit-details-marker{display:none}
.tool-app details.about>summary::after{content:"+";font-family:var(--mono);color:var(--glow);margin-left:auto;padding-left:10px}
.tool-app details.about[open]>summary::after{content:"\2212"}
.tool-app .hint{display:none}
.tool-app .aboutBody{margin-top:10px;color:var(--dim);font-size:.9em;line-height:1.6}
.tool-app .aboutBody p{margin:0}
.tool-app .aboutBody ul{margin:.6em 0 0;padding-left:1.2em}
.tool-app .tip{margin:16px 0 0;font-size:.8em;color:var(--faint)}

/* saved */
.tool-app .savedHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--line)}
.tool-app .savedHead .t{font-size:1.3rem!important}
.tool-app .savedHead .small{margin:2px 0 0;font-size:.82em;color:var(--faint)}
.tool-app .savedBody{padding:18px 24px 22px}
.tool-app .savedList{margin:0;padding-left:1.3em;color:var(--dim);line-height:1.7;overflow-wrap:anywhere}
.tool-app .savedList a{color:var(--glow);text-underline-offset:3px}
.tool-app .savedEmpty{margin:0;font-size:.9em;color:var(--faint)}

@media (max-width:560px){
  .tool-app{gap:16px}
  .tool-app .ww-panel,.tool-app .savedHead,.tool-app .savedBody{padding-inline:18px}
  .tool-app .body{padding:22px 18px}
  .tool-app .controls{flex-direction:column;align-items:stretch}
  .tool-app .rightControls{display:grid;grid-template-columns:1fr 1fr}
  .tool-app .rightControls #next{grid-column:1/-1;order:-1}
  .tool-app .rightControls #retry{grid-column:1/-1}
  .tool-app .ww-btn{width:100%}
  .tool-app .ww-top{flex-direction:column;align-items:flex-start}
}