/* Rabbit Rank app: the website's design language (theme/rabbitrank/assets/src/css) on Filament.
   Loaded after Filament's own (layered) theme, so plain rules here win. Light mode only.
   Tokens and components are copied from the website: Outfit + JetBrains Mono, ink and teal,
   hairlines, the format line art, the authority gauge, plan cards with posts drawn as articles
   and the teal unit squares, and mono price lines on hairlines. Nothing floats over content. */

/* ---------- Fonts (self-hosted, as on the website) ---------- */
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 800;font-display:swap;src:url("../fonts/outfit-normal-300-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/jetbrains-mono-normal-400-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit Fallback";src:local("Arial");size-adjust:99%;ascent-override:100%;descent-override:26%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root {
	--ink: #0B1316;
	--ink-2: #3F4B50;
	--ink-3: #5F6C72;
	--ink-4: #8E9A9F;
	--line: #E3E8EA;
	--line-2: #CFD7DA;
	--field: #6B787E;
	--paper: #FFFFFF;
	--mist: #F3F6F7;
	--mist-2: #E9EEF0;
	--grid: #EDF1F2;
	--canvas: #F7F9FA;
	--teal: #17A2B8;
	--teal-ink: #0A6E7E;
	--teal-ink-2: #085E6B;
	--teal-wash: #E6F5F8;
	--teal-soft: #BFE6ED;
	--night: #0B1316;
	--night-2: #141F23;
	--night-line: #26343A;
	--on-night: #FFFFFF;
	--on-night-2: #A7B3B8;
	--teal-night: #5CCBDC;
	--warn: #A5661A;
	--warn-wash: #FDF6EC;
	--warn-line: #F3D3A3;
	--bad: #B23A2E;
	--bad-wash: #FDF1EF;
	--good: #1F7A4D;
	--good-wash: #EDF7F1;
	--sans: "Outfit", "Outfit Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--serif: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
	--fw-display: 720;
	--fw-h2: 680;
	--fw-title: 620;
	--fw-strong: 600;
	--fw-ui: 560;
	--fw-medium: 500;
	--tr-display: -0.02em;
	--tr-h2: -0.015em;
	--tr-h3: -0.01em;
	--tr-title: -0.005em;
	--tr-caps: 0.09em;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--sh-1: 0 1px 2px rgba(11, 19, 22, .05);
	--sh-2: 0 1px 2px rgba(11, 19, 22, .05), 0 14px 32px -18px rgba(11, 19, 22, .22);
	--sh-3: 0 2px 4px rgba(11, 19, 22, .04), 0 40px 80px -32px rgba(11, 19, 22, .30);
	--radius-s: 6px;
	--radius: 10px;
	--radius-l: 16px;
	--rr-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Filament chrome, re-skinned
   ========================================================================== */
html.fi { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html.fi body.fi-body {
	font-family: var(--sans);
	font-feature-settings: "ss01" 0;
	color: var(--ink);
	background: var(--canvas);
}
.fi-body :is(code, kbd, samp, pre) { font-family: var(--mono); }
.fi-body ::selection { background: var(--teal-soft); color: var(--ink); }
.fi-body :focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }

/* Topbar and sidebar: white, hairlines, no shadows. */
.fi-topbar { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.fi-topbar-ctn { box-shadow: none; }
.fi-sidebar { background: var(--paper); }
@media (min-width: 1024px) {
	.fi-sidebar { box-shadow: 1px 0 0 var(--line); }
	.fi-sidebar-header { box-shadow: none; }
}
.fi-sidebar-header { height: 64px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.fi-sidebar-nav { padding-top: 18px; gap: 18px; }
.fi-sidebar-group-label { font-size: 11.5px; font-weight: var(--fw-strong); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3); }
.fi-sidebar-item-btn { gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 9px; }
.fi-sidebar-item-label { font-size: 15px; font-weight: var(--fw-medium); color: var(--ink-2); }
.fi-sidebar-item-icon { width: 20px; height: 20px; color: var(--ink-3); }
.fi-sidebar-item-btn:hover { background: var(--mist); }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: var(--ink); }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn { background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: var(--ink); font-weight: var(--fw-strong); }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--teal-ink); }
.fi-sidebar-item .fi-badge { min-width: 22px; justify-content: center; }


/* Page header */
.fi-header { gap: 16px; }
.fi-header-heading,
.fi-simple-header-heading {
	font-family: var(--sans);
	font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem);
	line-height: 1.12;
	font-weight: var(--fw-h2);
	letter-spacing: var(--tr-h2);
	color: var(--ink);
	text-wrap: balance;
}
.fi-header-subheading,
.fi-simple-header-subheading {
	max-width: 70ch;
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-2);
	text-wrap: pretty;
}
.fi-breadcrumbs-item-label { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--ink-3); }
.fi-main { padding-block: 28px 64px; }
@media (min-width: 1024px) { .fi-main { padding-inline: 40px; padding-block: 36px 80px; } }
.fi-page-header-main-ctn { row-gap: 28px; }
.fi-page-content { row-gap: 28px; }

/* Buttons */
.fi-btn {
	min-height: 40px;
	padding-inline: 16px;
	gap: 8px;
	border-radius: var(--radius);
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: var(--fw-ui);
	letter-spacing: 0;
	box-shadow: none;
}
.fi-btn.fi-size-lg, .fi-btn.fi-size-xl { min-height: 48px; padding-inline: 22px; font-size: 16px; }
.fi-btn.fi-size-sm, .fi-btn.fi-size-xs { min-height: 34px; padding-inline: 12px; font-size: 13.5px; border-radius: 8px; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(label):not([aria-pressed]) { --bg: var(--teal-ink); --hover-bg: var(--teal-ink-2); --text: #fff; --hover-text: #fff; background: var(--teal-ink); color: #fff; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(label):not([aria-pressed]):hover { background: var(--teal-ink-2); }
.fi-btn.fi-color-gray:not(.fi-outlined) { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.fi-btn.fi-color-gray:not(.fi-outlined):hover { background: var(--mist); box-shadow: inset 0 0 0 1px var(--field); }
.fi-link { font-weight: var(--fw-ui); }

/* Sections and cards */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) { border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.fi-section-header-heading { font-size: 17px; font-weight: var(--fw-title); letter-spacing: var(--tr-title); color: var(--ink); }
.fi-section-header-description { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.fi-section.fi-aside .fi-section-content-ctn { border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.fi-fieldset { border-radius: 12px; border-color: var(--line); }
.fi-fieldset > legend { font-size: 14px; font-weight: var(--fw-title); color: var(--ink); }

/* Fields: field-grey borders (3:1 on white), teal focus, as on the website */
.fi-input-wrp { border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--field); background: var(--paper); }
.fi-input-wrp:not(.fi-disabled):hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.fi-input-wrp:focus-within:not(.fi-invalid) { box-shadow: inset 0 0 0 1px var(--teal-ink), 0 0 0 3px rgba(23, 162, 184, .22); }
.fi-input-wrp.fi-disabled { background: var(--mist); box-shadow: inset 0 0 0 1px var(--line-2); }
.fi-input { font-size: 15.5px; color: var(--ink); }
.fi-input::placeholder { color: var(--ink-3); opacity: 1; }
.fi-input-wrp-prefix, .fi-input-wrp-suffix { font-family: var(--mono); font-size: 13.5px; color: var(--ink-3); }
.fi-fo-field-label-content, .fi-fo-field-wrp-label { font-size: 14.5px; font-weight: var(--fw-ui); color: var(--ink); }
.fi-fo-field-wrp-helper-text, .fi-sc-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.fi-checkbox-input, .fi-toggle { --tw-ring-color: var(--field); }

/* Tables */
.fi-ta-ctn { border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.fi-ta-header-cell { background: var(--mist); }
.fi-ta-header-cell,
.fi-ta-header-cell :is(span, button) { font-size: 11.5px; font-weight: var(--fw-strong); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.fi-ta-text-item-label { font-size: 14.5px; color: var(--ink); }
.fi-ta-text-description, .fi-in-text-description { font-size: 13px; color: var(--ink-3); }
.fi-ta-row:hover { background: color-mix(in srgb, var(--mist) 55%, var(--paper)); }
.fi-ta-empty-state-heading { font-size: 18px; font-weight: var(--fw-title); color: var(--ink); }
.fi-ta-empty-state-description { font-size: 15px; color: var(--ink-3); }
.fi-pagination { font-size: 14px; }

/* Badges: the website's rr-badge (6px radius, 12.5px semibold) */
.fi-badge { min-height: 24px; padding: 2px 9px; border-radius: var(--radius-s); font-size: 12.5px; font-weight: var(--fw-strong); letter-spacing: 0; box-shadow: none; }

/* Tabs */
.fi-tabs { border-radius: 12px; box-shadow: 0 0 0 1px var(--line); background: var(--mist); padding: 4px; }
.fi-tabs-item { border-radius: 9px; font-weight: var(--fw-ui); }
.fi-tabs-item.fi-active { background: var(--ink); }
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-tabs-item-icon { color: #fff; }

/* Modals and dropdowns */
.fi-modal-window { border-radius: 18px; }
.fi-modal-heading { font-size: 19px; font-weight: var(--fw-title); letter-spacing: var(--tr-title); }
.fi-modal-description { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.fi-dropdown-panel { border-radius: 12px; box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
.fi-dropdown-list-item-label { font-size: 14.5px; }

/* Infolists */
.fi-in-entry-label, .fi-in-entry-wrp-label { font-size: 13px; font-weight: var(--fw-ui); color: var(--ink-3); }
.fi-in-text-item { font-size: 15px; color: var(--ink); }
.rr-pre, .rr-pre * { white-space: pre-line; }
/* Placeholders ("—", "Never", "No notes yet.") at text contrast (4.5:1 or more), not Filament's light grey. */
.fi-ta-placeholder, .fi-in-placeholder, .fi-ta-text-item.fi-color-gray, .fi-in-text-item.fi-color-gray { color: var(--ink-3); }

/* Notifications: Filament's toasts sit in a corner; keep them small and calm. */
.fi-no-notification { border-radius: 12px; box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
.fi-no-notification-title { font-weight: var(--fw-title); }

/* Logo */
.rr-logo { display: flex; align-items: center; gap: 10px; }
.rr-logo img { display: block; width: auto; height: 28px; }
.rr-logo__tag { padding: 2px 7px; border-radius: 6px; background: var(--ink); font: 600 11px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; }

/* Sidebar help */
.rr-side-help { margin: 0 16px 16px; padding: 14px 14px 15px; border-radius: 12px; background: var(--mist); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rr-side-help b { display: block; margin-bottom: 3px; font-size: 14px; font-weight: var(--fw-title); color: var(--ink); }
.rr-side-help a { font-weight: var(--fw-ui); color: var(--teal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ==========================================================================
   Sign up / Log in (simple layout with the product aside)
   ========================================================================== */
.fi-simple-layout { background: var(--paper); }
.fi-simple-main { padding-block: 40px; }
.fi-simple-main.fi-width-lg { max-width: 30rem; }
.fi-simple-page-content { gap: 26px; }
.fi-simple-header { align-items: flex-start; text-align: left; }
.fi-simple-header .fi-logo { margin-bottom: 18px; }
.fi-simple-header-heading { font-size: 30px; }
.fi-simple-header-subheading { display: grid; gap: 10px; justify-items: start; }
.rr-picked {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 5px 12px;
	border: 1px solid var(--teal-soft);
	border-radius: 8px;
	background: var(--teal-wash);
	font: 500 13px/1.3 var(--mono);
	color: var(--teal-ink);
}
.rr-picked::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.rr-auth-alt { font-size: 15px; color: var(--ink-2); }
.rr-auth-alt a, .rr-auth-alt .fi-link { color: var(--teal-ink); font-weight: var(--fw-ui); }
.fi-simple-page .fi-btn.fi-color-primary { min-height: 48px; font-size: 16px; }
.rr-or { display: flex; align-items: center; gap: 14px; margin: 4px 0; font-size: 13px; color: var(--ink-3); }
.rr-or::before, .rr-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rr-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--field);
	font-size: 15.5px;
	font-weight: var(--fw-ui);
	color: var(--ink);
	text-decoration: none;
}
.rr-google:hover { background: var(--mist); }
.rr-google svg { width: 18px; height: 18px; }

.rr-auth-aside { display: none; }
.fi-simple-layout:has(.rr-auth-aside) .fi-simple-main { margin-block: 32px; box-shadow: none; background: transparent; }
@media (max-width: 640px) { .fi-simple-layout:has(.rr-auth-aside) .fi-simple-main { padding-inline: 20px; margin-block: 16px; } }
@media (min-width: 1100px) {
	.fi-simple-layout:has(.rr-auth-aside) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		grid-template-rows: minmax(100dvh, auto);
		align-items: stretch;
		min-height: 100dvh;
		padding: 0;
	}
	.fi-simple-layout:has(.rr-auth-aside) > .fi-simple-main-ctn { display: flex; grid-column: 1; grid-row: 1; align-items: center; justify-content: center; padding: 32px; }
	.fi-simple-layout:has(.rr-auth-aside) .fi-simple-main { margin: 0; padding-inline: 8px; }
	.rr-auth-aside {
		display: flex;
		grid-column: 2;
		grid-row: 1;
		align-items: center;
		justify-content: center;
		padding: 56px;
		background: var(--mist);
		border-left: 1px solid var(--line);
	}
}
.rr-auth-aside__in { width: 100%; max-width: 560px; }
.rr-eyebrow { font-size: 12px; line-height: 1.2; font-weight: var(--fw-strong); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--teal-ink); }
.rr-auth-aside__title { margin-top: 12px; font-size: 32px; line-height: 1.12; font-weight: var(--fw-h2); letter-spacing: var(--tr-h2); color: var(--ink); text-wrap: balance; }
.rr-auth-aside__lead { margin-top: 12px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.rr-auth-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.rr-auth-incl li { display: grid; gap: 12px; margin: 0; }
.rr-auth-incl__art { display: flex; justify-content: center; height: 118px; overflow: hidden; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.rr-auth-incl__art .rr-diagram { width: auto; height: 100%; aspect-ratio: 240 / 136; }
.rr-auth-incl b { display: block; font-size: 15.5px; line-height: 1.3; font-weight: var(--fw-title); color: var(--ink); }
.rr-auth-incl span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rr-auth-aside__foot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-2); font: 500 13px/1.5 var(--mono); color: var(--ink-3); }

/* ==========================================================================
   App components (the website's patterns)
   ========================================================================== */
.rr { color: var(--ink); font-family: var(--sans); }
.rr :where(h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) { margin: 0; padding: 0; }
.rr :where(ul, ol) { list-style: none; }
.rr a { text-decoration: none; }
.rr .rr-a { color: var(--teal-ink); font-weight: var(--fw-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rr .rr-a:hover { color: var(--teal-ink-2); }
.rr-stack { display: grid; gap: 28px; }
.rr-stack--lg { gap: 40px; }
.rr-h2 { font-size: 22px; line-height: 1.2; font-weight: var(--fw-title); letter-spacing: var(--tr-h3); color: var(--ink); }
.rr-h3 { font-size: 17px; line-height: 1.3; font-weight: var(--fw-title); letter-spacing: var(--tr-title); color: var(--ink); }
.rr-lead { margin-top: 6px; max-width: 68ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.rr-muted { color: var(--ink-3); }
.rr-small { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.rr-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rr-label { font-size: 11.5px; line-height: 1.2; font-weight: var(--fw-strong); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3); }
.rr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: 14px; }
.rr-head__more { font-size: 14.5px; font-weight: var(--fw-ui); color: var(--teal-ink); }

/* Panel: white card on the canvas, hairline border */
.rr-panel { position: relative; min-width: 0; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--sh-1); }
.rr-panel--flush { padding: 0; overflow: hidden; }
.rr-panel--mist { background: var(--mist); box-shadow: none; }
.rr-panel--teal { background: var(--teal-wash); border-color: var(--teal-soft); box-shadow: none; }
.rr-panel--warn { background: var(--warn-wash); border-color: var(--warn-line); box-shadow: none; }
.rr-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.rr-panel__body { padding: 22px; }
@media (max-width: 640px) {
	.rr-panel { padding: 18px; }
	.rr-panel__head { padding: 16px 18px; }
	.rr-panel__body { padding: 18px; }
}

/* Buttons (same as the website) */
.rr-btn {
	--h: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--h);
	padding: 8px 20px;
	border: 1px solid var(--teal-ink);
	border-radius: var(--radius);
	background: var(--teal-ink);
	color: #fff;
	font: var(--fw-ui) 15.5px/1.15 var(--sans);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.rr-btn:hover { background: var(--teal-ink-2); border-color: var(--teal-ink-2); color: #fff; }
.rr-btn:active { transform: translateY(1px); }
.rr-btn[disabled], .rr-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.rr-btn--secondary { background: var(--paper); border-color: var(--field); color: var(--ink); }
.rr-btn--secondary:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.rr-btn--dark { background: var(--ink); border-color: var(--ink); }
.rr-btn--dark:hover { background: #22303A; border-color: #22303A; }
.rr-btn--on-dark { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.rr-btn--on-dark:hover { background: var(--teal-night); border-color: var(--teal-night); color: var(--ink); }
.rr-btn--lg { --h: 52px; padding-inline: 24px; border-radius: 12px; font-size: 16.5px; }
.rr-btn--sm { --h: 36px; padding: 5px 14px; border-radius: 9px; font-size: 14px; }
.rr-btn--block { width: 100%; }
.rr-btn--link { --h: 36px; padding: 0; border: 0; background: none; color: var(--teal-ink); }
.rr-btn--link:hover { background: none; color: var(--teal-ink-2); text-decoration: underline; text-underline-offset: 4px; }
.rr-btn .rr-arrow { width: 16px; height: 16px; background: currentColor; mask: var(--rr-arrow) center / contain no-repeat; transition: transform .18s var(--ease); }
.rr-btn:hover .rr-arrow { transform: translateX(2px); }
.rr-btn .rr-spin { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rr-spin .7s linear infinite; }
@keyframes rr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rr-btn .rr-spin { animation-duration: 2s; } }
@media (pointer: coarse), (max-width: 640px) { .rr-btn--sm { --h: 44px; } }

/* Badges and chips */
.rr-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px; border-radius: var(--radius-s); background: var(--mist-2); font-size: 12.5px; line-height: 1.2; font-weight: var(--fw-strong); color: var(--ink-2); white-space: nowrap; }
.rr-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.rr-badge--plain::before { display: none; }
.rr-badge--primary { background: var(--teal-wash); color: var(--teal-ink); }
.rr-badge--success { background: var(--good-wash); color: var(--good); }
.rr-badge--warning { background: var(--warn-wash); color: var(--warn); }
.rr-badge--danger { background: var(--bad-wash); color: var(--bad); }
.rr-badge--gray { background: var(--mist-2); color: var(--ink-2); }
.rr-badge--ink { background: var(--ink); color: #fff; }
.rr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); font: 500 12.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rr-chip i, .rr-chip em { font-style: normal; color: var(--ink-3); }
.rr-chip--teal { border-color: var(--teal-soft); background: var(--teal-wash); color: var(--teal-ink); }
.rr-chip--ink { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Price line: mono on a hairline */
.rr-price { padding-top: 16px; border-top: 1px solid var(--line); font: 500 14px/1.45 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.rr-price strong { font-weight: 600; }
.rr-price i { font-style: normal; color: var(--ink-3); }

/* Summary strip (the report card's numbers): numbers in mono on hairlines */
.rr-sum { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--sh-1); overflow: hidden; }
.rr-sum > div { min-width: 0; padding: 18px 22px 20px; }
.rr-sum > div + div { border-left: 1px solid var(--line); }
.rr-sum dt { overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.2; font-weight: var(--fw-medium); color: var(--ink-3); white-space: nowrap; }
.rr-sum dd { margin: 10px 0 0; font: 600 26px/1 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.rr-sum dd small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.rr-sum dd .rr-badge { font-family: var(--sans); letter-spacing: 0; vertical-align: 4px; }
.rr-sum dd.is-warn { color: var(--warn); }
.rr-sum dd.is-bad { color: var(--bad); }
.rr-sum__note { display: block; margin-top: 8px; font: 500 12px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-3); white-space: normal; }
@media (max-width: 860px) {
	.rr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rr-sum > div:nth-child(odd) { border-left: 0; }
	.rr-sum > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
	.rr-sum > div { padding: 15px 16px 16px; }
	.rr-sum dd { font-size: 21px; }
}

/* Format line art (website diagrams) */
.rr-art { display: flex; justify-content: center; height: 136px; overflow: hidden; border-radius: 12px; background: var(--mist); }
.rr-art .rr-diagram { flex: none; width: auto; height: 100%; aspect-ratio: 240 / 136; }
.rr-art--paper { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.rr-diagram { display: block; }
.rr-diagram .d-page { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; }
.rr-diagram .d-page--back { fill: var(--mist-2); }
.rr-diagram .d-ink { fill: var(--ink); }
.rr-diagram .d-old { fill: #AEB9BD; }
.rr-diagram .d-line { fill: var(--line); }
.rr-diagram .d-line2 { fill: var(--line-2); }
.rr-diagram .d-wash { fill: var(--teal-wash); }
.rr-diagram .d-teal { fill: var(--teal); }
.rr-diagram .d-track { fill: var(--mist-2); }
.rr-diagram :is(.d-tick, .d-plus) { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rr-diagram .d-plus { stroke-width: 1.6; }
.rr-diagram .d-caret { fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rr-diagram text { font-family: var(--mono); font-size: 9px; fill: var(--ink-2); }
.rr-diagram .d-strong { fill: var(--ink); }
.rr-diagram .d-num { font-size: 8.5px; fill: var(--ink-3); }
.rr-diagram .d-num--on { font-weight: 600; fill: var(--teal-ink); }
.rr-diagram .d-ring-bg { fill: none; stroke: var(--mist-2); stroke-width: 2.5; }
.rr-diagram .d-ring { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; }
.rr-diagram .d-sm { font-size: 8px; }
.rr-diagram .d-big { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.rr-diagram .d-mute { fill: var(--ink-3); }
.rr-diagram .d-link { fill: var(--teal-ink); }
.rr-diagram .d-cursor { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.rr-diagram .d-gnum { font-family: var(--sans); font-size: 9px; font-weight: 600; fill: var(--ink); }

/* Format cards (New order, first visit) */
.rr-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.rr-fcard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--sh-1); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.rr-fcard:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.rr-fcard:focus-within { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.rr-fcard .rr-art { margin-bottom: 20px; }
.rr-fcard__title { font-size: 20px; line-height: 1.2; font-weight: var(--fw-title); letter-spacing: var(--tr-title); color: var(--ink); }
.rr-fcard__text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rr-fcard .rr-price { margin-top: auto; padding-top: 16px; }
.rr-fcard__body { margin-bottom: 20px; }
.rr-fcard__note { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.rr-fcard__cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: var(--fw-ui); color: var(--teal-ink); }
.rr-fcard__cta::after { content: ""; width: 16px; height: 16px; background: currentColor; mask: var(--rr-arrow) center / contain no-repeat; transition: transform .18s var(--ease); }
.rr-fcard__cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rr-fcard:hover .rr-fcard__cta { color: var(--teal-ink-2); }
.rr-fcard:hover .rr-fcard__cta::after { transform: translateX(3px); }
.rr-fcard--wide { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.rr-fcard--wide .rr-art { margin: 0; }
.rr-fcard--wide .rr-price { margin-top: 14px; padding-top: 14px; }
.rr-fcard--wide .rr-fcard__cta { margin: 0; }
@media (max-width: 900px) {
	.rr-fcard--wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.rr-fcard--wide .rr-art { margin-bottom: 20px; }
	.rr-fcard--wide .rr-fcard__cta { margin-top: 18px; }
}
/* Phones: compact rows, art as a thumbnail (as on the website) */
@media (max-width: 640px) {
	.rr-formats { gap: 12px; }
	.rr-fcard, .rr-fcard--wide { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art title" "art price" "text text" "cta cta"; column-gap: 16px; align-items: center; padding: 18px; }
	.rr-fcard .rr-art { grid-area: art; align-self: start; height: 76px; margin: 0; border-radius: 10px; }
	.rr-fcard__title { grid-area: title; align-self: end; font-size: 18px; }
	.rr-fcard .rr-price { grid-area: price; align-self: start; margin: 6px 0 0; padding: 0; border: 0; font-size: 13px; }
	.rr-fcard__body { display: contents; }
	.rr-fcard__text { grid-area: text; margin-top: 14px; font-size: 15px; }
	.rr-fcard__note { grid-column: 1 / -1; }
	.rr-fcard__cta, .rr-fcard--wide .rr-fcard__cta { grid-area: cta; margin-top: 12px; }
	.rr-fcard--wide > div { display: contents; }
}

/* Checklist (what every link comes with) */
.rr-check { display: grid; gap: 10px; }
.rr-check li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.rr-check li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-wash) center / 11px no-repeat; -webkit-mask: none; position: relative; }
.rr-check li { position: relative; }
.rr-check li::after { content: ""; position: absolute; left: 4.5px; top: calc((1.45em - 20px) / 2 + 4.5px); width: 11px; height: 11px; background: var(--teal-ink); mask: var(--rr-check) center / contain no-repeat; }
.rr-check li::before { margin-top: calc((1.45em - 20px) / 2); }
.rr-check--tight li { font-size: 14px; }

/* Segmented control (format switcher, billing toggle) */
.rr-seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; gap: 2px; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--mist); }
.rr-seg__btn { display: inline-flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; padding: 6px 18px; border: 0; border-radius: 9px; background: none; font: var(--fw-ui) 15px/1.2 var(--sans); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.rr-seg__btn:hover { color: var(--ink); background: rgba(11, 19, 22, .05); }
.rr-seg__btn[aria-checked="true"], .rr-seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(11, 19, 22, .2); }
.rr-seg__meta { font: 500 12px/1 var(--mono); letter-spacing: -0.01em; color: var(--ink-3); }
.rr-seg__btn[aria-checked="true"] .rr-seg__meta, .rr-seg__btn[aria-pressed="true"] .rr-seg__meta { color: var(--on-night-2); }
@media (max-width: 640px) { .rr-seg { display: flex; width: 100%; } .rr-seg__btn { padding-inline: 8px; font-size: 14.5px; } }

/* Authority gauge: the grade's minimum DR as a ring, the number inside; top grade's arc in ink */
.rr-gauge { display: block; flex: none; width: var(--rr-gauge, 40px); height: var(--rr-gauge, 40px); overflow: visible; }
.rr-gauge circle { fill: none; stroke-width: 3.5; }
.rr-gauge__track { stroke: var(--line); }
.rr-gauge__arc { stroke: var(--teal); stroke-linecap: round; }
.rr-gauge--top .rr-gauge__arc { stroke: var(--ink); }
.rr-gauge__num { font-family: var(--sans); font-size: 12.5px; font-weight: var(--fw-strong); fill: var(--ink); }

/* Unit squares: one outlined group per post, one teal square per link */
.rr-units { display: flex; flex-wrap: wrap; gap: 4px; }
.rr-units__post { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 3px; }
.rr-units__post i { display: block; width: 6px; height: 6px; border-radius: 1px; background: var(--teal); }
.rr-units__post i.is-open { background: transparent; box-shadow: inset 0 0 0 1px var(--teal); }
.rr-units__post i.is-wait { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-4); }
.rr-units--lg .rr-units__post { padding: 3px; gap: 3px; border-radius: 4px; }
.rr-units--lg .rr-units__post i { width: 9px; height: 9px; border-radius: 2px; }
.rr-units-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.rr-units-key span { display: inline-flex; align-items: center; gap: 6px; }
.rr-units-key i { width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
.rr-units-key i.is-open { background: transparent; box-shadow: inset 0 0 0 1px var(--teal); }
.rr-units-key i.is-wait { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-4); }

/* Plan cards: posts drawn as articles (the website's rr-plan) */
.rr-plans { container: rr-plans / inline-size; }
.rr-plans__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container rr-plans (min-width: 860px) { .rr-plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.rr-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 22px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.rr-plan:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.rr-plan.is-selected { border-color: var(--teal-ink); box-shadow: 0 0 0 2px var(--teal-ink), var(--sh-2); }
.rr-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rr-plan__name { font-size: 22px; line-height: 1.1; font-weight: var(--fw-h2); letter-spacing: var(--tr-h3); }
.rr-plan__pop { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-strong); color: var(--teal-ink); }
.rr-plan__pop i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.rr-plan__tag { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rr-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 20px; }
.rr-plan__amt { font-size: 46px; line-height: .9; font-weight: var(--fw-display); letter-spacing: 0; }
.rr-plan__per { font-size: 15px; font-weight: var(--fw-medium); color: var(--ink-3); }
.rr-plan__links { margin-top: 14px; font: 500 13.5px/1.25 var(--mono); color: var(--ink-2); }
.rr-plan .rr-units { margin-top: 10px; }
.rr-plan__specs { margin-top: 18px; border-top: 1px solid var(--line); }
.rr-plan__specs div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.rr-plan__specs dt { color: var(--ink-3); }
.rr-plan__specs dd { max-width: 62%; font-weight: var(--fw-ui); text-align: right; }
.rr-plan__pick { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14.5px; font-weight: var(--fw-ui); color: var(--teal-ink); }
.rr-plan__radio { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--field); border-radius: 50%; }
.rr-plan.is-selected .rr-plan__radio { border-color: var(--teal-ink); }
.rr-plan.is-selected .rr-plan__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-ink); }
.rr-plan--pop { background: var(--night); border-color: var(--night); color: var(--on-night); box-shadow: var(--sh-3); }
.rr-plan--pop:hover { border-color: var(--night); }
.rr-plan--pop.is-selected { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--teal-ink), var(--sh-3); }
.rr-plan--pop :is(.rr-plan__tag, .rr-plan__links) { color: color-mix(in srgb, var(--on-night-2) 45%, var(--on-night)); }
.rr-plan--pop :is(.rr-plan__per, dt) { color: var(--on-night-2); }
.rr-plan--pop :is(.rr-plan__specs, .rr-plan__specs div) { border-color: var(--night-line); }
.rr-plan--pop .rr-plan__pop, .rr-plan--pop .rr-plan__pick { color: var(--teal-night); }
.rr-plan--pop .rr-plan__radio { border-color: var(--on-night-2); }
.rr-plan--pop.is-selected .rr-plan__radio { border-color: var(--teal-night); }
.rr-plan--pop.is-selected .rr-plan__radio::after { background: var(--teal-night); }
.rr-plan--pop .rr-units__post { border-color: color-mix(in srgb, var(--on-night-2) 38%, var(--night)); }
.rr-plan--pop .rr-posts { background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line); }
.rr-plan--pop .rr-posts__page--back .d-page { fill: var(--night-line); stroke: color-mix(in srgb, var(--on-night-2) 28%, var(--night-2)); }
.rr-plan--pop .rr-posts__page--back .d-line2 { fill: color-mix(in srgb, var(--on-night-2) 30%, var(--night-line)); }
.rr-plan--pop :focus-visible { outline-color: var(--teal-night); }
.rr-posts { container: rr-posts / inline-size; display: flex; justify-content: center; height: 136px; margin-bottom: 22px; overflow: hidden; border-radius: 12px; background: var(--mist); }
.rr-posts__stack { --step: clamp(14px, (100cqi - 148px) / (var(--rr-posts-max, 7) - 1), 48px); position: relative; flex: none; width: calc(108px + (var(--n) - 1) * var(--step)); height: 132px; margin-top: 16px; }
.rr-posts__slot { position: absolute; top: calc(var(--d) * 4px); left: calc((var(--x) + var(--l)) * var(--step)); }
.rr-posts__page { display: block; width: 108px; height: 132px; }

/* Grade list (per-link builder): gauge, name, DR / DA / traffic, price per link */
.rr-grades { display: grid; gap: 8px; }
.rr-grade { --rr-gauge: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-align: left; cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.rr-grade:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--mist) 50%, var(--paper)); }
.rr-grade[aria-checked="true"] { border-color: var(--teal-ink); background: color-mix(in srgb, var(--teal-wash) 70%, var(--paper)); box-shadow: inset 0 0 0 1px var(--teal-ink); }
.rr-grade__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rr-grade__text { display: grid; gap: 4px; min-width: 0; }
.rr-grade__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; line-height: 1.25; font-weight: var(--fw-title); color: var(--ink); }
.rr-grade__meta { font: 500 12.5px/1.35 var(--mono); color: var(--ink-3); }
.rr-grade__note { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.rr-grade__price { text-align: right; font: 600 19px/1 var(--mono); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.rr-grade__price small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.rr-grade__radio { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--field); border-radius: 50%; }
.rr-grade[aria-checked="true"] .rr-grade__radio { border-color: var(--teal-ink); }
.rr-grade[aria-checked="true"] .rr-grade__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-ink); }
@media (max-width: 520px) {
	.rr-grade { --rr-gauge: 34px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
	.rr-grade__radio { display: none; }
	.rr-grade__price { font-size: 17px; }
}

/* Builder: steps on the left, the order summary on the right */
.rr-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) { .rr-builder { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } }
.rr-step { display: grid; gap: 14px; }
.rr-step + .rr-step { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.rr-step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.rr-step__n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--ink); font: 600 13px/1 var(--mono); color: #fff; vertical-align: 2px; }
.rr-step__title { font-size: 19px; line-height: 1.25; font-weight: var(--fw-title); letter-spacing: var(--tr-title); }
.rr-step__hint { font-size: 14px; color: var(--ink-3); }
.rr-fmt { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.rr-fmt .rr-art { height: 112px; }
.rr-fmt__text { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rr-fmt__days { margin-top: 10px; }
@media (max-width: 640px) { .rr-fmt { grid-template-columns: minmax(0, 1fr); } }

/* Quantity stepper */
.rr-qty { display: inline-flex; align-items: stretch; height: 52px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--field); background: var(--paper); overflow: hidden; }
.rr-qty button { display: grid; place-items: center; width: 52px; border: 0; background: none; font: 500 22px/1 var(--sans); color: var(--ink); cursor: pointer; }
.rr-qty button:hover { background: var(--mist); }
.rr-qty button:disabled { color: var(--ink-4); cursor: not-allowed; background: none; }
.rr-qty input { width: 72px; border: 0; border-inline: 1px solid var(--line); text-align: center; font: 600 20px/1 var(--mono); color: var(--ink); background: none; -moz-appearance: textfield; }
.rr-qty input::-webkit-outer-spin-button, .rr-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rr-qty input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--teal-ink); }
.rr-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.rr-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-quick button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); font: 500 13.5px/1 var(--mono); color: var(--ink-2); cursor: pointer; }
.rr-quick button:hover { border-color: var(--field); color: var(--ink); }
.rr-quick button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Volume ladder: the tiers as steps, the current one in ink */
.rr-ladder { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 3px; align-items: end; height: 96px; margin-top: 4px; }
.rr-ladder__step { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; text-align: center; font-family: var(--mono); }
.rr-ladder__pct { margin-bottom: 7px; font-size: 13.5px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); }
.rr-ladder__bar { height: calc(var(--h) * 54px + 4px); border-radius: 4px 4px 0 0; background: var(--teal-soft); }
.rr-ladder__qty { padding-top: 7px; border-top: 1px solid var(--ink); font-size: 12px; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.rr-ladder__step.is-on .rr-ladder__bar { background: var(--teal-ink); }
.rr-ladder__step.is-on .rr-ladder__pct, .rr-ladder__step.is-on .rr-ladder__qty { color: var(--ink); font-weight: 600; }
.rr-nudge { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--teal-wash); font-size: 14px; line-height: 1.4; color: var(--teal-ink); }
.rr-nudge button { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-weight: var(--fw-ui); color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }

/* Domain field (https:// prefix) */
.rr-domain { display: flex; align-items: center; min-height: 48px; padding-left: 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--field); background: var(--paper); }
.rr-domain:focus-within { box-shadow: inset 0 0 0 1px var(--teal-ink), 0 0 0 3px rgba(23, 162, 184, .22); }
.rr-domain__pre { flex: none; font: 500 14px/1 var(--mono); color: var(--ink-3); user-select: none; }
.rr-domain input { flex: 1; min-width: 0; height: 46px; padding: 0 12px 0 2px; border: 0; background: transparent; font-size: 16px; color: var(--ink); }
.rr-domain input:focus { outline: none; box-shadow: none; }
.rr-field { display: grid; gap: 8px; min-width: 0; }
.rr-field__label { font-size: 14.5px; line-height: 1.3; font-weight: var(--fw-ui); color: var(--ink); }
.rr-field__opt { font-weight: 400; color: var(--ink-3); }
.rr-field__hint { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.rr-field__error { font-size: 13.5px; line-height: 1.4; font-weight: var(--fw-medium); color: var(--bad); }
.rr-input, .rr-textarea, .rr-select {
	width: 100%;
	min-height: 46px;
	padding: 10px 13px;
	border: 0;
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 1px var(--field);
	background: var(--paper);
	font: 400 15.5px/1.4 var(--sans);
	color: var(--ink);
}
.rr-input::placeholder, .rr-textarea::placeholder { color: var(--ink-3); opacity: 1; }
.rr-input:hover, .rr-textarea:hover, .rr-select:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.rr-input:focus, .rr-textarea:focus, .rr-select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--teal-ink), 0 0 0 3px rgba(23, 162, 184, .22); }
.rr-input[aria-invalid="true"], .rr-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad); }
.rr-input--mono { font-family: var(--mono); font-size: 14px; }
.rr-textarea { min-height: 96px; resize: vertical; }
.rr-select { appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%230B1316' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 13px center / 16px no-repeat; }
.rr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.rr-form-grid .is-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .rr-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Order summary (receipt): mono price lines on hairlines */
.rr-receipt { display: grid; gap: 0; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--sh-2); }
@media (min-width: 1100px) { .rr-receipt--sticky { position: sticky; top: 88px; } }
.rr-receipt__what { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rr-receipt__title { margin-top: 6px; font-size: 18px; line-height: 1.3; font-weight: var(--fw-title); letter-spacing: var(--tr-title); }
.rr-receipt__sub { margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.rr-lines { margin: 0; }
.rr-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rr-lines dt { font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.rr-lines dd { font: 500 14.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.rr-lines .is-off dd { color: var(--teal-ink); }
.rr-lines .is-total { border-bottom: 0; padding-top: 16px; }
.rr-lines .is-total dt { font-size: 16px; font-weight: var(--fw-title); color: var(--ink); }
.rr-lines .is-total dd { font-size: 26px; font-weight: 600; letter-spacing: -0.035em; }
.rr-lines .is-total dd small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.rr-receipt .rr-btn { margin-top: 16px; }
.rr-receipt__fine { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-3); text-align: center; }
.rr-receipt__incl { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Lists of rows (orders, tasks, links) */
.rr-rows { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--sh-1); overflow: hidden; }
.rr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 16px 20px; border-top: 1px solid var(--line); }
.rr-row:first-child { border-top: 0; }
a.rr-row:hover { background: color-mix(in srgb, var(--mist) 55%, var(--paper)); }
.rr-row__main { display: grid; gap: 5px; min-width: 0; }
.rr-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15.5px; line-height: 1.3; font-weight: var(--fw-title); color: var(--ink); }
.rr-row__sub { overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; }
.rr-row__num { font: 500 13px/1 var(--mono); color: var(--ink-3); }
.rr-row__side { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.rr-row__meta { font-size: 14px; line-height: 1.3; font-weight: var(--fw-medium); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) {
	.rr-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
	.rr-row__side { justify-content: space-between; }
	.rr-row__sub { white-space: normal; }
}

/* Needs your attention */
.rr-task { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); }
.rr-task:first-child { border-top: 0; }
.rr-task__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--warn-wash); color: var(--warn); }
.rr-task__icon svg { width: 20px; height: 20px; }
.rr-task__icon--teal { background: var(--teal-wash); color: var(--teal-ink); }
.rr-task__title { font-size: 15.5px; line-height: 1.3; font-weight: var(--fw-title); color: var(--ink); }
.rr-task__sub { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 640px) {
	.rr-task { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; }
	.rr-task__icon { width: 36px; height: 36px; }
	.rr-task .rr-btn { grid-column: 1 / -1; width: 100%; }
}

/* Home layout */
.rr-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1200px) { .rr-home { grid-template-columns: minmax(0, 1fr) 360px; } }
.rr-plan-mini { display: grid; gap: 14px; }
.rr-plan-mini__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rr-plan-mini__name { font-size: 20px; font-weight: var(--fw-h2); letter-spacing: var(--tr-h3); }

/* Step tracker (a link's steps) */
.rr-steps { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.rr-steps li { display: grid; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.25; color: var(--ink-3); }
.rr-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--mist-2); }
.rr-steps li.is-done::before { background: var(--teal); }
.rr-steps li.is-now::before { background: var(--teal-ink); }
.rr-steps li.is-now { font-weight: var(--fw-strong); color: var(--ink); }
.rr-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
	.rr-steps li span { display: none; }
	.rr-steps li.is-now span { display: block; position: static; }
	.rr-steps { row-gap: 6px; }
}

/* Link cards on the order page */
.rr-links { display: grid; gap: 14px; }
.rr-link { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--sh-1); overflow: hidden; scroll-margin-top: 90px; }
.rr-link__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; }
.rr-link__id { display: grid; gap: 3px; min-width: 0; }
.rr-link__title { font-size: 16px; font-weight: var(--fw-title); letter-spacing: var(--tr-title); }
.rr-link__sub { font-size: 13.5px; color: var(--ink-3); }
.rr-link__side { display: flex; align-items: center; gap: 12px; }
.rr-link__due { font: 500 12.5px/1.2 var(--mono); color: var(--ink-3); white-space: nowrap; }
.rr-link__body { display: grid; gap: 16px; padding: 0 20px 18px; }
.rr-link__brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rr-link__brief > div { min-width: 0; padding: 12px 14px; }
.rr-link__brief > div + div { border-left: 1px solid var(--line); }
.rr-link__brief dt { font-size: 12px; color: var(--ink-3); }
.rr-link__brief dd { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; font: 500 13px/1.35 var(--mono); color: var(--ink); white-space: nowrap; }
.rr-anchor { padding: 1px 3px; border-radius: 3px; background: var(--teal-wash); font-family: var(--serif); font-size: 15px; color: var(--teal-ink); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 640px) {
	.rr-link__head { padding: 14px 16px; }
	.rr-link__body { padding: 0 16px 16px; }
	.rr-link__brief { grid-template-columns: minmax(0, 1fr); }
	.rr-link__brief > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
/* The report (single placement): live URL, metrics at publication, checks */
.rr-report { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rr-report__live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rr-report__url { min-width: 0; overflow-wrap: anywhere; font: 500 13.5px/1.35 var(--mono); color: var(--ink); }
.rr-report__url:hover { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.rr-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: var(--fw-ui); color: var(--ink); }
.rr-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.rr-report__metrics { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; }
.rr-report__metrics > div { min-width: 0; padding: 14px 16px; }
.rr-report__metrics > div + div { border-left: 1px solid var(--line); }
.rr-report__metrics dt { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rr-report__metrics dd { margin-top: 8px; font: 600 20px/1 var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.rr-report__metrics dd small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.rr-report__ring { --rr-gauge: 44px; }
.rr-report__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--mist); font-size: 13px; line-height: 1; font-weight: var(--fw-medium); color: var(--ink-2); }
.rr-report__flags span { display: inline-flex; align-items: center; gap: 6px; }
.rr-report__flags span::before { content: ""; width: 14px; height: 14px; background: var(--teal); mask: var(--rr-check) center / contain no-repeat; }
.rr-report__flags span.is-no::before { background: var(--ink-4); mask: none; width: 8px; height: 2px; border-radius: 1px; }
.rr-report__flags em { margin-left: auto; font: 500 12px/1 var(--mono); font-style: normal; color: var(--ink-3); }
@media (max-width: 640px) {
	.rr-report__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rr-report__metrics > .rr-report__ring { display: none; }
	.rr-report__metrics > div:nth-child(2) { border-left: 0; }
	.rr-report__flags em { width: 100%; margin-left: 0; }
}
.rr-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--mist); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.rr-notice svg { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-3); }
.rr-notice b { font-weight: var(--fw-title); color: var(--ink); }
.rr-notice--warn { background: var(--warn-wash); border-color: var(--warn-line); }
.rr-notice--warn svg { color: var(--warn); }
.rr-notice--teal { background: var(--teal-wash); border-color: var(--teal-soft); }
.rr-notice--teal svg { color: var(--teal-ink); }
.rr-notice--bad { background: var(--bad-wash); border-color: #F1C7C0; }
.rr-notice--bad svg { color: var(--bad); }

/* Briefs */
.rr-briefs { display: grid; gap: 0; }
.rr-brief { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 0.8fr); gap: 12px 16px; align-items: start; padding: 18px 22px; border-top: 1px solid var(--line); }
.rr-brief:first-child { border-top: 0; }
.rr-brief__id { padding-top: 12px; }
.rr-brief__id b { display: block; font-size: 15px; font-weight: var(--fw-title); }
.rr-brief__id span { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.rr-brief__notes { grid-column: 2 / -1; }
.rr-brief details summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: var(--fw-ui); color: var(--teal-ink); cursor: pointer; list-style: none; }
.rr-brief details summary::-webkit-details-marker { display: none; }
.rr-brief details[open] summary { margin-bottom: 8px; }
.rr-briefs__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--mist); }
@media (max-width: 860px) {
	.rr-brief { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
	.rr-brief__id { padding-top: 0; }
	.rr-brief__notes { grid-column: auto; }
	.rr-briefs__foot { padding: 14px 18px; }
	.rr-briefs__foot .rr-btn { width: 100%; }
}

/* Two columns: content and a side column (order page, billing) */
.rr-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1200px) { .rr-split { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Timeline */
.rr-timeline { position: relative; display: grid; gap: 0; }
.rr-tl { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.rr-tl::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 1px; background: var(--line-2); }
.rr-tl:last-child::before { display: none; }
.rr-tl__dot { width: 13px; height: 13px; margin-top: 3px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--teal); }
.rr-tl:first-child .rr-tl__dot { background: var(--teal); }
.rr-tl__text { font-size: 14px; line-height: 1.45; color: var(--ink); }
.rr-tl__when { display: block; margin-top: 2px; font: 500 12px/1.3 var(--mono); color: var(--ink-3); }

/* Messages */
.rr-thread { display: grid; gap: 12px; }
.rr-msg { max-width: 92%; padding: 12px 14px; border-radius: 12px; background: var(--mist); font-size: 14.5px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.rr-msg--me { justify-self: end; background: var(--teal-wash); }
.rr-msg__by { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: var(--fw-strong); color: var(--ink-2); white-space: normal; }
.rr-msg__by time { font: 500 11.5px/1 var(--mono); color: var(--ink-3); margin-left: 6px; }
.rr-compose { display: grid; gap: 10px; margin-top: 14px; }
.rr-compose__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Key / value (order facts) */
.rr-kv { margin: 0; }
.rr-kv > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rr-kv > div:last-child { border-bottom: 0; }
.rr-kv dt { font-size: 13.5px; color: var(--ink-3); }
.rr-kv dd { min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.rr-kv dd.rr-mono { font-size: 13.5px; }

/* Listicle quote */
.rr-quote { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.rr-quote__pos { font: 600 44px/1 var(--mono); letter-spacing: -0.04em; color: var(--teal-ink); }
.rr-quote__site { font: 500 15px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 760px) { .rr-quote { grid-template-columns: minmax(0, 1fr); } }

/* How it works (numbered) */
.rr-how { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; counter-reset: rr-how; }
.rr-how li { display: grid; gap: 12px; align-content: start; counter-increment: rr-how; }
.rr-how .rr-art { height: 118px; }
.rr-how b { display: flex; align-items: baseline; gap: 8px; font-size: 16px; line-height: 1.3; font-weight: var(--fw-title); color: var(--ink); }
.rr-how b::before { content: counter(rr-how); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); font: 600 12px/1 var(--mono); color: #fff; transform: translateY(-1px); }
.rr-how span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.rr-how li.is-now b::before { background: var(--teal-ink); }
.rr-how li.is-done b::before { background: var(--teal); }
@media (max-width: 960px) { .rr-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.rr-how { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.rr-how li { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art t" "art d"; column-gap: 14px; row-gap: 4px; }
	.rr-how .rr-art { grid-area: art; height: 72px; border-radius: 10px; }
	.rr-how b { grid-area: t; font-size: 15.5px; }
	.rr-how span { grid-area: d; font-size: 14px; }
}

/* Simple tables (invoices, refunds) */
.rr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rr-table th { height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--mist); text-align: left; font-size: 11.5px; font-weight: var(--fw-strong); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rr-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.rr-table tr:last-child td { border-bottom: 0; }
.rr-table .is-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-table .is-mono { font-family: var(--mono); font-size: 13px; }
.rr-table-wrap { overflow-x: auto; }
@media (max-width: 640px) {
	.rr-table--stack thead { display: none; }
	.rr-table--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
	.rr-table--stack tr:last-child { border-bottom: 0; }
	.rr-table--stack td { padding: 0; border: 0; }
	.rr-table--stack td.is-wide { grid-column: 1 / -1; }
}

/* Empty state */
.rr-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.rr-empty .rr-art { width: min(100%, 300px); }
.rr-empty b { font-size: 17px; font-weight: var(--fw-title); }
.rr-empty span { max-width: 46ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }

/* ==========================================================================
   Team panel: overview and order board
   ========================================================================== */
.rr-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1200px) { .rr-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rr-filters .rr-select { width: auto; min-width: 150px; min-height: 40px; padding-block: 6px; font-size: 14.5px; }
.rr-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; overscroll-behavior-x: contain; }
.rr-col { display: flex; flex-direction: column; min-width: 0; min-height: 200px; border-radius: 14px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.rr-col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; }
.rr-col__title { font-size: 14px; font-weight: var(--fw-title); color: var(--ink); }
.rr-col__count { font: 600 12.5px/1 var(--mono); color: var(--ink-3); }
.rr-col__list { display: grid; gap: 8px; padding: 0 10px 12px; align-content: start; }
.rr-col__more { padding: 0 14px 12px; font-size: 13px; color: var(--ink-3); }
.rr-card { display: grid; gap: 7px; padding: 12px 13px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--ink); transition: box-shadow .15s var(--ease); }
.rr-card:hover { box-shadow: 0 0 0 1px var(--field), var(--sh-2); }
.rr-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.rr-card__title { font-size: 14.5px; line-height: 1.3; font-weight: var(--fw-title); }
.rr-card__sub { overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.rr-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.rr-card__due { font: 500 12px/1 var(--mono); }
.rr-card__due.is-late { color: var(--bad); font-weight: 600; }
.rr-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); font: 600 10.5px/1 var(--sans); color: #fff; letter-spacing: .02em; }
.rr-avatar--none { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-4); }
@media (max-width: 760px) {
	.rr-board { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
	.rr-col { min-height: 0; }
}
.rr-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }

/* Grade rows: radio, gauge, text, price */
.rr-grade { grid-template-columns: 20px var(--rr-gauge) minmax(0, 1fr) auto; }
@media (max-width: 520px) { .rr-grade { grid-template-columns: var(--rr-gauge) minmax(0, 1fr) auto; } }

/* Plan checkout bar (in the page flow, never floating) */
.rr-checkout-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 300px); align-items: end; gap: 20px 28px; }
.rr-checkout-bar__pay { display: grid; gap: 4px; }
.rr-checkout-bar__pay .rr-lines .is-total { padding: 0 0 8px; }
.rr-checkout-bar__note { grid-column: 1 / -1; }
.rr-sum dd.is-sm { font-size: 18px; letter-spacing: -0.02em; }
@media (max-width: 1100px) { .rr-checkout-bar { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.rr-link__due.is-late { color: var(--bad); font-weight: 600; }
.rr-billing-plan { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 28px; }
.rr-billing-plan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.rr-plan-mini__name .rr-badge { margin-left: 8px; vertical-align: 3px; }

/* Policy line at sign-up and next to every pay button (resources/views/legal/agree.blade.php). */
.rr-agree { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.rr-agree a { color: var(--teal-ink); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rr-agree a:hover { color: var(--teal-ink-2); }
.fi-simple-main .rr-agree { margin-top: 4px; text-align: center; }
.rr-receipt__fine + .rr-agree { margin-top: 6px; }
.rr-checkout-bar__pay .rr-agree { margin-top: 6px; text-align: center; }

/* Pay page (resources/views/filament/app/orders/pay.blade.php): Stripe's card fields inside the app. */
.rr-pay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "form summary"; gap: 28px; align-items: start; }
.rr-pay__form { grid-area: form; padding: 28px; }
.rr-pay__summary { grid-area: summary; position: sticky; top: 88px; }
@media (max-width: 1023px) {
	.rr-pay { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "form"; }
	.rr-pay__summary { position: static; }
}
@media (max-width: 640px) { .rr-pay__form { padding: 20px; } }
.rr-pay__fields { margin-top: 24px; transition: opacity .15s; }
.rr-pay.is-paying .rr-pay__fields { opacity: .55; pointer-events: none; }
.rr-pay__group + .rr-pay__group { margin-top: 28px; }
.rr-pay__legend { margin-bottom: 12px; font-size: 15px; line-height: 1.3; font-weight: var(--fw-title); color: var(--ink); }
.rr-pay__taxid:not(:empty) { margin-top: 12px; }
.rr-pay__error { margin-top: 20px; padding: 12px 14px; border: 1px solid #EDC4BF; border-radius: var(--radius); background: #FCF1EF; font-size: 14px; line-height: 1.45; color: var(--bad); }
.rr-pay__error[hidden] { display: none; }
.rr-pay__submit { margin-top: 24px; }
.rr-pay__submit[aria-busy="true"] { opacity: 1; cursor: progress; }
.rr-pay .rr-agree { margin-top: 12px; text-align: center; }
.rr-pay__secure { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.rr-pay__secure svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* Billing: the card the monthly plan is charged to, and the form to change it (Stripe's card fields). */
.rr-billing-card { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.rr-billing-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.rr-billing-card__name { margin-top: 8px; font-size: 16px; font-weight: var(--fw-title); color: var(--ink); }
.rr-billing-card__name .rr-small { font-weight: 400; }
.rr-billing-card__form { max-width: 560px; margin-top: 20px; }
.rr-billing-card__form[hidden] { display: none; }
.rr-billing-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
.rr-billing-card__form .rr-pay__secure { justify-content: flex-start; }