/*!
 * @Rank – Code to Image Converter
 * 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-cti: 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 *. See ADR-008.
 *
 * Light only. There is no dark palette and no toggle.
 *
 * Two rules here are function rather than styling:
 *   · the preview stage sits on a CHECKERBOARD, because a picture exported with
 *     a transparent background looks identical to a white one on a white card,
 *     and the difference matters the moment it is placed on anything;
 *   · the canvas is never scaled UP. It shrinks to fit the panel and stops at
 *     its own size, so what is on screen is never a flattering enlargement of
 *     the file that will actually be saved.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────
     The palette is deliberately narrow. Structure is carried by ONE deep ink
     — #1a044a, the old #26076b darkened, 18.1:1 on white — and nothing else is
     brand does not need to be repeated in every border. Amber stays as the
     single call to action. Two contrast rules are inherited and still hold:
       · 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. */
.atrank-cti {
}

/* Only two selectors reach past the tool's own elements, and both are scoped to
   the root so they cannot leak into the client's page. */
.atrank-cti, .atrank-cti *{ box-sizing:border-box; }
/* The hidden attribute has to WIN. No element here currently collides with a
   display rule, but Converter Tool had exactly that bug — a bar carrying a
   .row class with display:flex stayed on screen despite being marked hidden,
   because an author rule beats the browser's own display:none for [hidden].
   This costs one line and removes the whole class of mistake. */
.atrank-cti [hidden]{ display:none !important; }.atrank-cti {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────────
   Sticky, so the status stays visible while scrolling a long text. A theme with
   a fixed header of its own sets --atrank-header-top and it sits below it. */
.atrank-cti header{
  position:sticky; top:var(--atrank-header-top, 0px); z-index:5;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 12px; background:var(--panel);
  border-bottom:1px solid var(--line); box-shadow:none;
}
/* The preview needs a checkerboard for the transparent case. */
.atrank-cti {
	--checker: repeating-conic-gradient(#e6e6ea 0% 25%,#f6f6f8 0% 50%) 0 0/14px 14px;
}

/* ── Layout ────────────────────────────────────────────────────────────────
   One column. The picture is the widest thing in the tool and there is no width
   to spare beside it, so the two-column trick the other tools use would only
   make the preview smaller. Density comes from the padding and the gaps
   instead — 13/15 px cards and 10 px gaps, as settled in the pass of 01.09. */
.atrank-cti main{ display:block; padding:10px 12px 12px; }
.atrank-tool-root .atrank-panel{ display:block; }
.atrank-cti-track{ display:grid; gap:10px; }

/* Past 1000 px the picture sits BESIDE the code in a sticky column. The rule
   the line settled on is "use the width you are given", and here it earns its
   keep twice: the tool drops from 1.56 screens to under one, and editing the
   code while watching the picture change no longer means scrolling between the
   two — which is the whole loop this tool is used in. */
@media (min-width:1000px){
  .atrank-cti-track{ grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); align-items:start; }
  .atrank-cti-bar{ grid-column:1 / -1; }
  .atrank-cti-track > #atrank-cti-codeCard{ grid-column:1; grid-row:2; }
  .atrank-cti-track > #atrank-cti-settingsCard{ grid-column:1; grid-row:3; }
  .atrank-cti-track > #atrank-cti-previewCard{
    grid-column:2; grid-row:2 / span 2;
    position:sticky; top:calc(var(--atrank-header-top, 0px) + 62px);
  }
  /* The left column is taller than the code card needs, and a box that
     scrolls while there is empty space beside it is the wrong trade. */
  .atrank-tool-root .atrank-card textarea{ min-height:min(260px, max(150px, 24vh)); }
}
.atrank-tool-root .atrank-cardhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.atrank-tool-root .atrank-card h2{
  margin:0 0 8px; font-size:13px; font-weight:700; color:var(--txt); letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px;
}
.atrank-cti-num{
  display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700;
}.atrank-tool-root .atrank-hint {
	line-height: 1.45;
}
.atrank-tool-root .atrank-cardhead .atrank-hint{ flex:1 1 12ch; }
.atrank-cti-headbtns{ display:inline-flex; gap:6px; align-items:center; margin-left:auto; }
.atrank-tool-root .atrank-cardhead > .atrank-btn{ margin-left:auto; }
.atrank-cti-wysiwyg{ max-width:34ch; }
.atrank-cti-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* ── The boxed control ─────────────────────────────────────────────────────
   The pattern the whole toolbar is built from: a bordered box with a small
   label sitting above the value inside it. The border belongs to the BOX and
   the control inside is borderless, which is what makes a select and a text
   field read as the same kind of thing. */
.atrank-cti-box{
  display:flex; flex-direction:column; gap:1px; min-width:0;
  padding:5px 9px 6px; border:1px solid var(--line2); border-radius:var(--r-lg);
  background:var(--panel); cursor:pointer;
}
.atrank-cti-box:hover{ border-color:var(--accent); }
.atrank-cti-box:focus-within{ border-color:var(--accent); box-shadow:var(--ring); }
.atrank-cti-blabel{
  font-size:10.5px; font-weight:600; color:var(--dim); letter-spacing:.01em;
  text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-cti-box select,
.atrank-cti-box input[type="text"],
.atrank-cti-box input[type="number"]{
  appearance:none; -webkit-appearance:none; width:100%; min-width:0;
  border:none; background:transparent; padding:0; margin:0;
  font:inherit; font-size:13px; font-weight:600; color:var(--txt);
  line-height:1.35; cursor:pointer;
}
.atrank-cti-box input[type="text"], .atrank-cti-box input[type="number"]{ cursor:text; }
.atrank-cti-box select:focus-visible,
.atrank-cti-box input:focus-visible{ outline:none; }
.atrank-cti-box input::placeholder{ color:var(--dim); font-weight:400; }
/* The select needs its own chevron once the native one is gone. A background
   image, so it cannot be clipped by the box's overflow. */
.atrank-cti-box select{
  padding-right:16px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 6px) calc(50% + 1px), calc(100% - 2px) calc(50% + 1px);
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
.atrank-cti-colourbox{ flex-direction:row; align-items:center; gap:8px; }
.atrank-cti-colourbox .atrank-cti-blabel{ order:1; }
.atrank-cti-colourbox input[type="color"]{
  order:2; width:38px; height:24px; padding:0; border:1px solid var(--line2);
  border-radius:6px; background:none; cursor:pointer; flex:0 0 auto;
}
.atrank-cti-colourbox input[type="color"]:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── The toolbar ─────────────────────────────────────────────────────────── */
.atrank-cti-bar{ display:grid; gap:8px; grid-template-columns:1fr; }
@media (min-width:720px){
  .atrank-cti-bar{ grid-template-columns:1fr 1fr 1fr auto; align-items:stretch; }
}
.atrank-cti-settingsBtn{ align-self:stretch; padding-inline:14px; }

/* ── Settings ───────────────────────────────────────────────────────────── */
.atrank-cti-grid{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.atrank-cti-checks{ display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:10px; }
.atrank-cti-settings{ border-color:var(--accent); }

.atrank-tool-root .atrank-card textarea{
  display:block; width:100%; resize:vertical; min-height:120px;
  padding:10px 12px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--inset); color:var(--txt);
  font-family:var(--mono); font-size:12.5px; line-height:1.55;
  tab-size:4; -moz-tab-size:4;
}
.atrank-tool-root .atrank-card textarea:focus-visible{ outline:none; box-shadow:var(--ring); border-color:var(--accent); }
.atrank-tool-root .atrank-card textarea.is-over{ border-color:var(--accent); background:var(--accent-soft); }
.atrank-cti #atrank-cti-langNote{ display:block; margin-top:5px; }

/* ── The stage ──────────────────────────────────────────────────────────── */
/* Capped, so a 200-line snippet does not push everything under the picture off
   the screen. The canvas keeps its aspect ratio inside the cap and the readout
   still gives the exact pixel size, so nothing is misrepresented. */
.atrank-cti-stage{
  display:grid; place-items:center; min-height:140px; max-height:min(62vh, 560px); padding:12px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel2);
}
/* The checkerboard belongs behind the PICTURE, not behind the stage: what it
   is there to reveal is transparency in the exported file, and putting it
   under the whole stage says the empty state is transparent too. */
.atrank-cti-stage canvas{
  display:block; background:var(--checker);
  /* Shrinks to fit, never grows. The picture on screen is the file, and a
     preview that enlarges a small export flatters it into looking sharp. */
  max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:6px;
}
.atrank-cti-empty{ margin:0; color:var(--dim); font-size:12.5px; text-align:center; }
.atrank-cti-stage.is-full{ background:#0b0b12; padding:20px; border-radius:0; min-height:100vh; }
.atrank-cti-stage.is-full canvas{ max-height:calc(100vh - 40px); width:auto; }
.atrank-cti-stage.is-big{ padding:0; }
.atrank-cti-stage.is-big canvas{ max-width:none; }

/* ── The rows under the picture ─────────────────────────────────────────── */
.atrank-cti-controlrow{
  display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-top:10px;
}
.atrank-cti-controlrow .atrank-cti-seg{ margin-left:auto; }
.atrank-cti-bgrow{ align-items:stretch; }
.atrank-cti-bgrow .atrank-cti-box{ flex:1 1 150px; min-width:130px; }
.atrank-cti-export{ margin-left:auto; align-self:stretch; padding-inline:18px; font-size:13.5px; }

/* ── A sub-panel inside a card ──────────────────────────────────────────── */
.atrank-cti-sub{
  margin-top:10px; padding:10px 11px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel2);
}
.atrank-cti-subtitle{
  display:block; margin-bottom:7px; font-size:11.5px; font-weight:700; color:var(--muted);
}

/* ── Choosing a picture ─────────────────────────────────────────────────── */
.atrank-cti-upload{ cursor:default; }
.atrank-cti-file{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.atrank-cti-filelabel{
  font-size:13px; font-weight:600; color:var(--accent); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-cti-filelabel:hover{ text-decoration:underline; }
.atrank-cti-file:focus-visible + .atrank-cti-filelabel{ outline:none; box-shadow:var(--ring); border-radius:4px; }

/* ── The segmented control ──────────────────────────────────────────────── */
.atrank-cti-seg{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; }
.atrank-cti-segbtn{
  appearance:none; border:none; border-right:1px solid var(--line2);
  background:var(--panel); color:var(--muted); font:inherit; font-size:12.5px;
  font-weight:600; padding:6px 12px; cursor:pointer; transition:background .12s var(--ease);
}
.atrank-cti-segbtn:last-child{ border-right:none; }
.atrank-cti-segbtn:hover{ color:var(--accent); background:var(--hover); }
.atrank-cti-segbtn.is-on{ color:var(--on-accent); background:var(--accent); }
.atrank-cti-segbtn:focus-visible{ outline:none; box-shadow:var(--ring); z-index:1; position:relative; }

/* ── Checkboxes ─────────────────────────────────────────────────────────── */
.atrank-cti-check{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--txt); user-select:none;
}
.atrank-cti-check input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.atrank-cti-check span{
  position:relative; flex:0 0 auto; width:17px; height:17px; border-radius:5px;
  border:1px solid var(--line2); background:var(--panel); transition:all .12s var(--ease);
}
.atrank-cti-check span::after{
  content:""; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:solid var(--on-accent); border-width:0 2px 2px 0;
  transform:rotate(42deg) scale(.6); opacity:0; transition:all .12s var(--ease);
}
.atrank-cti-check input:checked + span{ background:var(--accent); border-color:var(--accent); }
.atrank-cti-check input:checked + span::after{ opacity:1; transform:rotate(42deg) scale(1); }
.atrank-cti-check input:focus-visible + span{ outline:none; box-shadow:var(--ring); }

/* ── The readout ────────────────────────────────────────────────────────── */
/* One wrapping line of pairs rather than a two-column table. Six table rows
   cost about 70 px of height for information that is read at a glance, and
   height is the scarce thing in this tool. */
.atrank-cti-readout{ margin:9px 0 0; font-size:12px; line-height:1.7; }
.atrank-cti-readout:empty{ margin:0; }
.atrank-cti-readout dt{
  display:inline; color:var(--dim); font-weight:600; white-space:nowrap;
}
.atrank-cti-readout dt::after{ content:" "; }
.atrank-cti-readout dd{ display:inline; margin:0; color:var(--txt); }
.atrank-cti-readout dd:not(:last-child)::after{
  content:" · "; color:var(--line2); font-weight:400; padding:0 3px;
}.atrank-tool-root .atrank-btn {
	background: var(--accent);
	color: var(--on-accent);
	white-space: nowrap;
}
.atrank-tool-root .atrank-btn svg{ flex:0 0 auto; }
.atrank-tool-root .atrank-btn-secondary{ background:transparent; color:var(--muted); border-color:var(--line2); }
.atrank-tool-root .atrank-btn-secondary:hover:not(:disabled){ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-tool-root .atrank-btn-ghost{ background:transparent; color:var(--muted); border-color:var(--line); }
.atrank-tool-root .atrank-btn-ghost:hover:not(:disabled){ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-tool-root .atrank-btn-ghost.is-on,
.atrank-tool-root .atrank-btn-secondary.is-on{
  color:var(--on-accent); background:var(--accent); border-color:var(--accent);
}
.atrank-cti-small{ padding:5px 10px; font-size:12px; }

/* ── The presets popover ────────────────────────────────────────────────── */
/* Anchored to the header, which is already position:sticky and therefore
   already a containing block for this. */
.atrank-cti-pop{
  position:absolute; top:calc(100% - 4px); right:12px; z-index:6; width:min(320px, calc(100% - 24px));
  padding:11px 12px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.atrank-cti-poprow{ display:flex; gap:7px; margin-bottom:9px; }
.atrank-cti-poprow input{
  flex:1; min-width:0; padding:6px 9px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); color:var(--txt); font:inherit; font-size:12.5px;
}
.atrank-cti-poprow input:focus-visible{ outline:none; box-shadow:var(--ring); border-color:var(--accent); }
.atrank-cti-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.atrank-cti-chip{
  display:inline-flex; align-items:center; border:1px solid var(--line2);
  border-radius:var(--r); overflow:hidden; background:var(--panel);
}
.atrank-cti-chip button{
  appearance:none; border:none; background:transparent; font:inherit; font-size:12px;
  font-weight:600; color:var(--txt); padding:4px 4px 4px 11px; cursor:pointer;
}
.atrank-cti-chip button:hover{ color:var(--accent); }
.atrank-cti-chip button:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r); }
.atrank-cti-chipx{ padding:4px 9px 4px 6px !important; color:var(--dim) !important; font-size:14px !important; }
.atrank-cti-chipx:hover{ color:var(--err) !important; }.atrank-tool-root .atrank-notice {
	border-left-width: 3px;
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .atrank-cti main{ padding:9px; }
  .atrank-cti-export, .atrank-cti-controlrow .atrank-cti-seg{ margin-left:0; width:100%; justify-content:center; }
  .atrank-cti-pop{ right:6px; width:calc(100% - 12px); }
}

@media (prefers-reduced-motion:reduce){
  .atrank-cti *{ transition:none !important; animation:none !important; }
}