/*!

/* Only three selectors reach past the tool's own elements, and all are scoped to
   the root so they cannot leak into the client's page. */
.atrank-lipsum, .atrank-lipsum *{ 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-lipsum [hidden]{ display:none !important; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.atrank-lipsum 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;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.atrank-lipsum main{ display:block; padding:10px 12px 12px; }
.atrank-tool-root .atrank-panel{ display:block; }

/* ── The three sliders ─────────────────────────────────────────────────────
   One row of three at full width, as the reference has them, on a faintly
   tinted strip so they read as one group of controls rather than three fields.
   Two columns in the middle band and one when it gets narrow: a range input
   under about 150 px is not usable with a finger. */
.atrank-lipsum-controls{
  display:grid; gap:14px 28px; grid-template-columns:1fr;
  padding:14px 18px 16px; margin-bottom:14px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg);
}
@media (min-width:620px){ .atrank-lipsum-controls{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .atrank-lipsum-controls{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.atrank-lipsum-control{ display:grid; gap:8px; min-width:0; }
.atrank-lipsum-label{
  font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-lipsum-value{ color:var(--accent); font-weight:700; }

/* ── The word count field ──────────────────────────────────────────────────
   The one typed control in the tool, and the master of the other two: a word
   count is the thing people arrive wanting, and reaching 250 by multiplying
   three sliders is not a thing anybody should have to do.

   It is a TEXT input rather than a number input. The spinner arrows on a number
   input are useless for a figure that moves in hundreds and they eat the width
   the number needs; a text input also lets the tool take "1,000", "1.000" and
   "250 words", all of which mean one thing when the value is a whole number of
   words.

   Sized so that five digits — 12,500 is the largest it writes — fit without the
   field growing, and given the same 3:1 control border as everything else that
   is operated. */
.atrank-lipsum-numberwrap{ display:flex; align-items:center; gap:9px; min-width:0; }
.atrank-lipsum-number{
  width:7.5ch; flex:0 0 auto; padding:7px 10px;
  border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); color:var(--txt);
  font:inherit; font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums; text-align:center;
  transition:border-color .16s var(--ease);
}
.atrank-lipsum-number:hover{ border-color:var(--accent); }
.atrank-lipsum-number:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.atrank-lipsum-number::placeholder{ color:var(--dim); font-weight:400; }.atrank-tool-root .atrank-hint {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* The field sits where a slider's thumb row would, so the three controls line
   up along the same baseline rather than the typed one riding high. */
.atrank-lipsum-control:has(.atrank-lipsum-numberwrap) .atrank-lipsum-numberwrap{
  min-height:20px;
}/* The track is drawn from ONE custom property the script sets as a percentage:
   accent to the left of the thumb, --track to the right. Written out for both
   engines because a range input has no common styling surface — WebKit and
   Blink take ::-webkit-slider-runnable-track, Firefox takes ::-moz-range-track
   plus ::-moz-range-progress for the filled half. */
.atrank-lipsum-range {
	--atrank-fill: 0%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-width: 0;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}
.atrank-lipsum-range:focus{ outline:none; }
.atrank-lipsum-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(to right,
    var(--accent) 0 var(--atrank-fill), var(--track) var(--atrank-fill) 100%);
}
.atrank-lipsum-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-6px; border-radius:50%;
  background:var(--thumb); border:1px solid var(--line2);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.atrank-lipsum-range:focus-visible::-webkit-slider-thumb{ box-shadow:var(--ring); }
.atrank-lipsum-range::-moz-range-track{
  height:6px; border-radius:999px; background:var(--track);
}
.atrank-lipsum-range::-moz-range-progress{
  height:6px; border-radius:999px; background:var(--accent);
}
.atrank-lipsum-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--thumb); border:1px solid var(--line2);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.atrank-lipsum-range:focus-visible::-moz-range-thumb{ box-shadow:var(--ring); }

/* ── The text ──────────────────────────────────────────────────────────────
   One bordered box with the label sitting on its top edge, and a borderless
   textarea inside it. Two borders — one on the box and one on the field — is
   what the reference deliberately does not have. */
.atrank-lipsum-box{
  position:relative; padding:16px 6px 10px 16px;
  background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-lg);
}
.atrank-lipsum-box:focus-within{ border-color:var(--accent); box-shadow:var(--ring); }
.atrank-lipsum-legend{
  position:absolute; top:8px; left:16px;
  font-size:11.5px; font-weight:500; color:var(--dim); cursor:pointer;
  background:var(--panel); padding-right:6px;
}
.atrank-lipsum-text{
  display:block; width:100%; min-width:0;
  min-height:var(--area-min); max-height:60vh; resize:vertical;
  margin-top:12px; padding:0 10px 0 0;
  border:none; background:transparent; color:var(--txt);
  font:inherit; font-size:var(--area-size); line-height:var(--area-line);
  overflow:auto;
}
.atrank-lipsum-text:focus{ outline:none; }

/* ── The two buttons ───────────────────────────────────────────────────────
   Centred as a pair, as the reference has them. */
.atrank-lipsum-actions{
  display:flex; justify-content:center; align-items:center; gap:12px;
  flex-wrap:wrap; margin-top:16px;
}.atrank-tool-root .atrank-btn {
	white-space: nowrap;
}
.atrank-tool-root .atrank-btn-ghost{ border-color:var(--line2); background:var(--panel); color:var(--muted); }
.atrank-tool-root .atrank-btn-ghost:hover:enabled{ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-tool-root .atrank-btn-primary:hover:enabled{ background:var(--accent-h); }

/* ── Notes ───────────────────────────────────────────────────────────────── */
.atrank-lipsum-tail{ margin-top:14px; display:grid; gap:8px; }.atrank-tool-root .atrank-notice {
	border-left-width: 3px;
}
#atrank-lipsum-notes > * + *{ margin-top:7px; }

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .atrank-lipsum main{ padding:9px; }
  .atrank-lipsum-controls{ padding:12px 14px 14px; }
  .atrank-lipsum-box{ padding:16px 6px 10px 12px; }
  .atrank-lipsum-actions > *{ flex:1 1 auto; justify-content:center; }
}

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