/* Perceptual Rendering: styles for the landing page, the experiment page and the topic reader.
   Everything is scoped under .tool-app so it sits inside the CosmoVentures shell (home.css, cosmoventures.css, tool.css).
   The sample text has its own variables (--fs, --lh, --ls, --maxw, --paraGap, --font) because they are the experiment's variables. */

/* defaults for the sample text; the scripts set these on <html> */
:root{
  --font-system: "Roboto", Helvetica, Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-dys: "OpenDyslexic", "OpenDyslexic3", var(--font-system);
  --font: var(--font-system);

  --fs: 16px;
  --lh: 1.6;
  --ls: 0px;
  --maxw: 74ch;
  --paraGap: 12px;
  --sectionGap: 14px;
  --pad: 22px;

}

.tool-app{
  --pr-soft: #f7f8fc;
  --pr-edge: rgba(19,21,43,.3);
  --pr-shadow: 0 1px 2px rgba(19,21,43,.04), 0 8px 24px rgba(19,21,43,.05);
}
body.contrast .tool-app{
  --line: rgba(19,21,43,.55);
  --pr-edge: rgba(19,21,43,.7);
  --dim: #13152b;
  --faint: #232743;
}
body.reduce-motion .tool-app *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }

.tool-app a{ color:var(--glow); }
.tool-app :focus-visible{ outline:2px solid var(--glow); outline-offset:2px; border-radius:4px; }
.tool-app p{ margin:0; }
.tool-app .pr-muted{ color:var(--dim); }
.tool-app .pr-tiny{ font-size:13px; line-height:1.5; color:var(--faint); }

/* ---------- Navigation between the three pages ---------- */
.tool-app .pr-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; list-style:none; }
.tool-app .pr-tabs a{
  display:block; padding:9px 16px; font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  color:var(--dim); text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:6px;
}
.tool-app .pr-tabs a:hover{ border-color:var(--glow); color:var(--ink); }
.tool-app .pr-tabs a[aria-current="page"]{ color:var(--glow); border-color:var(--glow); background:var(--glow-soft); }

/* ---------- Landing ---------- */
.tool-app .pr-panels{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.tool-app .pr-panel{ background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--pr-shadow); padding:26px; min-width:0; }
.tool-app .pr-panel h2{ font-size:22px; line-height:1.2; margin:0 0 12px; }
.tool-app .pr-panel p{ color:var(--dim); font-size:16px; }
.tool-app .pr-panel ul, .tool-app .pr-panel ol{ margin:0; padding-left:20px; color:var(--dim); font-size:16px; }
.tool-app .pr-panel li{ margin:8px 0; padding-left:2px; }
.tool-app .pr-panel li::marker{ color:var(--glow); font-family:var(--mono); }
.tool-app .pr-lead{ grid-column:1 / -1; }
.tool-app .pr-lead p{ max-width:72ch; }
.tool-app .pr-h3{ font-family:var(--mono); font-weight:400; font-size:13px; letter-spacing:.02em; color:var(--faint); margin:0 0 14px; }
.tool-app .tool-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.tool-app .tool h3{ font-size:20px; }
.tool-app .tool p{ margin:8px 0 0; }
.tool-app .tool p.tag{ margin:0 0 10px; }
.tool-app .tool a.more{ color:var(--glow); text-decoration:none; font-size:13px; }
.tool-app .tool a.more:hover{ text-decoration:underline; }
.tool-app .pr-foot{ margin-top:22px; }

/* ---------- Experiment and topic layout ---------- */
.tool-app .pr-layout{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
body.left-collapsed .tool-app .pr-layout{ grid-template-columns:minmax(0,1fr); gap:16px; }
.tool-app .pr-stage{ min-width:0; display:grid; gap:16px; }

/* Display controls */
.tool-app .pr-left{
  background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--pr-shadow);
  padding:18px; position:sticky; top:72px; max-height:calc(100vh - 88px); overflow:auto; min-width:0;
}
.tool-app .pr-left-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tool-app .pr-left-title{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--faint); margin:0; font-weight:400; }
body.left-collapsed .tool-app .pr-left{ position:static; max-height:none; padding:10px 14px; }
body.left-collapsed .tool-app .pr-left-body{ display:none; }
.tool-app .pr-left-body{ margin-top:14px; }
.tool-app .pr-group{ border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.tool-app .pr-group:first-child{ border-top:0; padding-top:0; margin-top:0; }
.tool-app .pr-group-title{ font-family:var(--mono); font-weight:400; font-size:12.5px; letter-spacing:.02em; color:var(--glow); margin:0 0 10px; }
.tool-app .pr-row{ display:grid; gap:6px; margin:8px 0; }
.tool-app .pr-lbl{ color:var(--dim); font-size:14px; }
.tool-app .pr-val{ color:var(--faint); font-family:var(--mono); font-size:13px; }
.tool-app .pr-srow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.tool-app .pr-slider{ margin:12px 0; }
.tool-app .pr-slider input[type="range"]{ width:100%; margin:4px 0 0; accent-color:var(--glow); }
.tool-app .pr-tog{ display:flex; align-items:center; gap:10px; color:var(--dim); font-size:14px; margin:10px 0; cursor:pointer; }
.tool-app .pr-tog input{ width:18px; height:18px; accent-color:var(--glow); flex:none; margin:0; }
.tool-app select{
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:#fff; border:1px solid var(--pr-edge);
  border-radius:4px; padding:8px 10px; min-height:40px;
}
.tool-app select:focus-visible{ border-color:var(--glow); }

/* Buttons */
.tool-app .pr-btn{
  font:inherit; font-size:12.5px; letter-spacing:.02em; color:var(--ink); background:#fff; border:1px solid var(--pr-edge);
  border-radius:2px; padding:9px 14px; cursor:pointer; min-height:38px; transition:background .2s,border-color .2s;
}
.tool-app .pr-btn:hover{ border-color:var(--ink); background:rgba(19,21,43,.04); }
.tool-app .pr-btn.wide{ width:100%; }

/* Mode bar */
.tool-app .pr-modes{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--pr-shadow);
}
.tool-app .pr-modes-label{ font-family:var(--mono); font-size:13px; color:var(--faint); margin-right:6px; }
.tool-app .mode-btn{
  font:inherit; font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink); background:#fff;
  border:1px solid var(--pr-edge); border-radius:4px; padding:8px 14px; min-height:38px; cursor:pointer; white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.tool-app .mode-btn:hover{ border-color:var(--ink); }
.tool-app .mode-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tool-app .chip{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--faint); }

/* Topic heading */
.tool-app .pr-topic{ display:grid; gap:6px; }
.tool-app .pr-topic-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.tool-app .pr-topic-top label{ font-family:var(--mono); font-size:13px; color:var(--faint); }
.tool-app .pr-topic-top select{ width:auto; max-width:100%; min-width:min(100%,320px); }
.tool-app .pr-topic h2{ font-size:clamp(24px,2.6vw,32px); line-height:1.12; margin:0; }
.tool-app .pr-topic p{ color:var(--dim); max-width:70ch; font-size:16.5px; }

/* The reading surface: the text being studied */
.tool-app .viewer{
  background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:var(--pr-shadow);
  padding:var(--pad); min-width:0;
}
.tool-app .content{
  max-width:min(var(--maxw), 100%); font-family:var(--font); font-size:var(--fs); line-height:var(--lh);
  letter-spacing:var(--ls); color:var(--ink); overflow-wrap:break-word;
}
.tool-app .content p{ margin:0 0 var(--paraGap) 0; }
.tool-app .content h2{ font-family:var(--font); font-weight:700; font-size:calc(var(--fs) * 1.15); line-height:1.3; margin:0 0 10px 0; letter-spacing:inherit; text-wrap:balance; }
.tool-app .content h3{ font-family:var(--font); }
.tool-app .content ul{ margin:0 0 var(--paraGap) 0; padding-left:1.25em; }
.tool-app .content li{ margin:6px 0; }
.tool-app .content .dense li{ margin:2px 0; }
.tool-app .content b{ font-weight:700; }
.tool-app .divider{ height:1px; background:var(--line); margin:var(--sectionGap) 0; }
.tool-app .content .pr-muted{ color:var(--dim); }

.tool-app .summary{
  display:none; background:var(--glow-soft); border-left:3px solid var(--glow); border-radius:4px;
  padding:12px 16px; margin:0 0 var(--sectionGap) 0;
}
.tool-app .summary.show{ display:block; }
.tool-app .summary b{ color:var(--glow); font-family:var(--mono); font-weight:700; font-size:.85em; letter-spacing:.02em; margin-right:6px; }

.tool-app .cards{ display:none; gap:12px; }
.tool-app .cards.show{ display:grid; grid-template-columns:1fr; }
.tool-app .pr-card{ border:1px solid var(--line); background:var(--pr-soft); border-radius:6px; padding:14px 16px; }
.tool-app .pr-card h3{ margin:0 0 6px 0; font-size:.95em; font-weight:700; color:var(--glow); }
.tool-app .pr-card p{ margin:0; }

.tool-app .steps{ display:none; }
.tool-app .steps.show{ display:block; }
.tool-app .pr-step{ border-left:3px solid var(--glow); padding:12px 16px; margin:10px 0; background:var(--pr-soft); border-radius:4px; }
.tool-app .pr-step-no{ display:block; font-family:var(--mono); font-size:.8em; letter-spacing:.02em; color:var(--glow); font-weight:700; margin-bottom:4px; }

.tool-app .qa{ display:none; }
.tool-app .qa.show{ display:block; }
.tool-app .qa details{ border:1px solid var(--line); background:var(--pr-soft); border-radius:6px; padding:12px 16px; margin:10px 0; }
.tool-app .qa details[open]{ background:#fff; border-color:var(--pr-edge); }
.tool-app .qa summary{ cursor:pointer; color:var(--ink); font-weight:700; }
.tool-app .qa summary:hover{ color:var(--glow); }
.tool-app .qa .answer{ margin-top:8px; color:var(--dim); }

.tool-app .pr-note{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }

@media (min-width:901px){
  .tool-app .pr-modes{ position:sticky; top:62px; z-index:5; }
  .tool-app .cards.show{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .tool-app .pr-layout{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .tool-app .pr-left{ position:static; max-height:none; }
  .tool-app .pr-panels{ grid-template-columns:1fr; }
  .tool-app .pr-stage{ order:2; }
  .tool-app .chip{ margin-left:0; flex-basis:100%; }
}
@media (max-width:560px){
  .tool-app .tool-grid{ grid-template-columns:1fr; }
  .tool-app .pr-panel{ padding:22px; }
  .tool-app .viewer{ padding:min(var(--pad), 16px); }
  .tool-app .mode-btn{ padding:8px 12px; }
}