/*!
 * @Rank Tools — the shared stylesheet.
 *
 * Every tool in this plugin loads this file plus one small stylesheet of its
 * own. Before the merge each of the nineteen tools carried its own copy of the
 * palette and of the chrome below; the palette alone was written 19 tools × 3
 * blocks = 1,898 custom-property declarations, and changing one colour meant
 * editing nineteen files. This is the one place it lives now.
 *
 * ── Where the values come from ─────────────────────────────────────────────
 * at-rank.com, whose Elementor CI variables are the authoritative system. The
 * token names on the right are the site's own:
 *
 *   #1a044a  --color-ci-dark-pr-3    structure (the ink)
 *   #e8a002  --color-ci-light-btn-1  the one call to action
 *   #d09001  --color-ci-dark-sec-1   its hover
 *   #e1f1fc  accent                  the selected/active tint
 *   #494949  text                    body copy
 *   #ededed  --color-ci-light-border-1
 *   8/10/20  --border-radius-ci-1/2/3
 *
 * ── Two departures from at-rank.com, both deliberate ───────────────────────
 * 1. TEXT ON THE AMBER IS NEAR-BLACK, NOT WHITE. at-rank.com puts #fff on
 *    #e8a002, which measures 2.22:1 and fails WCAG AA at every size. Near-black
 *    on the same amber is 8.35:1 and keeps the brand colour exactly.
 *    The CI hover #8b6001 is not used for the same reason: near-black on it is
 *    3.33:1. --color-ci-dark-sec-1 #d09001 is the CI's own next step and holds
 *    6.77:1, so the hover stays inside the system and stays legible.
 * 2. NO CARD SHADOW. at-rank.com's cards carry 4px 4px 12px rgba(0,0,0,.16).
 *    A tool is something people come to, use and leave, so areas here are
 *    separated by hairlines instead. Set --shadow to the CI value in one place
 *    if that decision is ever reversed.
 *
 * Every contrast figure in this file was measured, not remembered.
 *
 * ── Containment (ADR-008) ──────────────────────────────────────────────────
 * Every rule sits under .atrank-tool-root, the class the output class puts on
 * each tool's wrapper alongside the tool's own root class. Nothing here touches
 * :root, html, body or a bare *. A tool is a section inside somebody else's
 * page and must leave that page alone.
 */

/* ── Tokens ────────────────────────────────────────────────────────────────
   Light only. There is no dark palette and no toggle — every tool renders in
   this one look regardless of the visitor's OS or browser preference. */
.atrank-tool-root {
	--bg: #f7f7f8;
	--panel: #ffffff;
	--panel2: #fafafa;
	--inset: #f4f4f5;

	/* --line   a quiet boundary between areas — at-rank.com's own border colour.
	   --line2  the border of anything that is OPERATED. Deliberately far darker
	            than #ededed (1.17:1 on white): a control edge has to hold 3:1 to
	            be seen at all, and this one is 4.83:1. */
	--line: #ededed;
	--line2: #6b7280;

	/* The ink. 18.10:1 on white, 16.91:1 on the ground. */
	--accent: #1a044a;
	--accent-h: #12033a;
	--accent-soft: #e1f1fc;
	--on-accent: #ffffff;

	/* The one call to action. See the contrast note in the banner. */
	--cta: #e8a002;
	--cta-h: #d09001;
	--on-cta: #1a1205;

	/* Meaning, not decoration. Darkened from the usual #16a34a / #e8a002, which
	   reach only 3.3:1 and 2.2:1 as TEXT on white; these hold 5.02 and 4.59. */
	--ok: #15803d;
	--warn: #a16a00;
	--err: #dc2626;
	--ok-soft: #eaf6ee;
	--warn-soft: #fdf4e3;
	--err-soft: #fdeaea;

	--txt: #161616;
	--muted: #494949; /* at-rank.com's body colour, 9.00:1 */
	--dim: #6b7280; /* 4.83:1 */

	--track: #e2e3e6;
	--thumb: #ffffff;
	--hover: rgba(26, 4, 74, 0.055);

	/* at-rank.com rounds to 8 / 10 / 20. Controls take the smallest, containers
	   the middle one; the 20 px is the site's pill and is not used inside a tool. */
	--r: 8px;
	--r-lg: 10px;
	--shadow: none;
	--card-shadow: none;

	/* One ring for every focused element: the panel colour inside as a gap, the
	   ink outside, so it stands against any ground. */
	--ring: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--field-inset: inset 0 0 0 1px var(--line);

	/* No font ships. The tools live on at-rank.com, whose Roboto/Open Sans the
	   page already sets — bundling a copy would load the same faces twice. Only
	   the figure alignment is pinned, because pixel columns have to line up. */
	--font: inherit;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* A marked run — what a find replaced, what a cleaner changed. Amber-tinted
	   rather than the CTA amber itself, so a highlight is never mistaken for a
	   button. Near-black on it is 15.48:1. */
	--hit: #ffe9b0;
	--hit-line: #e8a002;
	--on-hit: #1a1205;

	/* The reading box that eight tools put text into. Viewport-aware, so it does
	   not cost a page of scrolling on a laptop before anything is typed. */
	--area-size: 14px;
	--area-line: 1.6;
	--area-min: min(260px, max(150px, 24vh));
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.atrank-tool-root,
.atrank-tool-root * {
	box-sizing: border-box;
}

/* The hidden attribute has to WIN. The Converter Tool once kept a bar on screen
   that was correctly marked hidden, because the bar carried a class with
   display:flex and an author rule beats the browser's own display:none for
   [hidden]. Nothing in the code looked wrong. One line removes the whole class
   of mistake, for every tool at once. */
.atrank-tool-root [hidden] {
	display: none !important;
}

.atrank-tool-root ::selection {
	background: var(--accent-soft);
	color: inherit;
}

.atrank-tool-root {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--txt);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
}

/* ── Header ────────────────────────────────────────────────────────────────
   Sticky, so the status stays visible while a long result scrolls. A theme with
   a fixed header of its own sets --atrank-header-top and this sits below it. */
.atrank-tool-root header {
	position: sticky;
	top: var(--atrank-header-top, 0px);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 12px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.atrank-tool-root .atrank-logo {
	font-weight: 700;
	font-size: 13px;
	color: var(--accent);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.atrank-tool-root .atrank-status {
	margin-left: auto;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--dim);
	white-space: nowrap;
}
.atrank-tool-root .atrank-status.is-ok {
	color: var(--ok);
}
.atrank-tool-root .atrank-status.is-err {
	color: var(--err);
}

/* ── Layout ─────────────────────────────────────────────────────────────
   1280px is the one width every tool renders at: the outer wrapper caps and
   centres here, in the shared sheet, so a tool cannot quietly drift narrower
   or wider than its neighbours by carrying its own copy of this rule. */
.atrank-tool-root main {
	display: block;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 12px 12px;
}

.atrank-tool-root .atrank-card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 10px 12px 12px;
	box-shadow: var(--card-shadow);
}

.atrank-tool-root .atrank-card > h2,
.atrank-tool-root .atrank-cardhead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: -0.01em;
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   Controls, not pills: at-rank.com rounds its buttons to 20 px because they are
   marketing buttons on a marketing page. Inside a tool they are controls and
   take the control corner. */
.atrank-tool-root .atrank-btn {
	appearance: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r);
	cursor: pointer;
	border: 1px solid transparent;
	transition:
		background 0.18s var(--ease),
		color 0.18s var(--ease),
		border-color 0.18s var(--ease),
		opacity 0.18s var(--ease);
}
.atrank-tool-root .atrank-btn:focus-visible {
	outline: none;
	box-shadow: var(--ring);
}
.atrank-tool-root .atrank-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* One call to action per panel. Near-black on the amber, never white. */
.atrank-tool-root .atrank-btn-cta {
	background: var(--cta);
	color: var(--on-cta);
	border-color: var(--cta);
}
.atrank-tool-root .atrank-btn-cta:hover:not(:disabled) {
	background: var(--cta-h);
	border-color: var(--cta-h);
}

/* The filled non-generative action: the ink, not the amber. */
.atrank-tool-root .atrank-btn-primary {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}
.atrank-tool-root .atrank-btn-primary:hover:not(:disabled) {
	background: var(--accent-h);
	border-color: var(--accent-h);
}

.atrank-tool-root .atrank-btn-ghost,
.atrank-tool-root .atrank-btn-secondary {
	background: transparent;
	color: var(--muted);
	border-color: var(--line2);
}
.atrank-tool-root .atrank-btn-ghost:hover:not(:disabled),
.atrank-tool-root .atrank-btn-secondary:hover:not(:disabled) {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--hover);
}

/* ── Small print ───────────────────────────────────────────────────────── */
.atrank-tool-root .atrank-hint {
	font-size: 11.5px;
	color: var(--dim);
}

.atrank-tool-root .atrank-policy {
	margin: 2px 0 0;
	text-align: center;
	font-size: 11.5px;
	color: var(--dim);
}
.atrank-tool-root .atrank-policy a {
	color: var(--accent);
}

/* ── Notices ───────────────────────────────────────────────────────────── */
.atrank-tool-root .atrank-notice {
	margin: 8px 0 0;
	padding: 6px 9px;
	border-radius: var(--r);
	font-size: 12px;
	line-height: 1.5;
	border: 1px solid var(--line);
	background: var(--panel2);
	color: var(--txt);
}
.atrank-tool-root .atrank-notice.is-err {
	background: var(--err-soft);
	border-color: var(--err);
}
.atrank-tool-root .atrank-notice.is-warn {
	background: var(--warn-soft);
	border-color: var(--warn);
}
.atrank-tool-root .atrank-notice.is-ok {
	background: var(--ok-soft);
	border-color: var(--ok);
}
.atrank-tool-root .atrank-notice.is-note {
	background: var(--panel2);
	border-color: var(--accent);
}

/* The one thing on the page that proves JavaScript arrived: it ships visible
   and the script removes it. */
.atrank-tool-root .atrank-nojs {
	margin: 0;
	padding: 10px 12px;
	font-size: 12.5px;
	color: var(--txt);
	background: var(--warn-soft);
	border-top: 1px solid var(--warn);
}

/* ── Toast ─────────────────────────────────────────────────────────────────
   Deliberately position:fixed, and therefore the one thing anchored to the
   window rather than to the tool: feedback that scrolls out of view is feedback
   nobody sees. */
.atrank-tool-root .atrank-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 14px);
	max-width: min(460px, 88vw);
	padding: 7px 12px;
	border-radius: var(--r);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
	opacity: 0;
	pointer-events: none;
	z-index: 100000;
	transition:
		opacity 0.22s var(--ease),
		transform 0.22s var(--ease);
}
.atrank-tool-root .atrank-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
.atrank-tool-root .atrank-toast.is-ok {
	background: var(--ok);
	color: #fff;
}
.atrank-tool-root .atrank-toast.is-err {
	background: var(--err);
	color: #fff;
}

/* ── Narrow ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.atrank-tool-root header {
		padding: 10px 12px;
		gap: 8px;
	}
	.atrank-tool-root .atrank-status {
		order: 9;
		margin-left: 0;
		width: 100%;
		text-align: left;
	}
	.atrank-tool-root main {
		padding: 12px;
	}
}

/* Somebody who asked for less motion gets the states without the movement. */
@media (prefers-reduced-motion: reduce) {
	.atrank-tool-root * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}