/* Shared by the interactive UK tools. Sits on top of /guides/guide.css. */
.tool{border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:18px; margin:18px 0}
.tool fieldset{border:0; border-top:1px solid var(--line); margin:0; padding:14px 0 6px; min-width:0}
.tool fieldset:first-of-type{border-top:0; padding-top:0}
.tool legend{font-weight:600; padding:0 0 6px; color:var(--ink)}
.tool label{display:block; font-size:15px; color:var(--ink-soft); margin:0 0 12px}
.tool input:not([type=checkbox]),.tool textarea{
  display:block; width:100%; max-width:100%; margin-top:4px; padding:9px 10px;
  font:inherit; font-size:16px; color:var(--ink); background:var(--ground);
  border:1px solid var(--line); border-radius:6px}
.tool textarea{resize:vertical}
.tool input:focus,.tool textarea:focus{outline:2px solid var(--teal); outline-offset:1px}
.tool .pair{display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.tool .check{display:flex; gap:8px; align-items:center; color:var(--ink); font-weight:500; margin-bottom:4px}
.tool .check input{width:18px; height:18px}
.tool .hazard{margin-bottom:6px}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.btn{display:inline-block; font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  background:var(--teal); color:#fff; border:1px solid var(--teal); border-radius:6px;
  padding:9px 14px; text-decoration:none}
.btn.ghost{background:transparent; color:var(--teal)}
.plan{border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:4px 18px 14px; margin:18px 0; overflow-wrap:anywhere}
.plan table{table-layout:fixed}
.plan th[scope=row]{width:38%}
.cpp-sub{color:var(--ink-faint); font-size:14px}
.cpp-missing{color:var(--amber)}
.result{border-radius:9px; padding:16px 18px; margin:18px 0; border:2px solid var(--line); background:var(--panel)}
.result h3{margin:0 0 6px}
.result.yes{border-color:var(--amber)}
.result.no{border-color:var(--teal)}
.result ul{margin:6px 0 0}
.answer{color:var(--ink)}
.cta p{margin:12px 0 0}
.scroll{overflow-x:auto}
.tool select{
  display:block; width:100%; margin-top:4px; padding:9px 10px; font:inherit;
  color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:6px}
.tool input[type=checkbox]{width:20px;height:20px}
.tool-result[hidden]{display:none}
.tool-result{border:2px solid var(--teal);background:var(--panel);border-radius:9px;padding:16px 18px;margin:20px 0}
.tool-result h2{margin-top:0}
.calculator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:18px;margin:24px 0}
.calculator-card{display:block;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:20px;text-decoration:none;color:var(--ink)}
.calculator-card:hover{border-color:var(--teal)}
.calculator-card h2{margin:0 0 8px;color:var(--teal)}
.cta{border-left:4px solid var(--teal);background:var(--panel);padding:16px 18px;margin:28px 0}
.pitch-chart td,.pitch-chart th{text-align:center}
@media print{
  body.cpp header,body.cpp footer,body.cpp .tool,body.cpp .note,body.cpp main > h1,body.cpp main > h2,body.cpp main > h3,body.cpp main > p,body.cpp .example,body.cpp .cta{display:none !important}
  body.cpp #cpp-preview{display:block !important; border:0; padding:0}
  body[data-calculator] header,body[data-calculator] footer,body[data-calculator] .tool,body[data-calculator] .cta,body[data-calculator] .guide{display:none!important}
  body[data-calculator] .tool-result{display:block!important;border:0;color:#000;background:#fff}
  body{background:#fff; color:#000}
}

