/* Shared styles for the free KDP tools: controls on the left, a to-scale diagram and numbers on the right. */

/* Cover size calculator: controls left, a to-scale full-wrap proof right, numbers below. Tokens alias the shared palette. */
:root{--paper:var(--bg);--sheet:var(--surface);--lark:var(--yolk);--crayon:var(--teal);--crayon-soft:var(--teal-soft);--spine:var(--yolk-soft)}
.calc{padding-block:8px 64px}
@media (max-width:620px){.svgbox svg{min-width:0!important}.svgbox svg text{font-size:24px}.svgbox svg text[fill="var(--ink-2)"]{display:none}}
.calc .notes section{padding:0}
.sources{font-size:14px;color:var(--ink-2)}
.sources a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.calc-head{display:flex;flex-direction:column;gap:10px;max-width:68ch}
.calc-head h1{font-size:clamp(36px,4.8vw,58px)}

.lede{color:var(--ink-2);margin:0;font-size:19px}
.grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}}
.calc form{background:var(--sheet);border:1px solid var(--rule);box-shadow:0 24px 50px -30px rgba(27,26,31,.4);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.calc label,.calc .lbl{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.calc select,.calc input[type=number]{font:600 16px var(--body);color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:10px;padding:10px 12px;width:100%}
.calc select:focus,.calc input:focus,.calc button:focus-visible{outline:3px solid var(--crayon);outline-offset:1px;border-color:var(--crayon)}
.hint{font-size:14px;color:var(--ink-2)}
.hint.warn{color:var(--mark);font-weight:600}
.units{display:flex;border:1.5px solid var(--rule);border-radius:10px;overflow:hidden}
.units button{flex:1;font:700 15px var(--body);padding:9px;border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.units button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.out{display:flex;flex-direction:column;gap:20px;min-width:0}
.proof{background:var(--sheet);border:1.5px solid var(--rule);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.proof-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.proof-head b{font-family:var(--body);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.svgbox{overflow-x:auto}
.svgbox svg{display:block;width:100%;height:auto;min-width:440px}
.legend{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:14px;height:10px;border-radius:2px;display:inline-block}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--sheet);border:1.5px solid var(--rule);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat .v{font-family:var(--body);font-weight:800;font-size:21px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat .s{font-size:14px;color:var(--ink-2)}
.stat.hi{border-color:var(--crayon);background:var(--crayon-soft)}
.stat.neg .v{color:var(--mark)}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:720px){.notes{grid-template-columns:minmax(0,1fr)}}
.notes section{min-width:0}
.notes h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.4vw,28px);letter-spacing:-.01em;margin:0 0 10px}
.notes p,.notes li{color:var(--ink-2);margin:0 0 8px;max-width:62ch}
.notes ul{padding-left:18px;margin:0}
.calc code{font-family:var(--body);font-size:.92em;background:var(--crayon-soft);padding:1px 5px;border-radius:5px;color:var(--ink)}
.cta{border:1px solid var(--rule);border-radius:16px;padding:22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--sheet)}
.cta p{margin:0;max-width:52ch}
.cta strong{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.01em;display:block;margin-bottom:6px;line-height:1.15}
/* additions for the spine, royalty and margin tools */
.wrap{max-width:var(--max)}
.calc-head{max-width:72ch}
.calc .ref h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.4vw,28px);letter-spacing:-.01em;margin:0 0 var(--s3)}
.calc .ref p{color:var(--ink-2);margin:0 0 var(--s4);max-width:66ch}
.calc .ref .tbl table{min-width:480px}
.calc label.check{display:flex;align-items:center;gap:var(--s2);text-transform:none;letter-spacing:0;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
.calc label.check input{width:20px;height:20px;accent-color:var(--teal)}
.calc .stat .v.sm{font-size:18px}
.pricepts td.cur,.pricepts th.cur{background:var(--teal-soft)}
.tools-faq{padding-block:var(--sec)}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}