/* assets/css/tool.css
   Shared chrome for the free tools: PRISMA, risk of bias and GRADE.
   Extracted from prisma-generator.php so the three pages cannot drift apart, which is
   exactly what happened once before when report.php carried its own copy of a renderer.
   Page-specific rules stay in a small <style> block on each page. */
:root{--ink:#0d1b2a;--muted:#5b6b7f;--border:#e2e8f0;--bg:#f7f9fc;
  /* The logo's own colours, matching landing.php: navy for actions, teal for marks,
     gold for highlights. --blue is kept as a name because the extracted rules use it. */
  --navy:#0d1b2a;--teal:#0f766e;--teal-mark:#0d9488;--gold:#c8963e;
  --blue:#0f766e;--blue-l:#e8f4f2;--amber:#b45309;--amber-l:#fffbeb;--green:#0f766e}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--blue)}
/* ── Nav, matching landing.php. Ported rather than shared because this page carries
   its own small stylesheet and should not pull in the whole landing sheet to draw a
   header. Variable names differ between the two files, so the values are mapped. */
.nav{position:sticky;top:0;z-index:200;background:color-mix(in srgb,#fff 90%,transparent);
  border-bottom:1px solid var(--border);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%)}
.nav-in{height:68px;display:flex;align-items:center;gap:1.35rem}
.brand{display:inline-flex;align-items:center;gap:.58rem;font-size:1.34rem;font-weight:760;
  letter-spacing:-.052em;line-height:1;text-decoration:none;color:var(--ink)}
.brand-mark{width:25px;height:25px;flex:none}
.nav-links{display:flex;align-items:center;gap:.08rem;margin-left:auto}
.nav-links a{padding:.48rem .64rem;border-radius:9px;color:var(--muted);font-size:.79rem;
  font-weight:620;letter-spacing:-.014em;text-decoration:none;transition:background .18s ease,color .18s ease}
.nav-links a:hover{background:#f1f5f9;color:var(--ink)}
.nav-links a.here{color:var(--ink);background:#f1f5f9}
.nav-act{display:flex;align-items:center;gap:.48rem}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  color:var(--muted);border:0;background:transparent;cursor:pointer}
.nav .btn{min-height:42px;padding:.62rem 1.02rem;border-radius:10px;font-size:.82rem;font-weight:690;
  display:inline-flex;align-items:center;gap:.5rem}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--border)}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 12px 26px -18px rgba(29,78,216,.85)}
.burger{display:none}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav-links.open{position:absolute;top:68px;left:0;right:0;display:grid;gap:.15rem;margin:0;
    padding:1rem clamp(16px,3vw,28px) 1.2rem;border-bottom:1px solid var(--border);background:#fff;
    box-shadow:0 18px 40px -30px rgba(8,19,33,.34)}
  .nav-links.open a{padding:.72rem .2rem;border-radius:0;border-bottom:1px solid var(--border)}
  .nav-links.open a:last-child{border-bottom:0}
}
@media(max-width:560px){
  /* At this width the two buttons plus the burger crowd the logo out. */
  .nav .btn--ghost{display:none}
}
.wrap{width:min(100%,1240px);margin-inline:auto;padding-inline:clamp(16px,3vw,28px)}
.brand{font-weight:800;font-size:1.02rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.hero{padding:clamp(26px,4vw,44px) 0 clamp(18px,2.4vw,26px)}
h1{margin:0 0 .5rem;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.028em;line-height:1.15}
.lede{margin:0;max-width:66ch;color:var(--muted);font-size:.95rem}
/* ── Layout ─────────────────────────────────────────────────────────────────
   The preview column STICKS on desktop. The form is ~1160px tall and the diagram
   ~610px, so without this the diagram scrolled out of view by the time you reached
   the exclusion reasons, and a live preview you cannot see is not a live preview. */
.grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);
  align-items:start;padding-bottom:3rem}
.col-out{position:sticky;top:84px}
.preview{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem;
  /* No height cap. The cap was min(62vh,640px) and the diagram is 530px plus padding,
     so it clipped by a handful of pixels: a scrollbar appeared and the last box was
     cut off. A diagram you have to scroll inside a preview panel is worse than a
     shorter sticky run. overflow stays as a safety net for a very short window. */
  overflow:auto}
/* Cap BOTH dimensions and leave width/height auto. The SVG has a viewBox, so the
   content scales DOWN to fit the smaller cap rather than being clipped: the diagram is
   always shown whole. An earlier version used width:100%, which let the height overflow
   and sliced the last box off behind a scrollbar. */
.preview svg{max-width:100%;max-height:min(68vh,660px);width:auto;height:auto;display:block;margin-inline:auto}
@media(max-width:900px){
  .grid{grid-template-columns:1fr}
  /* Sticky inside a single column would pin the diagram over the form. */
  .col-out{position:static}
}

/* The form deliberately stays ONE column at every width. It was tried in two and the
   height barely moved, because the tall fieldsets are the sequential ones. More to the
   point, a PRISMA form is a sequence: identification, then screening, then included.
   Splitting a sequence across columns breaks the only reading order that makes sense.

   The diagram scales to fit a height budget instead, so it is always complete AND the
   panel stays short enough to stay pinned. */

/* ── Form: phase markers tie each group to the band it fills in the diagram ──
   Not decoration. The diagram has three labelled phases down its left edge and the
   form now carries the same three, so it is obvious which part of the picture you
   are editing. */
fieldset{border:0;padding:0;margin:0 0 1.35rem;position:relative}
legend{font-weight:700;font-size:.88rem;padding:0;margin-bottom:.5rem;display:flex;
  align-items:center;gap:.45rem}
legend .ph{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:5px;
  background:#e8eef7;color:#1e3a5f;font-size:.62rem;font-weight:800;flex:none}
.fs-note{font-weight:400;color:var(--muted);font-size:.78rem}
.row{display:grid;grid-template-columns:1fr 92px;gap:.5rem;align-items:center;margin-bottom:.32rem}
.row label{font-size:.805rem;color:#334155;line-height:1.35}
.row input[type=number],.row input[type=text]{width:100%;padding:.36rem .48rem;border:1px solid var(--border);
  border-radius:6px;font:inherit;font-size:.82rem;text-align:right;background:#fff}
.row input:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
/* A calculated field must not look like something you can type in. */
.derived input{background:#f1f5f9;color:#64748b;border-style:dashed;cursor:not-allowed}
.derived label{color:#64748b}
.derived label::after{content:"calc";font-size:.6rem;font-weight:700;letter-spacing:.04em;
  color:#64748b;background:#e2e8f0;border-radius:3px;padding:.05rem .24rem;margin-left:.32rem;
  vertical-align:.08em}
.hint{font-size:.735rem;color:var(--muted);margin:.28rem 0 .1rem;line-height:1.5}
.mob-hint{display:none}
@media(max-width:900px){.mob-hint{display:block;margin:.6rem 0 0;font-size:.78rem;color:var(--muted)}}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.05rem 1.1rem}
.panel-label{margin:0 0 .55rem;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.row input[type=text]{text-align:left}
.src-row{display:grid;grid-template-columns:1fr 82px 26px;gap:.4rem;margin-bottom:.3rem}
.src-row input{padding:.3rem .42rem;border:1px solid var(--border);border-radius:6px;font:inherit;font-size:.8rem}
.mini{border:1px dashed var(--border);background:#fff;border-radius:6px;padding:.24rem .5rem;
  font-size:.75rem;cursor:pointer;color:var(--blue);font-family:inherit}
.x{border:0;background:transparent;color:#b91c1c;cursor:pointer;font-size:.95rem;line-height:1}
.chk{display:flex;align-items:center;gap:.45rem;font-size:.82rem;margin:.2rem 0 .7rem}
.warn{background:var(--amber-l);border:1px solid #fcd34d;border-left:3px solid var(--amber);
  border-radius:8px;padding:.6rem .7rem;margin-bottom:.8rem;font-size:.79rem;color:#7c2d12;line-height:1.5}
.warn ul{margin:.3rem 0 0;padding-left:1.1rem}
.ok{background:#f0fdf4;border:1px solid #bbf7d0;border-left:3px solid var(--green);border-radius:8px;
  padding:.5rem .7rem;margin-bottom:.8rem;font-size:.79rem;color:#14532d}
.acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.btn{font:inherit;font-size:.82rem;padding:.46rem .85rem;border:1px solid var(--border);background:#fff;
  border-radius:8px;cursor:pointer;text-decoration:none;color:var(--ink);display:inline-block}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--teal);border-color:var(--teal)}
.btn:hover{border-color:var(--blue)}
.cta{margin-top:1.1rem;background:var(--blue-l);border:1px solid #bfdbfe;border-radius:12px;padding:1rem 1.1rem}
.cta h3{margin:0 0 .3rem;font-size:.95rem}
.cta p{margin:0 0 .7rem;font-size:.85rem;color:#1e3a5f}
.faq{padding-bottom:3rem}
.faq h2{font-size:1.1rem;margin:0 0 .8rem}
details{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem;margin-bottom:.5rem}
summary{cursor:pointer;font-weight:600;font-size:.88rem}
details p{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}
/* ── Reference content below the tool ───────────────────────────────────────── */
/* ONE measure for everything below the tool. It was ragged: prose sat at 592px
   (max-width:76ch) while the table, equations and FAQ spanned 1184px, so the right
   edge stepped in and out down the page. 1184px is also far too wide to read prose
   at. A single 820px column, centred, fixes the alignment and the line length
   together. */
.faq{max-width:820px;margin-inline:auto}
.faq h2{font-size:1.22rem;margin:2.1rem 0 .45rem;letter-spacing:-.022em;scroll-margin-top:80px}
.faq h2:first-child{margin-top:.6rem}
.section-lede{margin:0 0 1rem;color:var(--muted);font-size:.9rem}
.defs{margin:0 0 .5rem;display:grid;gap:.1rem}
.defs dt{font-weight:700;font-size:.9rem;margin-top:.9rem;color:var(--ink)}
.defs dd{margin:.15rem 0 0;padding-left:0;color:#3d4c60;font-size:.875rem;line-height:1.62}
.eqs{display:grid;gap:.4rem;margin:.9rem 0 1rem;padding:.9rem 1rem;background:#fff;
  border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:8px}
.eqs div{font-size:.86rem;color:#3d4c60}
.eqs code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  background:var(--blue-l);color:#1e3a8a;padding:.08rem .32rem;border-radius:4px}
.tbl-wrap{overflow-x:auto;margin:.6rem 0 1rem}
.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);
  border-radius:10px;font-size:.85rem;min-width:520px}
.cmp th{text-align:left;padding:.6rem .8rem;background:#f1f5f9;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border)}
.cmp td{padding:.6rem .8rem;border-bottom:1px solid #f1f5f9;vertical-align:top;color:#3d4c60;line-height:1.55}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{color:var(--muted)}
.mistakes{margin:.6rem 0 1rem;padding-left:1.3rem}
.mistakes li{margin-bottom:.55rem;font-size:.875rem;color:#3d4c60;line-height:1.6}
.faq > p{font-size:.875rem;color:#3d4c60}
footer{border-top:1px solid var(--border);background:#fff;padding:1.2rem 0;font-size:.78rem;color:var(--muted)}
/* ── 2026 visual refresh ─────────────────────────────────────────────────── */
:root{
  --ink:#102033;--muted:#607086;--border:#dce5ef;--bg:#f4f7fb;--blue:#2457d6;
  --blue-d:#183f9f;--blue-l:#eef4ff;--amber:#a85a00;--amber-l:#fff8e8;--green:#13733a;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);
  --shadow-md:0 18px 50px rgba(15,23,42,.10);
}
html{scroll-behavior:smooth}
body{background:
  radial-gradient(circle at 10% -10%,rgba(36,87,214,.08),transparent 30rem),
  linear-gradient(180deg,#f8faff 0,#f4f7fb 28rem,#f4f7fb 100%)}
button,input{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid rgba(13,148,136,.3);outline-offset:2px}
.nav{box-shadow:0 1px 0 rgba(15,23,42,.02)}
.nav-in{height:72px}
.brand{font-size:1.12rem;letter-spacing:-.035em}
.nav-links a{font-size:.82rem;padding:.54rem .72rem}
.hero{padding:clamp(38px,6vw,72px) 0 clamp(24px,4vw,42px);text-align:center}
.hero::before{content:"Free · Private · No sign-up";display:inline-flex;align-items:center;
  min-height:30px;padding:.3rem .7rem;margin-bottom:.9rem;border:1px solid #cddcff;
  border-radius:999px;background:rgba(255,255,255,.8);color:#264c9c;font-size:.73rem;
  font-weight:750;letter-spacing:.035em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
h1{font-size:clamp(2rem,5vw,3.65rem);max-width:900px;margin:0 auto .85rem;
  letter-spacing:-.055em;line-height:1.02;text-wrap:balance}
.lede{max-width:790px;margin-inline:auto;font-size:clamp(.98rem,1.5vw,1.08rem);line-height:1.72;text-wrap:pretty}
.grid{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(22px,3.5vw,46px);padding-bottom:4.5rem}
.card,.preview,.cta,details,.eqs,.cmp{box-shadow:var(--shadow-sm)}
.card{border-radius:18px;padding:1.35rem 1.35rem 1.15rem}
.panel-label{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:#405067}
.panel-label::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--teal-mark);box-shadow:0 0 0 5px var(--blue-l)}
fieldset{margin-bottom:1.65rem;padding-bottom:1.35rem;border-bottom:1px solid #edf1f6}
fieldset:last-child{margin-bottom:0;padding-bottom:.2rem;border-bottom:0}
legend{font-size:.94rem;margin-bottom:.72rem;letter-spacing:-.01em}
legend .ph{width:24px;height:24px;border-radius:8px;background:var(--blue-l);color:var(--blue-d);font-size:.68rem}
.row{grid-template-columns:minmax(0,1fr) 104px;gap:.75rem;margin-bottom:.48rem}
.row label{font-size:.84rem;color:#34455a}
.row input[type=number],.row input[type=text],.src-row input{
  min-height:40px;padding:.48rem .58rem;border-color:#d6e0eb;border-radius:9px;transition:border-color .18s,box-shadow .18s,background .18s}
.row input:hover,.src-row input:hover{border-color:#b9c8da}
.row input:focus,.src-row input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(13,148,136,.14)}
.derived input{background:#f5f7fa}
.src-row{grid-template-columns:minmax(0,1fr) 92px 34px;gap:.5rem;margin-bottom:.45rem}
/* An input whose number will be ignored until it is named. */
.src-row input.needs-label{border-color:#f0a94b;background:#fffaf0}
.src-row input.needs-label::placeholder{color:#b45309}
.x{width:34px;height:40px;border-radius:9px;color:#9f2934;transition:background .18s}
.x:hover{background:#fff0f1}
.mini{min-height:36px;border-radius:9px;border-color:#c8d5e4;background:#f8fbff;font-weight:650}
.mini:hover{background:var(--blue-l);border-color:#adc4f8}
.hint{font-size:.76rem;line-height:1.55;margin-top:.42rem}
.col-out{top:92px}
.preview{min-height:520px;display:grid;place-items:center;border-radius:18px;padding:1.25rem;background:
  linear-gradient(#fff,#fff) padding-box,
  linear-gradient(145deg,#d6e2ff,#e8edf4) border-box;border:1px solid transparent;box-shadow:var(--shadow-md)}
.preview svg{filter:drop-shadow(0 10px 20px rgba(15,23,42,.07))}
.warn,.ok{border-radius:12px;padding:.78rem .9rem;box-shadow:var(--shadow-sm)}
.acts{gap:.65rem;margin-top:1rem}
.btn{min-height:42px;padding:.62rem .9rem;border-radius:10px;font-weight:680;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}
.btn-primary,.btn--primary{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 10px 24px -16px rgba(13,27,42,.7)}
.btn-primary:hover,.btn--primary:hover{background:var(--teal);border-color:var(--teal)}
.cta{border-radius:16px;padding:1.15rem 1.2rem;background:linear-gradient(135deg,#eef4ff,#f7faff);border-color:#cddcff}
.cta h3{font-size:1rem;letter-spacing:-.02em}
.faq{padding-bottom:4.5rem}
.faq h2{font-size:clamp(1.25rem,2vw,1.55rem);margin-top:2.8rem}
.section-lede,.faq > p,.defs dd,.mistakes li{font-size:.91rem}
details{border-radius:14px;padding:.85rem 1rem;transition:border-color .18s,box-shadow .18s}
details[open]{border-color:#c8d7ea;box-shadow:0 10px 28px rgba(15,23,42,.07)}
summary{font-size:.92rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#f0f4f9;color:#47607d;font-size:1rem;flex:none}
details[open] summary::after{content:"−"}
footer{padding:1.5rem 0;background:rgba(255,255,255,.9)}
@media(max-width:900px){
  .hero{text-align:left;padding-top:34px}.hero::before{margin-bottom:.75rem}h1,.lede{margin-inline:0}
  /* grid-template-columns MUST be repeated here. The .grid rule above this media block
     re-declares two columns at equal specificity, so it beat the earlier
     @media(max-width:900px) collapse and the layout stayed two-column down to 360px:
     the diagram was crushed to zero height and the page scrolled sideways. */
  .grid{grid-template-columns:1fr;gap:24px}.card{order:1}.col-out{order:2}.preview{min-height:0;padding:1rem}
  .acts{display:grid;grid-template-columns:1fr 1fr}.acts .btn{width:100%}
}
@media(max-width:640px){
  .wrap{padding-inline:16px}.nav-in{height:64px}.nav-links.open{top:64px}
  .nav .btn--primary{min-height:38px;padding:.5rem .72rem;font-size:.76rem}.brand-mark{width:23px;height:23px}
  .hero{padding:28px 0 22px}.hero::before{font-size:.65rem}h1{font-size:clamp(2rem,11vw,2.75rem)}
  .card{padding:1.05rem;border-radius:15px}.row{grid-template-columns:minmax(0,1fr) 88px;gap:.55rem}
  .src-row{grid-template-columns:minmax(0,1fr) 76px 32px}.src-row input{font-size:.76rem}
  .acts{grid-template-columns:1fr}.cta .btn{width:100%;margin-top:.35rem}
  .faq h2{margin-top:2.2rem}.cmp{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* ── Shared blocks used by all three tool pages (tool_chrome.php) ──────────── */
.tool-cards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:.8rem 0 1.4rem}
.tool-card{display:block;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:12px;background:#fff;text-decoration:none;transition:border-color .15s ease}
.tool-card:hover{border-color:#0d9488}
.tool-card strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:.25rem}
.tool-card span{color:var(--muted);font-size:.87rem;line-height:1.5}
.cite-us{margin:2.2rem 0 1rem;padding:1.3rem 1.4rem;border:1px solid var(--border);border-radius:14px;background:#fff}
.cite-us-head{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.nav-links .nav-login{display:none}
@media(max-width:900px){.nav-links.open .nav-login{display:block}}
@media(max-width:640px){.tool-cards{grid-template-columns:1fr}.cite-us-head .btn{width:100%;justify-content:center}}

/* ── Cite block (tool_chrome.php) ──────────────────────────────────────────
   These were missing when the block first shipped, so both citation formats were
   visible at once. The panels are switched, not stacked. */
.cite-tabs{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.9rem;border-bottom:1px solid var(--border)}
.cite-tab{position:relative;padding:.6rem .9rem;border:0;background:none;cursor:pointer;
  color:var(--muted);font:inherit;font-size:.9rem;font-weight:600}
.cite-tab:hover{color:var(--ink)}
.cite-tab.on{color:var(--ink)}
.cite-tab.on::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:-1px;height:2px;background:var(--teal-mark)}
.cite-panel{display:none}
.cite-panel.on{display:block}
.cite-box{position:relative;padding:1rem 5.4rem 1rem 1rem;border:1px solid var(--border);border-radius:10px;
  background:var(--bg);color:var(--ink);font-size:.92rem;line-height:1.65;word-break:break-word}
.cite-box .copy{position:absolute;top:.7rem;right:.7rem;padding:.35rem .7rem;border:1px solid var(--border);
  border-radius:8px;background:#fff;color:var(--muted);font:inherit;font-size:.78rem;font-weight:650;cursor:pointer}
.cite-box .copy:hover{border-color:var(--teal-mark);color:var(--teal)}
@media(max-width:640px){
  .cite-box{padding:1rem 1rem 3.2rem}
  .cite-box .copy{top:auto;bottom:.7rem;right:.7rem}
}