/* The tool page's own styles (docs/design/prototype/pages/tool.html), generated by scripts/page-styles.py;
   check with --check. Loaded only on the pages built from it (inc/page-design.php). */

/* Elementor's Atomic div blocks, given back the browser's defaults inside the page, except those whose kit class
   sets its own. */
.elementor .pg-tool.e-div-block-base, .elementor .pg-tool .e-div-block-base:where(:not(.btn-line, .btn-red, .btn-white, .btn-ghost, .pill, .hero-wrap, .hero, .frame, .rule, .head, .eyebrow, .cols, .ico, .end-wrap, .end, .tile, .t1, .t2, .t3, .t4, .btn-wa, .fm-head, .fm-contact, .fm-main)) { padding: 0; min-width: 0; }

/* A tool page, shown with the email health check. The pattern is general for all eight tools: a compact red
   hero, a tool box (a field row and a button, then a result as a list of findings with state chips), an aside
   with the Send us this report card and a key to the states, the tool's other states, an ad slot, questions
   with the answer first, a second ad slot, related reading and the closing band. The email header analyser and
   the signature generator carry no ad slot (docs/content/advertising.md). The state classes mirror the real markup (li.is-ok,
   .is-weak, .is-missing, .is-unknown). */
.elementor .pg-tool .hero { padding: clamp(56px, 8vw, 96px) 20px clamp(64px, 9vw, 112px); }
.elementor .pg-tool .hero h1 { margin: 24px auto 16px; }
.elementor .pg-tool .hero .pill { padding: 7px 18px 7px 8px; }
.elementor .pg-tool .covers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px auto 0; padding: 0; list-style: none; max-width: 640px; }
.elementor .pg-tool .covers li { font: 12px/1 var(--mono); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; padding: 6px 10px; }

/* The work area: the tool box beside the aside. */
.elementor .pg-tool .work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 8px; padding: 0 8px 8px; align-items: start; }

/* The field row: label and input per field, the button at the end; it stacks on a phone. */

/* A status line in place of a result: checking, refused, paced or failed. */

/* The result: a head with the summary, then one row per finding. */
.elementor .pg-tool .findings li.is-weak { box-shadow: inset 2px 0 0 var(--signal); }
.elementor .pg-tool .findings li.is-missing { box-shadow: inset 2px 0 0 var(--attack); }
@keyframes pg-tool-in { from { opacity: 0; transform: translateY(6px); } }

/* The state chips: OK neutral, Weak in the brand red, Missing in the alert red, Can't see dashed and quiet. */
.elementor .pg-tool .chip { display: inline-flex; align-items: center; gap: 6px; align-self: start; justify-self: start; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--ink); font: 500 12px/1 var(--mono); }
.elementor .pg-tool .chip svg { width: 13px; height: 13px; flex: none; }
.elementor .pg-tool .is-weak .chip svg, .elementor .pg-tool .is-unknown .chip svg { stroke-width: 3; }
.elementor .pg-tool .is-ok .chip { color: var(--ink); }
.elementor .pg-tool .is-weak .chip { background: var(--tint); border-color: transparent; color: var(--signal-ink); }
.elementor .pg-tool .is-missing .chip { background: var(--attack-tint); border-color: transparent; color: var(--attack); }
.elementor .pg-tool .is-unknown .chip { background: transparent; border-style: dashed; color: var(--ink-3); }

/* The aside: the red report card and the key to the states. */
.elementor .pg-tool .aside { display: grid; gap: 8px; position: sticky; top: 84px; }
.elementor .pg-tool .aside .card { min-height: 0; padding: 26px; }
.elementor .pg-tool .aside .card.red h3 { font-size: 22px; margin-bottom: 8px; }
.elementor .pg-tool .aside .toast { margin: 20px 0 22px; font-size: 14px; }
.elementor .pg-tool .aside .card.red .btn { align-self: flex-start; }
.elementor .pg-tool .key { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.elementor .pg-tool .key li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--ink-2); }

/* The tool's other states, labelled for review. */
.elementor .pg-tool .states { padding: 32px 8px 8px; }
.elementor .pg-tool .states-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; padding: 0 14px 14px; }
.elementor .pg-tool .states-head p { font: 12px/1.4 var(--mono); color: var(--ink-3); }
.elementor .pg-tool .states-head .eyebrow { margin: 0; }
.elementor .pg-tool .state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.elementor .pg-tool .state { border: 1px dashed var(--line); border-radius: 6px; padding: 16px; background: var(--paper); display: flex; flex-direction: column; gap: 12px; }
.elementor .pg-tool .state-name { font: 12px/1 var(--mono); color: var(--ink-3); display: flex; justify-content: space-between; }
.elementor .pg-tool .state .input { height: 40px; font-size: 14px; }
.elementor .pg-tool .state .msg { font-size: 14px; }
.elementor .pg-tool .state .findings { margin: 0; }
.elementor .pg-tool .state .findings li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; border: 0; }
.elementor .pg-tool .state .findings .line { font-size: 14px; }

/* Questions, answer first. */
.elementor .pg-tool .qa { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; padding: 88px 48px 96px; }
.elementor .pg-tool .qa-intro { position: sticky; top: 100px; align-self: start; }
.elementor .pg-tool .qa-intro h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; }
.elementor .pg-tool .qa-intro p:not(.eyebrow) { margin-top: 14px; color: var(--ink-2); font-size: 17px; }
.elementor .pg-tool .qa-list > div { padding: 28px 0; border-top: 1px solid var(--line); }
.elementor .pg-tool .qa-list > div:first-child { border-top: 0; padding-top: 0; }
.elementor .pg-tool .qa-list h3 { font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
.elementor .pg-tool .qa-list p { color: var(--ink-2); max-width: 62ch; }
.elementor .pg-tool .qa-list p + p { margin-top: 10px; }
.elementor .pg-tool .qa-list p strong { color: var(--ink); font-weight: 600; }
.elementor .pg-tool .terms { margin: 16px 0 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.elementor .pg-tool .terms > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.elementor .pg-tool .terms > div:first-child { border-top: 0; }
.elementor .pg-tool .terms dt { font: 500 13px/1.6 var(--mono); }
.elementor .pg-tool .terms dd { margin: 0; color: var(--ink-2); }

/* Related reading. */
.elementor .pg-tool .reading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.elementor .pg-tool .reading .card { min-height: 220px; text-decoration: none; color: var(--ink); transition: border-color 0.2s; }
.elementor .pg-tool .reading .card:hover { border-color: var(--ink); }
.elementor .pg-tool .reading .card h3 { margin-top: 30px; font-size: 20px; line-height: 1.25; max-width: 22ch; }
.elementor .pg-tool .reading .go { margin-top: auto; padding-top: 22px; font-weight: 500; font-size: 15px; }
.elementor .pg-tool .reading .go .ic { color: var(--signal); }
.elementor .pg-tool .reading .card:hover .go .ic { color: var(--ink); }
.elementor .pg-tool .more { text-align: center; padding: 20px 16px 40px; font-size: 15px; }
.elementor .pg-tool .more a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }

/* An ad slot's own frame (D14 T01 §3): the slot as rz_ads_slot() renders it, centred, between two dashed rules, with the questions frame's 88px above and below, so the slot is at least 150px from the tool's last control (D14 T01 §6). */
.elementor .pg-tool .ad-frame { padding: 88px 16px; }

@media (max-width: 1080px) {
	.elementor .pg-tool .work { grid-template-columns: minmax(0, 1fr); }
	.elementor .pg-tool .aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor .pg-tool .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.elementor .pg-tool .qa { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 64px 20px 72px; }
	.elementor .pg-tool .qa-intro { position: static; }
	.elementor .pg-tool .reading { grid-template-columns: minmax(0, 1fr); }
	.elementor .pg-tool .reading .card { min-height: 0; }
}
@media (max-width: 680px) {
	.elementor .pg-tool .aside { grid-template-columns: minmax(0, 1fr); }
	.elementor .pg-tool .state-grid { grid-template-columns: minmax(0, 1fr); }
	.elementor .pg-tool .terms > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.elementor .pg-tool .key li { grid-template-columns: 96px minmax(0, 1fr); }
}

/* The back pill's arrow comes before its words (tool.html:155). The hero is a part, so it keeps the
   prototype's <i aria-hidden="true">, drawn as the prototype draws it, and the badge the theme draws after
   a pill's words (base.css) is left out. */
.elementor .pg-tool .pill i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--signal); font-style: normal; font-size: 14px; }
.elementor .pg-tool .pill::after { content: none; }

/* A link in the questions (the sources behind the SPF builder's values, D12 T01 §7) takes the page's own link
   style, the one "See all eight free tools" has (tool.html:123); the approved page has no link there. */
.elementor .pg-tool .qa-list a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }