/* Free math tools: fraction and decimal converter, square root simplifier.
   Markup comes from /assets/tools.js, which fills <div class="tool" data-tool="...">.
   Inputs sit on a card panel; the answer and the steps sit on a paper card,
   like the worked solution on the homepage. Site tokens come from style.css. */

.tool{container-type:inline-size;width:100%;margin:28px 0;font-family:var(--sans);color:var(--text);line-height:1.5}
.tool [hidden]{display:none!important}
.tool-body{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}

/* wide pages: inputs on the left, paper on the right */
@container (min-width:860px){
  .tool:not(.tool--compact) .tool-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
  .tool:not(.tool--compact) .tool-panel{position:sticky;top:20px}
}

/* ---------- input panel ---------- */
.tool-panel{background:var(--card);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow,none);min-width:0}
.tool-seg{display:flex;gap:4px;padding:4px;margin:0 0 18px;background:var(--bg);border-radius:var(--r-chip)}
.tool-seg-btn{flex:1 1 0;min-width:0;min-height:44px;padding:8px 12px;border:0;border-radius:var(--r-chip);background:transparent;
  color:var(--text-2);font:600 15px/1.2 var(--sans);cursor:pointer;transition:background-color .15s,color .15s}
.tool-seg-btn:hover{color:var(--text)}
.tool-seg-btn[aria-pressed="true"]{background:var(--peach);color:var(--peach-ink)}
.tool-form{display:grid;gap:14px;margin:0;min-width:0}
.tool-row{display:grid;gap:10px;align-items:end;min-width:0}
.tool-row--frac{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr)}
.tool-row--sqrt{grid-template-columns:auto minmax(0,1fr)}
.tool-field{display:flex;flex-direction:column;min-width:0}
.tool-label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;line-height:1.3;color:var(--text-2)}
.tool-opt{font-weight:400;color:var(--text-3)}
.tool-input{display:block;width:100%;min-width:0;min-height:52px;margin:0;padding:10px 14px;background:var(--bg);color:var(--text);
  border:1px solid var(--border-2,var(--border));border-radius:14px;font:500 22px/1.2 var(--sans);font-variant-numeric:tabular-nums;
  -webkit-appearance:none;appearance:none;transition:border-color .15s}
.tool-input:hover{border-color:var(--text-4,var(--text-3))}
.tool-input:focus{border-color:var(--peach)}
.tool-input[aria-invalid="true"]{border-color:#F2A3A3}
.tool-slash{font:400 32px/52px var(--serif);color:var(--text-3);padding:0 1px}
.tool-sqrt-glyph{font:400 40px/52px var(--serif);color:var(--peach);padding:0 2px}
.tool-hint{margin:0;font-size:14px;line-height:1.45;color:var(--text-3)}
.tool-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tool-btn{min-height:48px;padding:0 28px;border:0;border-radius:var(--r-chip);background:var(--peach);color:var(--peach-ink);
  font:600 16px/1 var(--sans);cursor:pointer;transition:background-color .15s}
.tool-btn:hover{background:var(--peach-2,#E8A579)}
.tool-try{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tool-try-label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-right:2px}
.tool-chip{min-height:40px;padding:0 14px;border:1px solid var(--border-2,var(--border));border-radius:var(--r-chip);background:transparent;
  color:var(--text-2);font:500 15px/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s,color .15s}
.tool-chip:hover{background:var(--card-2);color:var(--text)}

/* ---------- paper card: answer and steps ---------- */
.tool-paper{background:var(--paper);color:var(--paper-ink);border-radius:var(--r-card);padding:26px 28px;box-shadow:var(--shadow-lg);min-width:0}
.tool-eyebrow{margin:0 0 8px;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-muted)}
.tool-answer{margin:0;font-family:var(--serif);font-weight:500;font-size:34px;font-size:clamp(28px,6cqi,44px);line-height:1.3;
  overflow-wrap:anywhere;font-variant-numeric:lining-nums}
.tool-eq{margin:0 .22em;color:var(--paper-muted)}
.tool-a--long{display:block;margin-top:4px;font-size:.6em;line-height:1.5}
.tool-note{margin:12px 0 0;font-size:15.5px;line-height:1.5}
.tool-msg{margin:0;font-size:17px;line-height:1.5;color:var(--paper-muted)}
.tool-msg--error{color:#A1281F;font-weight:600}
.tool-msg--plain{color:var(--text-2)}
.tool-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:18px 0 0}
.tool-fact{min-width:0;padding:10px 14px;background:var(--paper-2);border-radius:14px}
.tool-fact dt{margin:0 0 3px;font:600 11.5px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-muted)}
.tool-fact dd{margin:0;font:500 19px/1.35 var(--serif);overflow-wrap:anywhere}
.tool-fact--wide{grid-column:1/-1}
.tool-fact--wide dd{font-size:17px;line-height:1.5}
.tool-work{margin-top:22px;padding-top:18px;border-top:1px solid var(--paper-2)}
.tool .tool-steps-h{margin:0 0 14px;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-muted)}
.tool .tool-steps{list-style:none;margin:0;padding:0;counter-reset:toolstep}
.tool .tool-steps>li{position:relative;margin:0;padding:0 0 16px 42px;counter-increment:toolstep}
.tool .tool-steps>li:last-child{padding-bottom:0}
.tool .tool-steps>li::before{content:counter(toolstep);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--peach);color:var(--peach-ink);font:700 13px/28px var(--sans);text-align:center}
.tool-why{display:block;font-size:15.5px;line-height:1.5;padding-top:3px}
.tool-math{display:block;margin-top:6px;font-family:var(--serif);font-size:19px;line-height:1.7;overflow-wrap:anywhere}
.tool-step-note{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--paper-muted)}

/* long division: the table scrolls inside its own box, never the page */
.tool-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 0;border:1px solid var(--paper-2);border-radius:12px;background:#FFFBF7}
.tool-table{border-collapse:collapse;width:100%;margin:0;font:400 15px/1.4 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.tool-table th{padding:8px 12px;background:var(--paper-2);text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-muted)}
.tool-table td{padding:7px 12px;border-top:1px solid var(--paper-2)}
.tool-table td.tool-digit{font-weight:700}
.tool-table tr.is-rep td{background:rgba(248,200,168,.32)}

/* ---------- math typography ---------- */
.tool i{font-family:var(--serif);font-style:italic}
.tool sup{font-size:.62em;line-height:0;vertical-align:.7em}
.tool-fr{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:middle;margin:0 .12em;
  font-size:.82em;line-height:1.12;text-align:center}
.tool-fr-n{padding:0 .2em .06em;border-bottom:1.5px solid currentColor}
.tool-fr-d{padding:.06em .2em 0}
/* repeating digits: a bar over them */
.rep{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 0;background-size:100% .065em;padding-top:.04em}
/* radical: an SVG tick stretched to the radicand's height, the radicand's top border is the vinculum */
.tool-rad{display:inline-flex;align-items:stretch;white-space:nowrap;vertical-align:baseline}
.tool-rad-sign{position:relative;flex:none;width:.58em;margin-right:-.02em}
.tool-rad-sign svg{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;overflow:visible;fill:none;stroke:currentColor;
  stroke-width:.075em;stroke-linejoin:round;stroke-linecap:round}
.tool-rad-in{align-self:baseline;padding:.1em .1em 0 .06em;border-top:.075em solid currentColor;line-height:1.1}
.tool-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- compact embed inside a blog post ---------- */
.tool--compact{margin:24px 0}
.tool--compact .tool-panel{padding:18px}
.tool--compact .tool-paper{padding:20px 22px}
.tool--compact .tool-answer{font-size:30px}
.tool--compact .tool-math{font-size:17.5px}
.tool--compact .tool-why{font-size:15px}
.tool--compact .tool-input{min-height:48px;font-size:20px}
.tool--compact .tool-slash{line-height:48px}
.tool--compact .tool-sqrt-glyph{font-size:36px;line-height:48px}
.tool-more{margin:12px 2px 0;font-size:15px}
.tool-more a{color:var(--peach);font-weight:600;text-decoration-color:rgba(248,200,168,.4)}
.tool-more a:hover{text-decoration-color:var(--peach)}

/* ---------- narrow screens ---------- */
@media (max-width:520px){
  .tool-panel{padding:16px}
  .tool-paper{padding:20px 16px}
  .tool-row{gap:8px}
  .tool-input{padding:10px 10px;font-size:20px}
  .tool-seg-btn{font-size:14px;padding:8px}
  .tool .tool-steps>li{padding-left:36px}
  .tool-math{font-size:18px}
  .tool-facts{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* fallback shown only when JavaScript is off */
.tool-noscript{background:var(--card);border-radius:var(--r-card);padding:18px 20px;color:var(--text-2)}