/* variables.css komt binnen via de tamrank-variables dependency (zie register_common_styles). */

/* ==========================================================================
   TamRank onboarding wizard — variant 2 "Verhuisplan" (redesign 21 Aug 2026)
   Every step is one wide document sheet with a fixed anatomy: head, body,
   foot. The sheet fits on one screen; nothing that carries the decision falls
   below the fold. Tokens come 1-on-1 from common/variables.css (the built form
   of Branding.md); no hardcoded colours outside the two brand-plugin swatches
   and the amber/rose text tints that have no token of their own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Full-screen shell. The wizard template is included by the admin page
   callback, so WordPress has already painted its chrome above it. A wizard
   that must fit one screen cannot start 32px down the page, so the chrome is
   removed here rather than worked around.
   -------------------------------------------------------------------------- */
html.wp-toolbar {
    padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Brand colour for the WordPress-painted form controls.

   The wizard runs inside wp-admin, so wp-admin/css/forms.css applies: it sets
   appearance:none on every radio and checkbox and paints them itself with
   --wp-admin-theme-color. That makes accent-color a no-op, which is why every
   tick and dot in the wizard came out WordPress-blue (#3858e9) next to green
   buttons - most visibly on the robots.txt keep/replace choice.

   Rebinding the admin variable inside the wizard is the whole fix: WordPress
   keeps drawing the controls exactly as it does everywhere else, only in the
   brand colour, and the focus ring comes along for free. The --rgb twin has to
   be the raw channels because WP feeds it to rgba(); it is the same
   --tr-color-primary, in the form that function needs.
   -------------------------------------------------------------------------- */
/* Both anchors on purpose: the template writes <body class="tamrank-wizard-body">,
   but WordPress has already opened its own <body> by the time the page callback
   runs, so the browser drops that tag and the class never lands. .tamrank-wizard
   is the element that really exists, and every control sits inside it. */
body.tamrank-wizard-body,
.tamrank-wizard {
    --wp-admin-theme-color: var(--tr-color-primary);
    --wp-admin-theme-color--rgb: 16, 185, 129;
    --wp-admin-theme-color-darker-10: var(--tr-color-primary-hover);
    --wp-admin-theme-color-darker-20: var(--tr-color-primary-hover);
}

#wpadminbar,
#adminmenumain,
#adminmenuback,
#adminmenuwrap,
#wpfooter,
#screen-meta,
#screen-meta-links,
#wpbody-content > .notice,
#wpbody-content > .updated,
#wpbody-content > .error,
#wpbody-content > .update-nag {
    display: none !important;
}

#wpwrap,
#wpcontent,
#wpbody,
#wpbody-content {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    float: none !important;
    width: auto !important;
}

.tamrank-wizard-body {
    margin: 0;
    padding: 0;
    background: var(--tr-color-base);
    font-family: var(--tr-font-family);
    color: var(--tr-color-slate-800);
    font-size: var(--tr-text-base);
    line-height: var(--tr-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tamrank-wizard {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.tamrank-wizard svg {
    display: block;
}

.tamrank-wizard [hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tamrank-wizard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 var(--tr-space-8);
    flex: none;
}

.tamrank-wizard__logo {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
}

/* Branding.md §Logo: "Tam" in slate-800, "Rank" in emerald. */
.tamrank-wizard__logo-text {
    font-size: var(--tr-text-lg);
    font-weight: var(--tr-font-bold);
    letter-spacing: -0.02em;
    color: var(--tr-color-slate-800);
}

.tamrank-wizard__logo-text b {
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-primary);
}

.tamrank-wizard__header-actions {
    display: flex;
    align-items: center;
    gap: var(--tr-space-5);
}

.tamrank-wizard__lang-switcher {
    display: flex;
    gap: var(--tr-space-1);
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-full);
    padding: 3px;
}

.tamrank-wizard__lang-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--tr-radius-full);
    background: transparent;
    font-size: 14px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background var(--tr-transition-base);
}

.tamrank-wizard__lang-btn:hover {
    background: var(--tr-color-surface);
}

.tamrank-wizard__lang-btn.is-selected {
    background: var(--tr-color-base);
    box-shadow: var(--tr-shadow-sm);
}

.tamrank-wizard__skip {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    color: var(--tr-color-slate-600);
    text-decoration: none;
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    transition: color var(--tr-transition-base);
}

.tamrank-wizard__skip:hover {
    color: var(--tr-color-slate-900);
}

/* --------------------------------------------------------------------------
   Stepper — four compact bars. Visible on every step, including Done: the
   whole route stays in view (the Yoast anti-lesson from the competitor study).
   -------------------------------------------------------------------------- */

.tamrank-wizard__stepper {
    display: flex;
    justify-content: center;
    gap: var(--tr-space-8);
    padding: var(--tr-space-1) 0 var(--tr-space-2);
    flex: none;
}

.tamrank-wizard__step {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-2);
    align-items: center;
    width: 128px;
}

.tamrank-wizard__step-bar {
    height: 4px;
    width: 100%;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-slate-200);
    transition: background var(--tr-transition-base);
}

.tamrank-wizard__step-label {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-500);
}

.tamrank-wizard__step.is-completed .tamrank-wizard__step-bar {
    background: var(--tr-color-primary);
    opacity: 0.4;
}

.tamrank-wizard__step.is-active .tamrank-wizard__step-bar {
    background: var(--tr-color-primary);
}

.tamrank-wizard__step.is-active .tamrank-wizard__step-label {
    color: var(--tr-color-slate-900);
}

/* --------------------------------------------------------------------------
   The stage and the document sheet
   -------------------------------------------------------------------------- */

.tamrank-wizard__panels {
    flex: 1;
    overflow: auto;
    padding: 0 var(--tr-space-8) var(--tr-space-6);
}

.tamrank-sheet {
    display: none;
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-xl);
    box-shadow: var(--tr-shadow-md);
    overflow: hidden;
}

.tamrank-sheet.is-active {
    display: block;
}

.tamrank-sheet__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tr-space-6);
    padding: var(--tr-space-4) var(--tr-space-8) var(--tr-space-3);
    border-bottom: 1px solid var(--tr-color-slate-100);
}

.tamrank-sheet__title {
    font-size: var(--tr-text-2xl);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
    line-height: var(--tr-leading-tight);
    letter-spacing: -0.01em;
    margin: 0;
    outline: none;
}

.tamrank-sheet__sub {
    font-size: var(--tr-text-base);
    color: var(--tr-color-slate-500);
    margin: var(--tr-space-1) 0 0;
}

.tamrank-sheet__site {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-400);
    white-space: nowrap;
    padding-bottom: 2px;
}

.tamrank-sheet__body {
    padding: var(--tr-space-3) var(--tr-space-8);
}

.tamrank-sheet__foot {
    display: flex;
    align-items: center;
    gap: var(--tr-space-4);
    padding: var(--tr-space-3) var(--tr-space-8);
    background: var(--tr-color-base);
    border-top: 1px solid var(--tr-color-slate-200);
}

.tamrank-sheet__foot-note {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin: 0 auto 0 0;
}

/* Panel slide transitions (kept from the previous build; the sheet is what
   moves now instead of a narrow column). */
.tamrank-sheet.is-sliding-out {
    animation: tamrank-slide-out 300ms ease forwards;
}

.tamrank-sheet.is-sliding-out-reverse {
    animation: tamrank-slide-out-rev 300ms ease forwards;
}

.tamrank-sheet.is-sliding-in-reverse {
    animation: tamrank-slide-in-rev 300ms ease both;
}

@keyframes tamrank-slide-out {
    to { opacity: 0; transform: translateX(-24px); }
}

@keyframes tamrank-slide-out-rev {
    to { opacity: 0; transform: translateX(24px); }
}

@keyframes tamrank-slide-in-rev {
    from { opacity: 0; transform: translateX(-24px); }
}

/* --------------------------------------------------------------------------
   Buttons — Branding.md §Component Patronen
   -------------------------------------------------------------------------- */

.tamrank-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
    height: 44px;
    padding: 0 var(--tr-space-6);
    border-radius: var(--tr-radius-md);
    border: none;
    font-family: inherit;
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--tr-transition-base);
}

.tamrank-btn:active {
    transform: scale(0.97);
}

/* The branded ring the old stylesheet had on skip/lang/btn/title. The UA
   default still works, but a keyboard user should get the wizard's own
   focus mark, not the browser's. */
.tamrank-btn:focus-visible {
    outline: 2px solid var(--tr-color-primary);
    outline-offset: 2px;
}

.tamrank-btn--primary {
    background: var(--tr-color-primary);
    color: #fff;
}

.tamrank-btn--primary:hover {
    background: var(--tr-color-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--tr-shadow-primary-hover);
}

.tamrank-btn--primary:disabled {
    background: var(--tr-color-slate-300);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tamrank-btn--ghost {
    background: transparent;
    color: var(--tr-color-slate-600);
}

.tamrank-btn--ghost:hover {
    background: var(--tr-color-surface);
    color: var(--tr-color-slate-800);
}

.tamrank-btn--outline {
    background: var(--tr-color-white);
    color: var(--tr-color-slate-800);
    border: 1px solid var(--tr-color-slate-300);
}

.tamrank-btn--outline:hover {
    background: var(--tr-color-slate-800);
    color: #fff;
    border-color: var(--tr-color-slate-800);
}

.tamrank-btn--sm {
    height: 36px;
    padding: 0 var(--tr-space-4);
    font-size: var(--tr-text-sm);
}

.tamrank-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tamrank-btn--primary:disabled {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Step 0 — source rows
   -------------------------------------------------------------------------- */

.tamrank-wizard__detect-loading {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    padding: var(--tr-space-8) 0;
    color: var(--tr-color-slate-500);
    font-size: var(--tr-text-sm);
    justify-content: center;
}

.tamrank-wizard__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--tr-color-slate-200);
    border-top-color: var(--tr-color-primary);
    border-radius: var(--tr-radius-full);
    animation: tamrank-spin 800ms linear infinite;
}

@keyframes tamrank-spin {
    to { transform: rotate(360deg); }
}

.tamrank-src {
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
}

.tamrank-src__row {
    display: flex;
    align-items: center;
    gap: var(--tr-space-4);
    width: 100%;
    text-align: left;
    background: var(--tr-color-white);
    border: none;
    padding: var(--tr-space-4) var(--tr-space-5);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--tr-text-base);
    transition: background var(--tr-transition-base);
}

.tamrank-src__row + .tamrank-src__row {
    border-top: 1px solid var(--tr-color-slate-100);
}

.tamrank-src__row:hover {
    background: var(--tr-color-slate-100);
}

.tamrank-src__row:focus-visible {
    outline: 2px solid var(--tr-color-primary);
    outline-offset: -2px;
}

.tamrank-src__row.is-selected {
    background: var(--tr-color-primary-light);
}

.tamrank-src__row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tamrank-src__radio {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: var(--tr-radius-full);
    border: 2px solid var(--tr-color-slate-300);
    display: grid;
    place-items: center;
    transition: all var(--tr-transition-base);
}

.tamrank-src__row.is-selected .tamrank-src__radio {
    border-color: var(--tr-color-primary);
    background: var(--tr-color-primary);
}

.tamrank-src__row.is-selected .tamrank-src__radio::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--tr-radius-full);
    background: #fff;
}

.tamrank-src__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--tr-radius-md);
    flex: none;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: var(--tr-font-bold);
}

.tamrank-src__icon--clean {
    background: var(--tr-color-slate-100);
    color: var(--tr-color-slate-500);
}

.tamrank-src__name {
    display: block;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

.tamrank-src__meta {
    display: block;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin-top: 1px;
}

.tamrank-src__badge {
    margin-left: auto;
    flex: none;
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-primary-light);
    color: var(--tr-color-primary-hover);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Anchor 1: the trust card, UNDER the source rows */
.tamrank-trustbar {
    display: flex;
    gap: var(--tr-space-4);
    align-items: flex-start;
    background: var(--tr-color-primary-light);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-4) var(--tr-space-5);
    margin-top: var(--tr-space-5);
}

.tamrank-trustbar__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-white);
    color: var(--tr-color-primary);
    display: grid;
    place-items: center;
    box-shadow: var(--tr-shadow-sm);
}

.tamrank-trustbar__title {
    display: block;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

.tamrank-trustbar__body {
    display: block;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Step 1 — the moving plan (choice left, side track right)
   -------------------------------------------------------------------------- */

.tamrank-plan {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--tr-space-8);
    align-items: start;
}

.tamrank-plan__main {
    min-width: 0;
}

.tamrank-plan__aside {
    min-width: 0;
    /* The side track is subordinate to the choice on the left, so it is this
       column that gives way when a rare combination of notices (a conflict
       question plus a physical-file warning) outgrows the screen. It gives way
       from the inside out: the reference material shrinks first, the question
       and its two answers never leave the screen. */
    display: flex;
    flex-direction: column;
    max-height: 49vh;
    overflow: hidden;
}

#tamrank-facts-default,
#tamrank-robots-conflict {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Inside the side track the giving way goes one level deeper. The statistics
   are a list and give way as a list: whole rows scroll out of sight. The two
   notes underneath keep their full text, because a sentence cut off halfway
   does not read as "there is more below", it reads as broken. */
#tamrank-facts-list,
#tamrank-facts-loading,
#tamrank-facts-empty {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    /* A row chopped through the middle reads as damage; a row that fades out
       reads as "this list goes on". The padding underneath is what the fade
       lands on when the whole list does fit, so nothing is dimmed for free. */
    padding-bottom: 14px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}

#tamrank-scan-open,
#tamrank-scan-warning,
#tamrank-robots-panel {
    flex: none;
}

/* Next to the choice these two are reference material, so they carry the
   smaller note size. That buys the statistics above them a row or two before
   anything has to give way at all. The warning keeps its own size. */
#tamrank-scan-warning,
#tamrank-robots-panel {
    font-size: var(--tr-text-xs);
    padding: var(--tr-space-2) var(--tr-space-3);
}

/* The physical-file warning is never squeezed away: as long as that file is
   there, nothing else on this screen has any effect. So it leads the column
   instead of trailing it. Above everything that gives way it is in view the
   moment the step opens, in both aside states, without a single scroll. */
#tamrank-robots-physical {
    flex: none;
    order: -1;
    margin-top: 0;
    margin-bottom: var(--tr-space-3);
}

.tamrank-rob__previews {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
}

.tamrank-plan__list {
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
}

.tamrank-plan__listhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-3);
    padding: var(--tr-space-2) var(--tr-space-5);
    background: var(--tr-color-slate-100);
}

.tamrank-plan__listhead-l {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-color-slate-600);
}

.tamrank-plan__toggle {
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-primary-hover);
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}

.tamrank-plan__toggle:hover {
    text-decoration: underline;
}

/* A site can carry up to eleven categories (site_identity made it eleven; it
   was ten before SITE-ID). Past the point where the sheet would outgrow the
   screen the list scrolls inside itself, the way the robots.txt previews do:
   the page still fits, the running total stays pinned below. The height below
   is the budget, not the final word: fitCategoryList() trims it down to whole
   rows, see the block underneath. */
#tamrank-categories {
    max-height: 40vh;
    overflow: auto;
}

/* Same answer as the statistics list in the side track (59da6bc): a row cut
   through the middle reads as damage, not as "there is more below", and the
   macOS overlay scrollbar gives no hint that this box scrolls at all. So the
   list gives way as a list and fades out at the bottom.

   Two things differ from the aside, both because these rows are clickable and
   taller. First, the visible height is snapped down to WHOLE rows by
   fitCategoryList() in the wizard JS; a stylesheet cannot do that, because the
   row height only exists once the categories are rendered and it changes with
   the language and the compact breakpoint. Second, the fade is switched on only
   while something is actually below the fold, so the last row is crisp the
   moment you reach the end. That is the job the padding under the aside list
   does there: make sure nothing is dimmed for free. */
#tamrank-categories.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}

.tamrank-plan__row {
    display: flex;
    align-items: center;
    gap: var(--tr-space-4);
    cursor: pointer;
    padding: var(--tr-space-2) var(--tr-space-5);
    background: var(--tr-color-white);
    transition: background var(--tr-transition-base);
}

.tamrank-plan__row + .tamrank-plan__row {
    border-top: 1px solid var(--tr-color-slate-100);
}

.tamrank-plan__row:hover {
    background: var(--tr-color-slate-100);
}

.tamrank-plan__row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Keyboard focus on the moving list. The checkbox is kept focusable
   (opacity:0, never display:none), but opacity:0 hides its UA outline as
   well - so the mark goes on the box and on the row itself. This is the
   core interaction of the wizard; tabbing through it has to show where
   you are. */
.tamrank-plan__row input:focus-visible ~ .tamrank-plan__box {
    outline: 2px solid var(--tr-color-primary);
    outline-offset: 2px;
}

.tamrank-plan__row:has(input:focus-visible) {
    background: var(--tr-color-slate-100);
    box-shadow: inset 3px 0 0 var(--tr-color-primary);
}

.tamrank-plan__box {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--tr-color-slate-300);
    color: #fff;
    display: grid;
    place-items: center;
    transition: all var(--tr-transition-base);
}

.tamrank-plan__row.is-checked .tamrank-plan__box {
    background: var(--tr-color-primary);
    border-color: var(--tr-color-primary);
}

.tamrank-plan__box svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--tr-transition-base);
}

.tamrank-plan__row.is-checked .tamrank-plan__box svg {
    opacity: 1;
    transform: scale(1);
}

.tamrank-plan__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--tr-space-2);
}

.tamrank-plan__name {
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    white-space: nowrap;
}

.tamrank-plan__row:not(.is-checked) .tamrank-plan__name {
    color: var(--tr-color-slate-500);
}

.tamrank-plan__what {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tamrank-plan__count {
    margin-left: auto;
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-slate-600);
    font-variant-numeric: tabular-nums;
}

.tamrank-plan__row:not(.is-checked) .tamrank-plan__count {
    color: var(--tr-color-slate-400);
}

/* Les 1 uit de concurrentievergelijking: de scope-lijst leeft pal boven de
   knop, en telt live mee met de vinkjes. */
.tamrank-plan__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tr-space-2) var(--tr-space-5);
    background: var(--tr-color-slate-100);
    border-top: 1px solid var(--tr-color-slate-200);
}

.tamrank-plan__total-l {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-700);
}

.tamrank-plan__total-n {
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
    font-variant-numeric: tabular-nums;
}

.tamrank-plan__empty {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-3);
    padding: var(--tr-space-5);
    background: var(--tr-color-white);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
}

.tamrank-plan__empty svg {
    flex: none;
    margin-top: 1px;
    color: var(--tr-color-slate-400);
}

/* --------------------------------------------------------------------------
   Step 1 — side track with the scan facts
   -------------------------------------------------------------------------- */

.tamrank-aside__kicker {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-color-slate-500);
    margin: 0 0 var(--tr-space-2);
}

.tamrank-aside__scanline {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin: 0 0 var(--tr-space-2);
}

.tamrank-aside__retry {
    margin: var(--tr-space-2) 0 0;
}

.tamrank-fact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--tr-space-4);
    padding: 6px 0;
}

.tamrank-fact + .tamrank-fact {
    border-top: 1px solid var(--tr-color-slate-100);
}

.tamrank-fact__label {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
}

.tamrank-fact__src {
    display: block;
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-400);
    margin-top: 1px;
}

.tamrank-fact__num {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tamrank-fact__num--muted {
    color: var(--tr-color-slate-400);
    font-weight: var(--tr-font-medium);
}

.tamrank-fact__unit {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    margin-left: 1px;
}

.tamrank-skel {
    display: inline-block;
    height: 10px;
    border-radius: var(--tr-radius-sm);
    background: var(--tr-color-slate-100);
    animation: tamrank-pulse 1.4s ease-in-out infinite;
}

.tamrank-skel--num {
    width: 28px;
}

@keyframes tamrank-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Amber sits on the meaning ("there is work open here"), never on a figure. */
.tamrank-aside__open {
    display: block;
    font-size: var(--tr-text-xs);
    color: #b45309;
    background: var(--tr-color-warning-bg);
    border-radius: var(--tr-radius-sm);
    padding: 6px var(--tr-space-3);
    margin-top: var(--tr-space-2);
}

.tamrank-note {
    display: flex;
    gap: var(--tr-space-3);
    align-items: flex-start;
    background: var(--tr-color-surface);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-3) var(--tr-space-4);
    margin-top: var(--tr-space-3);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
}

.tamrank-note svg {
    flex: none;
    margin-top: 2px;
    color: var(--tr-color-slate-500);
}

/* Sam, 21 Aug: no left stripe on the amber cards, one flat soft amber. */
.tamrank-note--warn {
    background: var(--tr-color-warning-bg);
    border-radius: var(--tr-radius-md);
    color: var(--tr-color-slate-700);
}

.tamrank-note--warn svg {
    color: #b45309;
}

/* robots.txt conflict: previews on the dark logo slate, light monospace */
.tamrank-rob__title {
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    font-size: var(--tr-text-sm);
    margin: 0;
}

.tamrank-rob__title svg {
    display: inline-block;
    vertical-align: -2px;
    color: var(--tr-color-primary);
    margin-right: 5px;
}

.tamrank-rob__desc {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    margin: 2px 0 0;
}

.tamrank-rob__col-title {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tr-color-slate-500);
    margin: var(--tr-space-3) 0 0;
}

.tamrank-rob__pre {
    font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    background: var(--tr-color-slate-800);
    color: var(--tr-color-slate-200);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-2) var(--tr-space-3);
    margin: var(--tr-space-1) 0 0;
    min-height: 30px;
    max-height: 64px;
    overflow: auto;
}

.tamrank-rob__cap {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    margin: var(--tr-space-1) 0 0;
}

.tamrank-rob__choice {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-2);
    margin-top: var(--tr-space-3);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
}

.tamrank-rob__choice label {
    display: flex;
    gap: var(--tr-space-2);
    align-items: center;
    cursor: pointer;
}

.tamrank-rob__choice input {
    /* Fallback for a context without wp-admin's forms.css; inside wp-admin the
       controls are painted from --wp-admin-theme-color, rebound at the top. */
    accent-color: var(--tr-color-primary);
    width: 15px;
    height: 15px;
    margin: 0;
}

/* Anchor 2: the signature strip of the plan */
.tamrank-mechstrip {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: var(--tr-space-5);
    align-items: start;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-3) var(--tr-space-5);
    margin-top: var(--tr-space-4);
}

.tamrank-mechstrip__title {
    display: flex;
    gap: var(--tr-space-2);
    align-items: center;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    font-size: var(--tr-text-sm);
    padding-top: 2px;
}

.tamrank-mechstrip__title svg {
    color: var(--tr-color-primary);
    flex: none;
}

.tamrank-mechstrip__item {
    display: flex;
    gap: var(--tr-space-2);
    align-items: flex-start;
    font-size: var(--tr-text-sm);
    line-height: 1.45;
    color: var(--tr-color-slate-600);
}

.tamrank-mechstrip__item svg {
    flex: none;
    color: var(--tr-color-primary);
    margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Step 2 — the move itself
   -------------------------------------------------------------------------- */

.tamrank-mig__pct {
    font-size: var(--tr-text-2xl);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
    font-variant-numeric: tabular-nums;
    padding-bottom: 2px;
}

.tamrank-mig__bar {
    height: 8px;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-slate-100);
    overflow: hidden;
}

.tamrank-mig__fill {
    height: 100%;
    width: 0;
    border-radius: var(--tr-radius-full);
    background: linear-gradient(90deg, var(--tr-color-primary), var(--tr-color-primary-hover));
    transition: width 300ms ease;
}

/* While the run is going there is no honest fraction to show: the plan
   counts fields, the batch API counts posts. So the bar reports movement
   instead of a percentage, and only fills up once the server says done. */
.tamrank-mig__bar.is-indeterminate .tamrank-mig__fill {
    width: 34%;
    animation: tamrank-mig-sweep 1.35s ease-in-out infinite;
}

@keyframes tamrank-mig-sweep {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
    .tamrank-mig__bar.is-indeterminate .tamrank-mig__fill {
        width: 100%;
        opacity: 0.35;
        animation: none;
    }
}

.tamrank-mig__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--tr-space-4);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin-top: var(--tr-space-2);
    font-variant-numeric: tabular-nums;
}

.tamrank-mig {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--tr-space-8);
    margin-top: var(--tr-space-5);
}

.tamrank-mig__list {
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.tamrank-mig__item {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    padding: var(--tr-space-2) var(--tr-space-5);
    background: var(--tr-color-white);
    margin: 0;
}

.tamrank-mig__item + .tamrank-mig__item {
    border-top: 1px solid var(--tr-color-slate-100);
}

.tamrank-mig__name {
    flex: 1;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

.tamrank-mig__item.is-wait .tamrank-mig__name {
    color: var(--tr-color-slate-400);
    font-weight: var(--tr-font-medium);
}

.tamrank-mig__count {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    font-variant-numeric: tabular-nums;
}

.tamrank-mig__item.is-wait .tamrank-mig__count {
    color: var(--tr-color-slate-300);
}

.tamrank-mig__dot {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: var(--tr-radius-full);
    display: grid;
    place-items: center;
    color: #fff;
}

.tamrank-mig__item.is-done .tamrank-mig__dot {
    background: var(--tr-color-primary);
}

.tamrank-mig__item.is-wait .tamrank-mig__dot {
    border: 2px solid var(--tr-color-slate-200);
}

.tamrank-mig__item.is-busy .tamrank-mig__dot {
    color: var(--tr-color-primary);
}

.tamrank-mig__item.is-busy .tamrank-mig__dot svg {
    animation: tamrank-spin 1s linear infinite;
}

.tamrank-mig__log {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 26vh;
    overflow: auto;
}

.tamrank-mig__log li {
    display: flex;
    gap: var(--tr-space-2);
    align-items: baseline;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    padding: 3px 0;
    margin: 0;
}

.tamrank-mig__log li::before {
    content: '\00b7';
    color: var(--tr-color-slate-400);
}

/* One rose accent, never a red screen. */
.tamrank-mig__log li.is-fail {
    color: #be123c;
}

.tamrank-mig__error {
    border: 1px solid rgba(244, 63, 94, 0.35);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-3) var(--tr-space-4);
    margin-top: var(--tr-space-3);
    background: var(--tr-color-white);
}

.tamrank-mig__error-title {
    display: flex;
    gap: var(--tr-space-2);
    align-items: center;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    font-size: var(--tr-text-sm);
    margin: 0;
}

.tamrank-mig__error-title svg {
    color: var(--tr-color-error);
    flex: none;
}

.tamrank-mig__error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tr-space-2);
    margin-top: var(--tr-space-3);
}

.tamrank-mig__error-keep {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    margin: var(--tr-space-2) 0 0;
}

/* --------------------------------------------------------------------------
   Step 3 — the report (the plan, mirrored)
   -------------------------------------------------------------------------- */

.tamrank-done {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--tr-space-8);
}

.tamrank-done__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
    background: var(--tr-color-primary-light);
    color: var(--tr-color-primary-hover);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--tr-radius-full);
    white-space: nowrap;
}

.tamrank-res {
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
}

.tamrank-res__head {
    padding: var(--tr-space-2) var(--tr-space-5);
    background: var(--tr-color-slate-100);
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-color-slate-600);
}

/* A site can carry ten categories; past what fits, the result list scrolls
   inside itself so the report keeps its one-screen shape. */
#tamrank-success-stats {
    max-height: 40vh;
    overflow: auto;
}

.tamrank-res__row {
    display: flex;
    align-items: center;
    gap: var(--tr-space-3);
    padding: var(--tr-space-2) var(--tr-space-5);
}

.tamrank-res__row + .tamrank-res__row {
    border-top: 1px solid var(--tr-color-slate-100);
}

.tamrank-res__row svg {
    flex: none;
    color: var(--tr-color-primary);
}

/* A report that mirrors a plan the run did not fully deliver keeps the rows but
   drops the green tick: the marker says "planned", not "confirmed". */
.tamrank-res.is-plan .tamrank-res__row svg {
    color: var(--tr-color-slate-400);
}

.tamrank-res__label {
    flex: 1;
    color: var(--tr-color-slate-700);
}

/* Branding.md §Kleuren: a figure never carries a status colour. */
.tamrank-res__num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
}

.tamrank-qwin {
    display: flex;
    gap: var(--tr-space-3);
    align-items: flex-start;
    background: var(--tr-color-warning-bg);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-3) var(--tr-space-4);
    margin-top: var(--tr-space-3);
}

.tamrank-qwin__label {
    display: block;
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b45309;
}

.tamrank-qwin__text {
    display: block;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
    margin-top: 2px;
}

/* Anchor 3: the way back, as its own document section */
.tamrank-rb {
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-5);
}

.tamrank-rb__title {
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    margin: 0;
}

.tamrank-rb__body {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    margin: var(--tr-space-2) 0 0;
}

.tamrank-rb__keep {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
    margin: var(--tr-space-2) 0 0;
}

.tamrank-rb__actions {
    display: flex;
    gap: var(--tr-space-3);
    margin-top: var(--tr-space-4);
}

.tamrank-rb__confirm {
    margin-top: var(--tr-space-4);
    padding-top: var(--tr-space-4);
    border-top: 1px solid var(--tr-color-slate-100);
}

.tamrank-rb__question {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    margin: 0;
}

.tamrank-rb__status {
    margin: var(--tr-space-4) 0 0;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-primary-hover);
    font-weight: var(--tr-font-medium);
    outline: none;
}

.tamrank-rb__status.is-failed {
    color: #be123c;
}

.tamrank-report {
    list-style: none;
    margin: var(--tr-space-3) 0 0;
    padding: 0 var(--tr-space-1);
    max-height: 22vh;
    overflow: auto;
}

.tamrank-report li {
    display: flex;
    gap: var(--tr-space-2);
    align-items: baseline;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    padding: 2px 0;
    margin: 0;
}

.tamrank-report li::before {
    content: '\00b7';
    color: var(--tr-color-slate-400);
}

/* Opt-in as the footer line of the report */
.tamrank-optin {
    display: flex;
    align-items: center;
    gap: var(--tr-space-5);
    flex-wrap: wrap;
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    padding: var(--tr-space-3) var(--tr-space-5);
    margin-top: var(--tr-space-4);
}

.tamrank-optin__title {
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    font-size: var(--tr-text-sm);
}

.tamrank-optin__chip {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tr-color-slate-500);
    background: var(--tr-color-slate-100);
    border-radius: var(--tr-radius-sm);
    padding: 2px 8px;
    margin-left: var(--tr-space-2);
}

.tamrank-optin__body {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-500);
}

.tamrank-optin__row {
    display: flex;
    gap: var(--tr-space-3);
    align-items: center;
    cursor: pointer;
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
    margin-left: auto;
}

.tamrank-optin__checkbox {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
}

.tamrank-optin__box {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--tr-color-slate-300);
    color: #fff;
    display: grid;
    place-items: center;
    transition: all var(--tr-transition-base);
}

.tamrank-optin__row.is-checked .tamrank-optin__box {
    background: var(--tr-color-primary);
    border-color: var(--tr-color-primary);
}

.tamrank-optin__box svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--tr-transition-base);
}

.tamrank-optin__row.is-checked .tamrank-optin__box svg {
    opacity: 1;
    transform: scale(1);
}

.tamrank-optin__checkbox:focus-visible + .tamrank-optin__box {
    outline: 2px solid var(--tr-color-primary);
    outline-offset: 2px;
}

/* WP admin tints inline <strong> blue; keep the wizard's own colour. */
.tamrank-optin__checkbox-label strong {
    color: var(--tr-color-slate-900);
    font-weight: var(--tr-font-semibold);
}

.tamrank-optin__persona {
    flex-basis: 100%;
    display: flex;
    gap: var(--tr-space-3);
    align-items: center;
    padding-top: var(--tr-space-3);
    border-top: 1px solid var(--tr-color-slate-100);
}

.tamrank-optin__persona-label {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-900);
    white-space: nowrap;
}

.tamrank-optin__persona-grid {
    display: flex;
    gap: var(--tr-space-3);
    flex-wrap: wrap;
}

.tamrank-optin__persona-card {
    display: flex;
    gap: var(--tr-space-2);
    align-items: center;
    cursor: pointer;
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-md);
    padding: var(--tr-space-2) var(--tr-space-3);
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-700);
    transition: border-color var(--tr-transition-base);
}

.tamrank-optin__persona-card.is-selected {
    border-color: var(--tr-color-primary);
}

.tamrank-optin__persona-radio {
    position: absolute;
    opacity: 0;
    width: 14px;
    height: 14px;
    margin: 0;
}

.tamrank-optin__persona-bullet {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: var(--tr-radius-full);
    border: 2px solid var(--tr-color-slate-300);
    display: grid;
    place-items: center;
    transition: all var(--tr-transition-base);
}

.tamrank-optin__persona-card.is-selected .tamrank-optin__persona-bullet {
    border-color: var(--tr-color-primary);
    background: var(--tr-color-primary);
}

.tamrank-optin__persona-card.is-selected .tamrank-optin__persona-bullet::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

.tamrank-optin__persona-radio:focus-visible + .tamrank-optin__persona-bullet {
    outline: 2px solid var(--tr-color-primary);
    outline-offset: 2px;
}

.tamrank-optin__disclaimer {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-400);
    flex-basis: 100%;
}

/* --------------------------------------------------------------------------
   Peak moment on the report (Branding.md §Motion & Feedback)
   Restrained confetti: 18 particles, brand palette only, shaped like the
   rounded bars of the TamRank icon, a soft fall, once.
   -------------------------------------------------------------------------- */

.tamrank-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.tamrank-confetti i {
    position: absolute;
    top: -12px;
    display: block;
    width: 9px;
    height: 4px;
    border-radius: 2px;
    opacity: 0;
    animation: tamrank-confetti-fall var(--dur) cubic-bezier(0.3, 0.1, 0.55, 1) var(--delay) both;
}

@keyframes tamrank-confetti-fall {
    0%   { transform: translate(0, 0) rotate(var(--r0)); opacity: 0; }
    8%   { opacity: 0.9; }
    80%  { opacity: 0.9; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r1)); opacity: 0; }
}

/* The check draws itself in (~0.5s) */
.tamrank-done__badge svg path {
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
}

.tamrank-done__badge.is-drawing svg path {
    stroke-dashoffset: 24;
    animation: tamrank-draw 0.5s ease 0.3s forwards;
}

@keyframes tamrank-draw {
    to { stroke-dashoffset: 0; }
}

/* Staggered fade-up on entering a step */
@keyframes tamrank-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.tamrank-sheet.is-active .tamrank-rise {
    animation: tamrank-rise 0.4s ease both;
}

.tamrank-sheet.is-active .tamrank-rise:nth-of-type(2) { animation-delay: 60ms; }
.tamrank-sheet.is-active .tamrank-rise:nth-of-type(3) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
    .tamrank-wizard *,
    .tamrank-confetti i {
        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Degradation for short screens: tighten up, never break. Nothing disappears.
   -------------------------------------------------------------------------- */

@media (max-width: 1340px) {
    .tamrank-wizard__panels { padding: 0 var(--tr-space-6) var(--tr-space-5); }
    .tamrank-plan,
    .tamrank-mig,
    .tamrank-done { gap: var(--tr-space-6); }
}

/* The threshold is where the full-size layout stops fitting in the longest
   language, not a round number. Measured on the plan step, 1440 wide, French:
   828px viewport is the last height that fits (827 overflows by 1px). Because
   the side column is 49vh, every extra viewport pixel buys only about half a
   pixel of room, so a threshold just above that floor buys almost nothing:
   841px leaves 7px, 861px leaves 16px. 860 keeps every screen height that has
   actually been reviewed (861, 900, 980) on the full-size layout and puts
   everything shorter on this one, which still has 40px to spare at 810 and
   below. French is the outlier because its mechanism strip needs a fourth
   line where the other three languages need three (101px against 83px). */
@media (max-height: 860px) {
    .tamrank-wizard__header { height: 52px; }
    .tamrank-wizard__stepper { padding: 0 0 var(--tr-space-2); }
    .tamrank-sheet__head { padding: var(--tr-space-3) var(--tr-space-8) var(--tr-space-2); }
    .tamrank-sheet__title { font-size: var(--tr-text-xl); }
    .tamrank-sheet__sub { margin-top: 2px; }
    .tamrank-sheet__body { padding: var(--tr-space-3) var(--tr-space-8); }
    .tamrank-sheet__foot { padding: 10px var(--tr-space-8); }

    .tamrank-src__row { padding-top: var(--tr-space-3); padding-bottom: var(--tr-space-3); }
    .tamrank-trustbar { margin-top: var(--tr-space-4); }

    .tamrank-plan__listhead { padding-top: 6px; padding-bottom: 6px; }
    .tamrank-plan__row { padding-top: 6px; padding-bottom: 6px; }
    .tamrank-plan__what { font-size: var(--tr-text-xs); }
    .tamrank-plan__total { padding-top: 6px; padding-bottom: 6px; }
    #tamrank-categories { max-height: 36vh; }

    .tamrank-fact { padding: 4px 0; }
    .tamrank-fact__src { font-size: 11px; line-height: 1.35; }
    .tamrank-aside__open { font-size: 11px; padding-top: 4px; padding-bottom: 4px; margin-top: var(--tr-space-2); }
    .tamrank-note { font-size: var(--tr-text-xs); margin-top: var(--tr-space-2); padding-top: var(--tr-space-2); padding-bottom: var(--tr-space-2); }
    .tamrank-rob__pre { max-height: 44px; }

    .tamrank-mechstrip { margin-top: var(--tr-space-3); padding-top: 8px; padding-bottom: 8px; }
    .tamrank-mechstrip__item { font-size: var(--tr-text-xs); }

    .tamrank-mig { margin-top: var(--tr-space-4); }
    .tamrank-mig__item { padding-top: 6px; padding-bottom: 6px; }
    .tamrank-mig__list { max-height: 36vh; }
    .tamrank-mig__log li { padding: 2px 0; }
    .tamrank-mig__log { max-height: 24vh; }
    #tamrank-success-stats { max-height: 36vh; }

    .tamrank-res__row { padding-top: 6px; padding-bottom: 6px; }
    .tamrank-report li { padding: 1px 0; }
    .tamrank-qwin { margin-top: var(--tr-space-2); padding-top: var(--tr-space-2); padding-bottom: var(--tr-space-2); }
    .tamrank-rb { padding: var(--tr-space-3) var(--tr-space-4); }
    .tamrank-rb__actions { margin-top: var(--tr-space-2); }
    .tamrank-rb__confirm { margin-top: var(--tr-space-2); padding-top: var(--tr-space-2); }
    .tamrank-rb__status { margin-top: var(--tr-space-2); }
    .tamrank-optin { margin-top: var(--tr-space-3); padding-top: var(--tr-space-2); padding-bottom: var(--tr-space-2); }
}
