/*!
 * @Rank – Image & Icon Tool
 * The tool's stylesheet. A tool is a thing people come to in order to get
 * something done and leave, so the line is deliberately quiet: ONE deep
 * indigo ink for structure, ONE amber call to action, hairlines instead of
 * shadows, and 6/8 px corners rather than 20. Colour is spent only where it
 * carries meaning — that one ink, that one action, and ok/warn/err.
 *
 * Every rule sits under the root .atrank-tool: the tool is a section inside
 * somebody else's page and must touch nothing outside its own root — no :root,
 * no html, no body, no bare *.
 *
 * Light only — there is no dark palette and no toggle.
 *
 * No font is bundled. FormFlow sets no font-family either — the tool inherits
 * the site's own typeface, so it reads as part of the page it is placed in.
 * Only the figures are pinned to tabular numerals, so columns of pixel sizes
 * line up.
 *
 * Two places are deliberately left open to the outside:
 *   --atrank-header-top  A theme with its own fixed header can push the tool's
 *                        sticky tab bar below it.
 *   .atrank-toast        Stays position:fixed — the feedback should hang off
 *                        the window, not scroll away inside the section.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────
     Values taken from FormFlow (assets/css/admin-dashboard.css) so the tool
     reads as part of the same product family:
       --accent  #1a044a  structure — headings, step numbers, active tab, focus
       --cta     #e8a002  the ONE primary action per panel (Download)
       --panel   #ffffff  cards on --bg #f7f7f8
       --r-lg    20px     FormFlow's card corner
     Two deliberate departures from FormFlow, both for contrast:
       · Text on the amber CTA is near-black, not white. FormFlow's own
         .ffe-go-pro-button uses #fff on #e8a002, which is 2.22:1 and fails
         WCAG AA. Near-black on the same amber is 8.4:1 and keeps the identity.
       · --ok and --warn are darkened from FormFlow's #16a34a / #e8a002, which
         reach only 3.3:1 and 2.2:1 as TEXT on white. The darker values hold
         5.0:1 and 4.6:1. Where they are used as a fill rather than as text the
         difference is not noticeable. */
  .atrank-tool {
	--overlay: rgba(17,12,40,.55);
	--area-inset: inset 0 0 0 1px var(--line),inset 0 2px 10px rgba(17,12,40,.07);
	--checker: repeating-conic-gradient(#e9e9ec 0% 25%,#f7f7f8 0% 50%) 0 0/16px 16px;
	--check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4.5 12.6l5.2 5.2l19.5 8'/%3e%3c/svg%3e");
	--logo: url("../img/atrank-logo.png");
}
  .atrank-tool, .atrank-tool *{ box-sizing:border-box; }.atrank-tool {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}.atrank-tool {
	accent-color: var(--accent);
	scrollbar-color: var(--line2) transparent;
}
  .atrank-tool *::-webkit-scrollbar{ width:11px; height:11px; }
  .atrank-tool *::-webkit-scrollbar-track{ background:transparent; }
  .atrank-tool *::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:99px;
    border:3px solid var(--bg); background-clip:padding-box; }
  .atrank-tool *::-webkit-scrollbar-thumb:hover{ background:var(--dim); background-clip:padding-box; }
  /* No border-radius here: the rule applies to EVERY focused element and made
     a button with an 11 px radius jump to 8 px at the moment of focus. The
     two-layer ring needs no radius of its own. */
  .atrank-tool :focus-visible{ outline:none; box-shadow:var(--ring); }

  /* ── Header with the two tabs ───────────────────────────────────────────── */
  .atrank-tool header{ display:flex; align-items:center; gap:10px; padding:6px 12px;
    background:color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
    position:sticky; top:var(--atrank-header-top, 0px); z-index:50; flex-wrap:wrap; }
  /* The header's edge is not a continuous line, it fades out towards the ends —
     the same language as the glow behind it. */
  .atrank-tool header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--line2) 18%, var(--line2) 82%, transparent); }
  .atrank-tool header .atrank-logo{ display:flex; align-items:center; gap:9px; font-weight:640; font-size:13px;
    letter-spacing:-.015em; white-space:nowrap; color:var(--txt); }
  /* The @Rank mark as a mask, not an image: that way it takes on the accent
     colour and stays visible in light as well as dark — the original is light
     grey and would be lost on a light ground. */
  .atrank-tool header .atrank-logo::before{ content:""; width:20px; height:20px; flex-shrink:0;
    background:var(--accent);
    -webkit-mask:var(--logo) center/contain no-repeat;
            mask:var(--logo) center/contain no-repeat; }
  .atrank-tool .atrank-tabs{ display:inline-flex; background:color-mix(in srgb, var(--inset) 80%, transparent);
    border:1px solid var(--line); border-radius:var(--r); padding:5px; gap:5px; }
  .atrank-tool .atrank-tab{ position:relative; border:none; background:none; color:var(--muted);
    font:600 13.5px var(--font); padding:6px 12px; border-radius:var(--r);
    cursor:pointer; transition:color .18s var(--ease); }
  .atrank-tool .atrank-tab:hover{ color:var(--txt); }
  /* Like FormFlow's active tab: a soft tinted surface with indigo lettering,
     not a filled accent block. The lift of one pixel is FormFlow's too. */
  .atrank-tool .atrank-tab.is-on{ color:var(--accent); background:var(--accent-soft);
    transform:translateY(-1px); font-weight:700; }.atrank-tool .atrank-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: color-mix(in srgb,var(--inset) 70%,transparent);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 6px 13px;
	max-width: 46%;
	letter-spacing: -.005em;
}
  .atrank-tool .atrank-status:empty{ visibility:hidden; }
  .atrank-tool .atrank-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--dim);
    flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--dim) 22%, transparent); }
  .atrank-tool .atrank-status.is-ok::before{ box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
  .atrank-tool .atrank-status.is-err::before{ box-shadow:0 0 0 3px color-mix(in srgb, var(--err) 22%, transparent); }
  .atrank-tool .atrank-status.is-ok::before{ background:var(--ok); }
  .atrank-tool .atrank-status.is-err::before{ background:var(--err); }
  .atrank-tool .atrank-panel[hidden]{ display:none; }

  /* ── Step trail ────────────────────────────────────────────────────────────
     The three steps are a genuine sequence: no size, no file; no file, no crop.
     That is why they hang off a trail instead of standing side by side in three
     identical-looking boxes — the trail carries the information of how far you
     have got. */
  .atrank-tool .atrank-track{ position:relative; padding-left:56px; display:flex; flex-direction:column; gap:14px; }
  .atrank-tool .atrank-track::before{ content:""; position:absolute; left:18px; top:34px; bottom:34px; width:1px;
    background:linear-gradient(180deg, var(--line2), var(--line) 55%, transparent); }
  /* Cards without a step still line up with the trail */
  .atrank-tool .atrank-track-after{ padding-left:56px; }
@media (max-width:640px){.atrank-tool .atrank-track, .atrank-tool .atrank-track-after{ padding-left:0; }
  .atrank-tool .atrank-track::before{ display:none; }
  }.atrank-tool .atrank-card {
	position: relative;
}
  .atrank-tool .atrank-card[hidden]{ display:none; }
  /* A step not yet reached steps back rather than disappearing — you should be
     able to see what comes next. */
  .atrank-tool .atrank-card.is-locked{ opacity:.42; pointer-events:none; filter:saturate(.5); }
  /* The step being worked on is marked by a solid accent bar across the top of
     the card — the same device FormFlow uses for its module group headings. No
     gradient: FormFlow has none anywhere. */
  .atrank-tool .atrank-card.is-active::before{ content:""; position:absolute; inset:0 0 auto; height:3px;
    border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--accent); }
  .atrank-tool .atrank-card h2{ margin:0 0 8px; font-size:13px; font-weight:640; letter-spacing:-.025em;
    text-wrap:balance; color:var(--txt); }
  /* The number sits on the trail, not in the heading */
  .atrank-tool .atrank-card h2 .atrank-num{ position:absolute; left:-56px; top:27px; display:grid; place-items:center;
    width:37px; height:37px; border-radius:50%; background:var(--bg);
    border:1px solid var(--line2); font:600 12.5px var(--mono); color:var(--dim);
    font-variant-numeric:tabular-nums;
    transition:background .4s var(--ease), border-color .4s var(--ease),
               color .4s var(--ease), box-shadow .4s var(--ease); }
  .atrank-tool .atrank-card.is-active h2 .atrank-num{ border-color:transparent; color:var(--on-accent);
    background:var(--accent);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
  /* Finished shows a check mark, not the number: the digit says "step 2", the
     check says "done" — on the trail the latter is what counts. */
  .atrank-tool .atrank-card.is-done h2 .atrank-num{ color:transparent; border-color:color-mix(in srgb, var(--ok) 40%, transparent);
    background:color-mix(in srgb, var(--ok) 10%, var(--bg)); }
  .atrank-tool .atrank-card.is-done h2 .atrank-num::after{ content:""; position:absolute; width:14px; height:14px;
    background:var(--ok);
    -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat; }
@media (max-width:640px){.atrank-tool .atrank-card h2{ display:flex; align-items:center; gap:12px; }
  .atrank-tool .atrank-card h2 .atrank-num{ position:static; width:30px; height:30px; }
  }
  .atrank-tool .atrank-sub{ margin:0 0 12px; color:var(--muted); font-size:12.5px; line-height:1.55;
    max-width:64ch; }
  .atrank-tool .atrank-sub:last-child{ margin-bottom:0; }

  /* The one designed moment: a step that becomes reachable rises in once.
     Nothing else moves while the page builds. */
  @keyframes schrittAuf{from{ opacity:0; transform:translateY(14px); filter:blur(7px); }
  to{ opacity:1; transform:none; filter:blur(0); }
  }
  .atrank-tool .atrank-card.is-rising{ animation:schrittAuf .52s var(--ease) both; }

  /* Micro labels: letter-spaced and small, so they order without shouting */
  .atrank-tool .atrank-field, .atrank-tool .atrank-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em;
    font-weight:650; color:var(--dim); }
  .atrank-tool .atrank-field{ display:block; margin-bottom:4px; }
  .atrank-tool .atrank-field input, .atrank-tool .atrank-field textarea{ display:block; width:100%; margin-top:7px;
    background:var(--inset); border:1px solid var(--line2); color:var(--txt);
    border-radius:var(--r); padding:11px 13px; font:inherit; font-size:15px; font-weight:550;
    letter-spacing:-.01em; text-transform:none; font-variant-numeric:tabular-nums;
    caret-color:var(--accent); transition:border-color .18s var(--ease), background .18s var(--ease); }
  .atrank-tool .atrank-field input::placeholder, .atrank-tool .atrank-field textarea::placeholder, .atrank-tool .atrank-textarea::placeholder{ color:var(--dim); font-weight:400; }
  .atrank-tool .atrank-field input:hover, .atrank-tool .atrank-field textarea:hover{ border-color:var(--dim); }
  .atrank-tool .atrank-field input:focus, .atrank-tool .atrank-field textarea:focus{ outline:none; border-color:var(--accent);
    background:var(--panel2); box-shadow:var(--ring); }
  /* The spinner arrows on number fields are browser furniture and disturb the calm */
  .atrank-tool .atrank-field input[type=number]::-webkit-outer-spin-button, .atrank-tool .atrank-field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .atrank-tool .atrank-field input[type=number]{ -moz-appearance:textfield; }
  .atrank-tool input:focus-visible, .atrank-tool textarea:focus-visible, .atrank-tool button:focus-visible, .atrank-tool select:focus-visible{ outline:none; box-shadow:var(--ring); }

  /* Size entry: width × height side by side, like a sum */
  .atrank-tool .atrank-size{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
  .atrank-tool .atrank-size .atrank-field{ width:138px; margin:0; }
  .atrank-tool .atrank-size .atrank-times{ font-size:17px; color:var(--dim); padding-bottom:12px; font-weight:400; }
  .atrank-tool #atrank-bRatio{ padding-bottom:13px; font-variant-numeric:tabular-nums; font-size:12.5px;
    color:var(--dim); letter-spacing:.01em; }
  /* Format list: grouped by orientation, one aspect ratio per row. Laid out
     flat side by side it would be 21 identical-looking pills — unusable. */
  .atrank-tool .atrank-presets{ display:flex; flex-direction:column; gap:20px; margin-top:24px;
    padding-top:24px; border-top:1px solid var(--line); }
  .atrank-tool .atrank-preset-group{ display:flex; flex-direction:column; gap:7px; }
  .atrank-tool .atrank-preset-group > .atrank-label{ margin:0 0 3px; }
  .atrank-tool .atrank-preset-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .atrank-tool .atrank-preset-row > .atrank-preset-ratio{ width:44px; flex-shrink:0; font:600 11.5px var(--mono); color:var(--dim);
    font-variant-numeric:tabular-nums; letter-spacing:.02em; }
  .atrank-tool .atrank-preset{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--r);
    color:var(--muted); font:500 12px var(--font); padding:7px 12px; cursor:pointer;
    font-variant-numeric:tabular-nums; letter-spacing:-.005em;
    transition:border-color .18s var(--ease), color .18s var(--ease),
               background .18s var(--ease), box-shadow .18s var(--ease); }
  .atrank-tool .atrank-preset b{ color:var(--txt); font-weight:650; margin-right:6px; }
  .atrank-tool .atrank-preset:hover{ border-color:var(--dim); color:var(--txt); background:var(--panel); }
  /* The chosen format carries the accent colour — it is the only place in the
     list where colour means anything. */
  .atrank-tool .atrank-preset.is-on{ border-color:transparent; color:var(--txt);
    background:color-mix(in srgb, var(--accent) 15%, var(--panel2));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 62%, transparent); }
  .atrank-tool .atrank-preset.is-on b{ color:var(--accent-h); }

  /* Drop zone for the file */
  .atrank-tool .atrank-file{ position:relative; display:inline-flex; }
  .atrank-tool .atrank-file input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .atrank-tool .atrank-drop{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
    justify-content:center; background:var(--inset); border:1px dashed var(--line2);
    border-radius:var(--r); padding:40px 20px; cursor:pointer; text-align:center;
    font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--txt);
    transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
  .atrank-tool .atrank-drop:hover{ border-color:var(--dim); background:var(--panel2); }
  .atrank-tool .atrank-drop.is-over{ border-color:var(--accent); border-style:solid;
    background:color-mix(in srgb, var(--accent) 7%, var(--panel2)); transform:scale(1.004); }

  /* The work surface is the heart of the page: recessed rather than raised, so
     that the image inside it stays the brightest thing and everything else
     recedes. */
  /* Work surface as in Canva: a neutral ground with the "sheet" lying on it —
     the chequerboard for transparency belongs on the sheet, not in the
     background, otherwise it looks as though everything were transparent. */
  .atrank-tool .atrank-cropbox{ position:relative; background:#4a4d52; border-radius:var(--r); overflow:hidden;
    max-height:420px; box-shadow:var(--area-inset); }
  .atrank-tool .atrank-cropbox img{ max-width:100%; display:block; }
  .atrank-tool #atrank-bAiPrev{ display:none; position:absolute; z-index:5; pointer-events:none;
    width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center;
    font:700 17px/1 var(--font); letter-spacing:.3px; }
  .atrank-tool #atrank-bCreditPrev{ display:none; position:absolute; z-index:5; pointer-events:none;
    font:500 12px/1.2 var(--font); color:#fff; opacity:.92;
    text-shadow:0 1px 3px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.6);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* The target area itself: sits behind the image and carries the chosen
     backdrop colour. If it stays transparent, the box's light table shows
     through — and the margin then comes out transparent in the file too. */
  /* The sheet: a fixed area at the target size, with an edge and a drop
     shadow, so you can see what you are working on. With no colour chosen it
     carries the chequerboard — the file then comes out transparent there. */
  .atrank-tool #atrank-bArea{ display:none; position:absolute; pointer-events:none;
    background:var(--checker);
    box-shadow:var(--shadow), 0 1px 3px rgba(17,12,40,.12); }
  /* Darken everything OUTSIDE the area. Cropper brings its own veil for that —
     but that one lies over the backdrop area and would have falsified its
     colour. Hence modal:false and this ring, which lies over the image and
     leaves the area itself alone. */
  .atrank-tool #atrank-bOutside{ display:none; position:absolute; pointer-events:none; z-index:4;
    box-shadow:0 0 0 9999px var(--overlay);
    outline:1px solid var(--line2); outline-offset:0; }
  /* Handles on the image corners: you change the size deliberately — by
     dragging a corner or using the slider. No wheel zoom (18.08.2026, Romeo's
     request: scrolling through the page otherwise moved the image by
     accident). */
  .atrank-tool #atrank-bHandles{ display:none; position:absolute; inset:0; pointer-events:none; z-index:6; }
  .atrank-tool #atrank-bHandles .atrank-handle{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
    border-radius:50%; background:#fff; border:2px solid var(--accent);
    box-shadow:0 1px 4px rgba(0,0,0,.5); pointer-events:auto; touch-action:none; }
  .atrank-tool #atrank-bHandles .atrank-handle:hover{ transform:scale(1.15); }
  .atrank-tool #atrank-bHandles .atrank-handle-nw, .atrank-tool #atrank-bHandles .atrank-handle-se{ cursor:nwse-resize; }
  .atrank-tool #atrank-bHandles .atrank-handle-ne, .atrank-tool #atrank-bHandles .atrank-handle-sw{ cursor:nesw-resize; }
  /* Outline of the image itself — shows what you can drag */
  .atrank-tool #atrank-bImageEdge{ display:none; position:absolute; pointer-events:none; z-index:5;
    outline:1px dashed rgba(255,255,255,.75); }
  .atrank-tool .atrank-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .atrank-tool .atrank-hint{ font-size:11.5px; color:var(--muted); line-height:1.6; }
  .atrank-tool .atrank-label{ margin:0 0 12px; }
  .atrank-tool .atrank-zone{ padding-top:24px; margin-top:24px; border-top:1px solid var(--line); }
  /* Wherever numbers sit above one another, they should actually line up */
  .atrank-tool .atrank-slider > span:last-child, .atrank-tool .atrank-stage-count, .atrank-tool #atrank-bInfo, .atrank-tool #atrank-iInfo, .atrank-tool #atrank-bRatio{ font-variant-numeric:tabular-nums; }
  .atrank-tool .atrank-foot{ display:flex; gap:16px; align-items:center; justify-content:flex-end;
    margin-top:26px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
  .atrank-tool .atrank-foot .atrank-info{ margin-right:auto; font-size:12.5px; color:var(--muted); line-height:1.55;
    font-variant-numeric:tabular-nums; }
  /* Small square-ish corners, not pills: a tool's buttons are controls. */
  .atrank-tool .atrank-btn{ border-radius:var(--r); padding:6px 12px; font-size:12.5px; font-weight:700;
    letter-spacing:-.012em; cursor:pointer; font-family:var(--font); border:1px solid transparent;
    transition:background .18s var(--ease), color .18s var(--ease),
               border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); }
  .atrank-tool .atrank-btn:active:not([disabled]){ transform:translateY(1px); }
  /* The one primary action per panel, in FormFlow's CTA amber. The lettering is
     near-black, not white: FormFlow's own .ffe-go-pro-button puts #fff on this
     amber at 2.22:1, which fails WCAG AA. Near-black holds 8.4:1 and keeps the
     colour. The amber drop shadow is FormFlow's. */
  .atrank-tool .atrank-btn-primary{ color:var(--on-cta); background:var(--cta); font-weight:800;
    box-shadow:0 4px 10px rgba(232,160,2,.28); }
  .atrank-tool .atrank-btn-primary:hover:not([disabled]){ background:var(--cta-h);
    box-shadow:0 6px 16px rgba(232,160,2,.38); }
  .atrank-tool .atrank-btn-ghost{ background:transparent; border-color:var(--line2); color:var(--muted); }
  .atrank-tool .atrank-btn-ghost:hover{ background:var(--hover); color:var(--txt); }
  .atrank-tool .atrank-btn-secondary{ background:var(--panel2); border-color:var(--line2); color:var(--txt); font-weight:550;
    padding:9px 15px; font-size:12.5px; }
  .atrank-tool .atrank-btn-secondary:hover{ border-color:var(--dim); background:var(--panel); }
  .atrank-tool .atrank-btn[disabled]{ opacity:.35; cursor:default; box-shadow:none; }
  .atrank-tool .atrank-seg{ display:inline-flex; flex-shrink:0; align-items:stretch; background:var(--panel2);
    border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; }
  .atrank-tool .atrank-seg button{ border:none; background:none; color:var(--muted); padding:10px 13px;
    cursor:pointer; display:flex; align-items:center; transition:background .16s var(--ease), color .16s var(--ease); }
  .atrank-tool .atrank-seg button:hover{ background:var(--hover); color:var(--txt); }
  .atrank-tool .atrank-seg button:active{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--txt); }
  /* .is-on = a lasting state (mirroring is on), not the moment of the click —
     hence stronger than :active and with its own hover, otherwise moving over
     an enabled button would make it look disabled. */
  .atrank-tool .atrank-seg button.is-on{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--txt); }
  .atrank-tool .atrank-seg button.is-on:hover{ background:color-mix(in srgb, var(--accent) 28%, transparent); }
  .atrank-tool .atrank-seg button + button{ border-left:1px solid var(--line); }
  .atrank-tool .atrank-seg svg{ display:block; }
  .atrank-tool .atrank-select{ -webkit-appearance:none; appearance:none; cursor:pointer;
    background:var(--inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b9b4ab' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center / 11px;
    border:1px solid var(--line2); border-radius:var(--r); color:var(--txt);
    padding:8px 32px 8px 11px; font:500 13px var(--font); }
  .atrank-tool .atrank-select:hover{ border-color:var(--muted); }

  /* AI badge: the options as a quiet sub-panel */
  .atrank-tool .atrank-ai-panel{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
  .atrank-tool .atrank-ai-choice{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
  /* Stronger crop lines (late 16.08., as in the editor): white with a dark
     shadow — visible on light AND dark images. */
  .atrank-tool .cropper-view-box{ outline: 2px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.55); }
  .atrank-tool .cropper-dashed{ border-color: rgba(255,255,255,.95); opacity: .85; filter: drop-shadow(0 0 1px rgba(0,0,0,.7)); }
  .atrank-tool .cropper-line{ background-color: rgba(255,255,255,.85); }
  .atrank-tool .cropper-point{ background-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); opacity: .95; }
  /* Image kind as tappable cards (dialog rework 16.08.2026, as in the editor) */
  .atrank-tool .atrank-kind-opt{ display:flex; gap:11px; align-items:flex-start; padding:10px 12px; margin-top:8px;
    border:1px solid var(--line2); border-radius:var(--r); cursor:pointer; background:transparent;
    transition:border-color .15s ease, background-color .15s ease; }
  .atrank-tool .atrank-kind-opt:hover{ border-color:var(--accent); }
  .atrank-tool .atrank-kind-opt:has(input:checked){ border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 7%, transparent); box-shadow:inset 0 0 0 1px var(--accent); }
  .atrank-tool .atrank-kind-opt input{ width:16px; height:16px; margin-top:2px; accent-color:var(--accent); cursor:pointer; flex:none; }
  .atrank-tool .atrank-kind-opt span strong{ display:block; font-size:13.5px; font-weight:600; color:var(--txt); }
  .atrank-tool .atrank-kind-opt span small{ display:block; font-size:12px; color:var(--muted); margin-top:1px; line-height:1.45; }
  .atrank-tool .atrank-ai-choice label{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); }
  .atrank-tool .atrank-slider{ display:grid; grid-template-columns:88px 1fr 62px; align-items:center; gap:12px; margin-top:10px; }
  .atrank-tool .atrank-slider > span:first-child{ font-size:12.5px; color:var(--muted); }
  .atrank-tool .atrank-slider > span:last-child{ font-size:12.5px; color:var(--txt); text-align:right;
    font-variant-numeric:tabular-nums; white-space:nowrap; }
  .atrank-tool input[type=range].atrank-range{ -webkit-appearance:none; appearance:none; height:3px; border-radius:99px;
    background:var(--line2); flex:1; cursor:pointer; }
  .atrank-tool input[type=range].atrank-range::-webkit-slider-thumb{ -webkit-appearance:none; width:17px; height:17px;
    border-radius:50%; background:var(--on-accent); border:5px solid var(--accent); cursor:pointer;
    box-shadow:0 1px 3px rgba(17,12,40,.2), 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent);
    transition:box-shadow .2s var(--ease); }
  .atrank-tool input[type=range].atrank-range:hover::-webkit-slider-thumb, .atrank-tool input[type=range].atrank-range:focus-visible::-webkit-slider-thumb{
    box-shadow:0 1px 3px rgba(17,12,40,.2), 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); }
  .atrank-tool input[type=range].atrank-range::-moz-range-thumb{ width:15px; height:15px; border-radius:50%;
    background:var(--on-accent); border:5px solid var(--accent); cursor:pointer; }
  .atrank-tool input[type=range].atrank-range:focus-visible{ box-shadow:none; }

  /* ── Icon work area: stage + role column ─────────────────────────────────── */
  .atrank-tool .atrank-work{ display:grid; grid-template-columns:1fr 250px; gap:16px; align-items:stretch; }
  .atrank-tool .atrank-stage{ position:relative; border-radius:var(--r); min-height:min(260px, max(150px, 24vh)); overflow:hidden;
    box-shadow:var(--area-inset); }
  .atrank-tool .atrank-stage-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:26px; background:var(--checker); transition:background .3s var(--ease); }
  .atrank-tool .atrank-stage-bgs{ position:absolute; top:11px; right:11px; display:flex; gap:7px; align-items:center;
    background:color-mix(in srgb, var(--panel) 86%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid var(--line); border-radius:var(--r); padding:7px 10px;
    box-shadow:var(--shadow); }
  .atrank-tool .atrank-stage-count{ position:absolute; left:12px; bottom:11px; font-size:11.5px; color:var(--txt);
    background:color-mix(in srgb, var(--panel) 88%, transparent); border-radius:var(--r); padding:4px 11px; font-weight:600;
    letter-spacing:-.005em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .atrank-tool .atrank-side{ background:var(--inset); border-radius:var(--r); padding:17px;
    display:flex; flex-direction:column; gap:0;
    box-shadow:inset 0 0 0 1px var(--line); }
  .atrank-tool .atrank-dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line2); cursor:pointer;
    padding:0; transition:transform .12s,border-color .12s; flex-shrink:0; }
  .atrank-tool .atrank-dot:hover{ transform:scale(1.12); }
  .atrank-tool .atrank-dot.is-on{ border-color:var(--accent); }
  .atrank-tool .atrank-role{ display:flex; align-items:center; gap:11px; background:var(--panel);
    border:1px solid var(--line2); border-radius:var(--r); padding:10px 12px; cursor:pointer;
    color:var(--txt); font:500 13px var(--font); text-align:left; width:100%;
    transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
  .atrank-tool .atrank-role:hover{ border-color:var(--dim); }
  .atrank-tool .atrank-role.is-on{ border-color:transparent;
    background:color-mix(in srgb, var(--accent) 11%, var(--panel));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent); }
  /* The colour field shows what a click will do — so it gets depth rather than
     a border, like a real swatch. */
  .atrank-tool .atrank-role i{ width:22px; height:22px; border-radius:7px; display:block; flex-shrink:0;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--txt) 22%, transparent),
               0 1px 3px rgba(17,12,40,.14); }
  .atrank-tool .atrank-role .atrank-role-text{ display:flex; flex-direction:column; gap:1px; }
  .atrank-tool .atrank-role .atrank-role-text b{ font-weight:600; }
  .atrank-tool .atrank-role .atrank-role-text code{ font:500 10.5px var(--mono); color:var(--dim); }
  .atrank-tool .atrank-role .atrank-role-count{ margin-left:auto; font:600 11px var(--mono); color:var(--dim);
    background:var(--inset); border-radius:var(--r); padding:3px 8px;
    font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 1px var(--line); }
  .atrank-tool .atrank-role.is-on .atrank-role-count{ color:var(--txt); }
  .atrank-tool .atrank-colour-row{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12.5px; color:var(--muted); }
  .atrank-tool .atrank-colour-row input[type=color]{ width:34px; height:26px; padding:0; border:1px solid var(--line2);
    border-radius:7px; background:none; cursor:pointer; }
  .atrank-tool .atrank-textarea{ width:100%; background:var(--inset); border:1px solid var(--line2); border-radius:var(--r);
    color:var(--txt); padding:10px; font:12px/1.5 var(--mono); resize:vertical; }
  .atrank-tool pre.atrank-css{ background:var(--inset); border-radius:var(--r); padding:18px 20px;
    font:12.5px/1.7 var(--mono); color:var(--muted); overflow-x:auto; margin:0;
    box-shadow:var(--field-inset); -moz-tab-size:2; tab-size:2; }
  .atrank-tool pre.atrank-css .atrank-css-key{ color:var(--accent-h); }
  /* Notices carry their meaning in the colour of the text and a faint ground —
     no thick bar down the side. */
  .atrank-tool .atrank-notice{ border-radius:var(--r); padding:6px 9px; font-size:12px; line-height:1.65; margin-top:18px;
    animation:schrittAuf .38s var(--ease) both; }
  .atrank-tool .atrank-notice code{ font:600 12px var(--mono); }.atrank-tool .atrank-notice.is-warn {
	box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--warn) 32%,transparent);
	color: var(--warn);
}.atrank-tool .atrank-notice.is-err {
	box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--err) 36%,transparent);
	color: var(--err);
}.atrank-tool .atrank-notice.is-ok {
	box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ok) 32%,transparent);
	color: var(--ok);
}
  .atrank-tool .atrank-notice[hidden]{ display:none; }
  .atrank-tool .atrank-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
    background:var(--panel2); border:1px solid var(--line2); color:var(--txt); border-radius:var(--r);
    padding:7px 12px; font-size:12px; box-shadow:var(--shadow); z-index:10050; opacity:0;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
    pointer-events:none; max-width:70vw; }.atrank-tool .atrank-toast.is-err {
	border-color: color-mix(in srgb,var(--err) 55%,var(--line2));
}

  /* ── Press feedback ────────────────────────────────────────────────────────
     The most important sentence in this block: the surface gives way on PRESS,
     not on release. :active fires on pointer-down — exactly the right moment.
     touch-action:manipulation removes the 300 ms tap delay (the script also
     registers an empty touchstart, without which iOS never grants :active at
     all).
     .atrank-btn, .atrank-seg button and .atrank-dot have their own response —
     the remaining targets are added here. Small targets give way more than
     large surfaces. */
  .atrank-tool button, .atrank-tool [role="button"], .atrank-tool .atrank-role, .atrank-tool .atrank-preset, .atrank-tool .atrank-drop, .atrank-tool .atrank-file label{
    touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .atrank-tool .atrank-tab:active, .atrank-tool .atrank-role:active, .atrank-tool .atrank-preset:active{
    transform:scale(.97); transition:transform .1s var(--ease); }
  .atrank-tool .atrank-drop:active{ transform:scale(.995); transition:transform .1s var(--ease); }
  /* The dot carries a transform of its OWN (growing on hover) — so it returns
     from the grown state instead of jumping. */
  .atrank-tool .atrank-dot:active{ transform:scale(1.02); transition:transform .1s var(--ease); }
  .atrank-tool .atrank-tab, .atrank-tool .atrank-role, .atrank-tool .atrank-preset{ transition:color .18s var(--ease), background .18s var(--ease),
    border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }

  /* ── Less motion ───────────────────────────────────────────────────────────
     This does not mean "no feedback": opacity and colour stay, because they
     explain what is happening. What goes is everything that drags the eye
     across the space. The durations go to 1 ms rather than 0 — otherwise
     animationend stops firing and raiseStep() never clears its class again. */
  @media (prefers-reduced-motion: reduce){.atrank-tool, .atrank-tool *, .atrank-tool *::before, .atrank-tool *::after{
      transition-duration:1ms !important; transition-delay:0s !important;
      animation-duration:1ms !important; animation-delay:0s !important;
      animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .atrank-tool .atrank-tab:active, .atrank-tool .atrank-role:active, .atrank-tool .atrank-preset:active, .atrank-tool .atrank-drop:active, .atrank-tool .atrank-drop.is-over, .atrank-tool .atrank-btn:active, .atrank-tool .atrank-dot:hover{ transform:none !important; }
  }
@media (max-width:700px){.atrank-tool .atrank-work{ grid-template-columns:1fr; }
  .atrank-tool main{ padding:18px 14px 70px; }
  }

/* ── Alternative text ───────────────────────────────────────────────────────
   Added 08.09.2026 with the alt-text panel. Two things here are function
   rather than decoration:
     · the two output fields are monospaced and select-all on focus, because
       they are meant to be copied whole and pasted into a template;
     · a finding's level is carried by its LEFT BORDER as well as its
       background, so it survives a client theme that overrides background
       colours - which several do. */
.atrank-tool .atrank-alth{
  margin:0 0 4px; font-size:14px; font-weight:700; color:var(--txt);
}
.atrank-tool .atrank-altroles{
  border:1px solid var(--line); border-radius:var(--r); margin:0;
  padding:10px 12px 12px; display:flex; flex-wrap:wrap; gap:8px 16px;
}
.atrank-tool .atrank-altroles legend{ padding:0 6px; }
.atrank-tool .atrank-altroles label{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:13px; color:var(--txt);
}
.atrank-tool .atrank-altroles input{
  width:15px; height:15px; accent-color:var(--accent); cursor:pointer;
}
.atrank-tool .atrank-altnotes{ display:grid; gap:6px; margin:10px 0 0; }
.atrank-tool .atrank-altnote{
  margin:0; padding:8px 11px; font-size:12.5px; line-height:1.5;
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r);
  background:var(--panel2); color:var(--txt);
}
.atrank-tool .atrank-altnote.is-ok{ border-left-color:var(--ok); }
.atrank-tool .atrank-altnote.is-note{ border-left-color:var(--accent); }
.atrank-tool .atrank-altnote.is-warn{ border-left-color:var(--warn); }
.atrank-tool .atrank-altoffers{ margin:10px 0 0; }
.atrank-tool .atrank-altoffer{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; text-align:left; margin:0 0 6px; padding:8px 11px;
  font-size:12.5px; font-weight:500; line-height:1.4; white-space:normal;
}
.atrank-tool .atrank-altoffer .atrank-hint{ font-size:11.5px; }
.atrank-tool .atrank-altout{
  display:flex; align-items:flex-end; gap:8px; margin:10px 0 0;
}
.atrank-tool .atrank-altout .atrank-field{ flex:1 1 auto; min-width:0; }
.atrank-tool .atrank-altout input{
  font-family:var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size:12.5px;
}
.atrank-tool .atrank-hint.is-warn{ color:var(--warn); font-weight:600; }