/* Tools: the search snippet preview and the A/B test calculator. Loaded on the tools pages only; tokens.css and site.css come first. */
.island[data-island-state="loading"] { cursor: progress; }
.tool { display: grid; gap: var(--s-6); }
.tool__example { margin: 0; }
.tool__form { display: grid; gap: var(--s-4); align-content: start; }
.tool textarea { width: 100%; min-height: 7.5rem; padding: var(--s-2) var(--ctl-px-sm); background: var(--c-surface); color: var(--c-fg); border: 1px solid var(--c-control); border-radius: var(--r-control); font: inherit; font-size: var(--t-md); line-height: var(--lh-body); resize: vertical; }
.tool[data-mode="static"] input[readonly], .tool[data-mode="static"] textarea[readonly] { background: var(--c-subtle); }
.tool__measure { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tool__choice { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); min-width: 0; margin: 0; padding: 0; border: 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-fg-2); }
.tool__choice legend { padding: 0; margin-bottom: var(--s-1); }
.tool__choice label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--ctl-h-touch); color: var(--c-fg); font-size: var(--t-md); }
.tool__choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--c-action); }
.tool__choice .tool__measure { flex-basis: 100%; }
.tool__out { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.tool__out > h2 { margin-bottom: 0; }
.tool__out .notice { margin-top: 0; }
.tool__out > p:not(.notice):not(.meta) { max-width: var(--w-prose); }
.tool__figure { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); color: var(--c-fg); }
.tool__notes { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.tool__note, .tool__verdict { display: flex; align-items: flex-start; gap: var(--s-2); }
.tool__mark { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool__verdict .tool__mark { width: 20px; height: 20px; margin-top: 0; }
.tool__note--fits .tool__mark { color: var(--c-positive); }
.tool__note--cut .tool__mark { color: var(--c-warning); }
.tool__note--empty .tool__mark { color: var(--c-muted); }
.tool__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.tool__status { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-fg-2); }
.tool__status:empty { display: none; }

/* The snippet preview: the computed lines at the result's sizes, one line per span, so the cut shows where the model puts it. */
.snip__frame { overflow-x: auto; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-surface); background: var(--c-surface); }
.snip__crumb { margin-bottom: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snip__title { font-size: var(--t-xl); line-height: var(--lh-xl); color: var(--c-fg); }
.snip__desc { margin-top: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-body); color: var(--c-fg-2); }
.snip__title span, .snip__desc span { display: block; white-space: nowrap; }
@media (min-width: 1024px) {
  .snip { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; column-gap: var(--s-8); }
  .snip > .tool__example { grid-column: 1 / -1; }
}

/* The A/B test calculator: planning and reading, each a form beside its result. */
.ab { gap: var(--s-12); }
.ab__half { display: grid; gap: var(--s-5); }
.ab__half > h2 { margin-bottom: 0; }
.ab__variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab__variants fieldset { display: grid; gap: var(--s-3); align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.ab__variants legend { padding: 0; margin-bottom: var(--s-2); font-weight: var(--fw-semibold); color: var(--c-fg); }
.ab__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--w-prose); }
@media (min-width: 640px) { .ab__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab__facts dd { font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .ab__half { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; column-gap: var(--s-8); }
  .ab__half > h2, .ab > .tool__example { grid-column: 1 / -1; }
}
.abchart { display: grid; gap: var(--s-2); padding-bottom: var(--s-5); max-width: var(--w-prose); }
.abchart__label { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-muted); }
.abchart__track { position: relative; height: 28px; background: var(--c-subtle); border-radius: var(--r-control); }
.abchart__zero { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--c-control); }
.abchart__zero span { position: absolute; top: 100%; margin-top: var(--s-1); transform: translateX(-50%); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-muted); }
.abchart__range { position: absolute; top: 50%; height: 8px; margin-top: -4px; background: var(--c-chart); }
.abchart__point { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--c-surface); border: 2px solid var(--c-chart); border-radius: 50%; }

/* The explanations under each tool. */
.block > .prose { max-width: var(--w-prose); color: var(--c-fg-2); }
.block > .prose + .prose { margin-top: var(--s-3); }