/*!
 * @Rank – iMessage Chat Generator
 * 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-imsg: 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 canvas may shrink to fit but is never scaled UP. It is 390
 *     points wide because that is an iPhone screen, and enlarging it would show
 *     a blurred picture while claiming to be what gets exported;
 *   · the phone preview keeps a fixed light shadow and rounded corners, because
 *     it is a picture of a phone and not part of the interface around it.
 */

/* ── 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-imsg {
}

/* 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-imsg, .atrank-imsg *{ 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-imsg [hidden]{ display:none !important; }.atrank-imsg {
	-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-imsg 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 ─────────────────────────────────────────────────────────────────
   The reference shape: the phone on the left, the controls on the right, and one
   button at the bottom spanning both. Stacked below 1000 px, with the phone
   first — on a narrow screen the picture is what you want to see while typing. */
.atrank-imsg main{ display:block; padding:10px 12px 12px; }
.atrank-tool-root .atrank-panel{ display:block; }
.atrank-imsg-track{ display:grid; gap:10px; }

@media (min-width:1000px){
  .atrank-imsg-track{ grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:start; }
  .atrank-imsg-track > .atrank-imsg-preview{
    grid-column:1; grid-row:1;
    position:sticky; top:calc(var(--atrank-header-top, 0px) + 62px);
  }
  .atrank-imsg-track > .atrank-imsg-controls{ grid-column:2; grid-row:1; }
  .atrank-imsg-track > .atrank-imsg-tail{ grid-column:1 / -1; grid-row:2; }
}
.atrank-imsg-controls{ display:grid; gap:10px; }
.atrank-tool-root .atrank-cardhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.atrank-tool-root .atrank-card h2{
  margin:0 0 8px; font-size:13px; font-weight:700; color:var(--txt); letter-spacing:-.01em;
  margin-right:auto;
}
.atrank-tool-root .atrank-cardhead .atrank-hint{ margin-right:auto; }
.atrank-tool-root .atrank-cardhead h2 + .atrank-hint{ margin-left:0; }.atrank-tool-root .atrank-hint {
	line-height: 1.45;
}

/* ── The phone ──────────────────────────────────────────────────────────────
   The canvas is a picture of a screen, so it keeps its own look in both
   appearances: a real bezel radius and one soft shadow, and never a filter or a
   tint from the interface around it. */
.atrank-imsg-preview{ display:grid; gap:8px; justify-items:center; }
.atrank-imsg-stage{
  display:grid; place-items:center; width:100%; min-height:min(180px, max(130px, 18vh));
  border-radius:var(--r); background:var(--panel2); padding:10px;
  border:1px solid var(--line);
}
.atrank-imsg-canvas{
  display:block;
  /* Shrinks to fit, never grows. */
  max-width:100%; max-height:min(74vh, 780px); width:auto; height:auto;
  border-radius:var(--r); background:#ffffff;
  box-shadow:0 6px 24px rgba(15,23,42,.18);
}
.atrank-imsg-empty{ margin:0; color:var(--dim); font-size:12.5px; text-align:center; max-width:26ch; }

/* ── The boxed control ─────────────────────────────────────────────────────—
   Same pattern as the other tools in the line: the border belongs to the box and
   the control inside is borderless, so a select and a text field read as the
   same kind of thing. */
.atrank-imsg-grid{
  display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(158px, 1fr));
}
.atrank-imsg-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-imsg-box:hover{ border-color:var(--accent); }
.atrank-imsg-box:focus-within{ border-color:var(--accent); box-shadow:var(--ring); }
.atrank-imsg-blabel{
  font-size:10.5px; font-weight:600; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-imsg-box select,
.atrank-imsg-box input[type="text"],
.atrank-imsg-box textarea{
  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; resize:none;
}
.atrank-imsg-box input[type="text"], .atrank-imsg-box textarea{ cursor:text; }
.atrank-imsg-box select:focus-visible,
.atrank-imsg-box input:focus-visible,
.atrank-imsg-box textarea:focus-visible{ outline:none; }
.atrank-imsg-box input::placeholder, .atrank-imsg-box textarea::placeholder{
  color:var(--dim); font-weight:400;
}
.atrank-imsg-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-imsg-colourbox, .atrank-imsg-wmbox{ flex:1 1 150px; }
.atrank-imsg-colourbox{ flex-direction:row; align-items:center; gap:8px; }
.atrank-imsg-colourbox .atrank-imsg-blabel{ order:1; }
.atrank-imsg-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-imsg-colourbox input[type="color"]:focus-visible{ outline:none; box-shadow:var(--ring); }

/* Choosing an avatar. */
.atrank-imsg-upload{ cursor:default; flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap; }
.atrank-imsg-upload .atrank-imsg-blabel{ flex:1 1 100%; }
.atrank-imsg-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-imsg-filelabel{
  font-size:13px; font-weight:600; color:var(--accent); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.atrank-imsg-filelabel::before{
  content:""; display:inline-block; width:13px; height:11px; margin-right:6px;
  border:1.5px solid currentColor; border-radius:2px 2px 3px 3px;
  border-top-width:3px; vertical-align:-1px;
}
.atrank-imsg-filelabel:hover{ text-decoration:underline; }
.atrank-imsg-file:focus-visible + .atrank-imsg-filelabel{ box-shadow:var(--ring); border-radius:4px; }
.atrank-imsg-mini{
  appearance:none; border:1px solid var(--line2); border-radius:7px; background:transparent;
  color:var(--muted); font:inherit; font-size:11px; font-weight:600; padding:1px 7px; cursor:pointer;
}
.atrank-imsg-mini:hover{ color:var(--err); border-color:var(--err); }
.atrank-imsg-mini:focus-visible{ outline:none; box-shadow:var(--ring); }

/* The checkbox keeps its own width. Left to shrink, its label collapsed into a
   one-word-per-line column beside the text field and overlapped the heading
   below — a flex item with a long label needs to be told not to shrink. */
.atrank-imsg-checks{ display:flex; gap:10px 18px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.atrank-imsg-checks > .atrank-imsg-check{ flex:0 0 auto; }
.atrank-imsg-checktext{ white-space:nowrap; }

/* ── A message row ─────────────────────────────────────────────────────────— */
.atrank-imsg-list{ display:grid; gap:8px; }
.atrank-imsg-mrow{
  display:grid; gap:7px; padding:8px 9px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel2);
}
/* One line per message past 760 px: who, what, when, remove. Stacked below that,
   because a 44-character-wide message field is not worth the compactness. */
@media (min-width:760px){
  .atrank-imsg-mrow{ grid-template-columns:112px minmax(0,1fr) 124px auto; align-items:stretch; }
}
.atrank-imsg-textbox{ position:relative; background:var(--panel); }
.atrank-imsg-count{
  position:absolute; top:4px; right:8px;
  font-size:10.5px; color:var(--dim); font-variant-numeric:tabular-nums;
}
.atrank-imsg-textbox textarea{ font-size:13px; line-height:1.45; min-height:19px; resize:vertical; }
.atrank-imsg-del{
  appearance:none; display:grid; place-items:center; width:36px;
  border:1px solid var(--line2); border-radius:var(--r); background:var(--panel);
  color:var(--dim); cursor:pointer;
}
.atrank-imsg-del:hover{ color:var(--err); border-color:var(--err); background:var(--err-soft); }
.atrank-imsg-del:focus-visible{ outline:none; box-shadow:var(--ring); }

.atrank-imsg-add{
  appearance:none; width:100%; margin-top:8px; padding:9px;
  border:1px dashed var(--line2); border-radius:var(--r); background:transparent;
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.atrank-imsg-add:hover:not(:disabled){ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-imsg-add:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-imsg-add:disabled{ opacity:.45; cursor:not-allowed; }

/* ── The tail: notes, the notice, and the one button ───────────────────────— */
.atrank-imsg-tail{ display:grid; gap:8px; justify-items:center; }
.atrank-imsg-tail > #atrank-imsg-notes{ width:100%; }
.atrank-tool-root .atrank-policy,
.atrank-imsg-legal{
  margin:0; max-width:74ch; text-align:center; font-size:11.5px; line-height:1.5; color:var(--dim);
}
.atrank-tool-root .atrank-policy:empty{ display:none; }
.atrank-imsg-export{ padding:11px 22px; font-size:14px; }

/* ── Checkboxes ─────────────────────────────────────────────────────────── */
.atrank-imsg-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-imsg-check input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* The box is the span RIGHT AFTER the input, not any span in the label. Written
   as `.atrank-imsg-check span` it also caught the span holding the label text and
   squashed it into a 17 px square, which printed the words on top of each other
   and over the next card. */
.atrank-imsg-check input + span{
  position:relative; flex:0 0 auto; width:17px; height:17px; border-radius:5px;
  border:1px solid var(--line2); background:var(--panel);
}
.atrank-imsg-check input + 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-imsg-check input:checked + span{ background:var(--accent); border-color:var(--accent); }
.atrank-imsg-check input:checked + span::after{ opacity:1; transform:rotate(42deg) scale(1); }
.atrank-imsg-check input:focus-visible + span{ outline:none; box-shadow:var(--ring); }.atrank-tool-root .atrank-btn {
	background: var(--accent);
	color: var(--on-accent);
	white-space: nowrap;
}
.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-imsg-small{ padding:5px 10px; font-size:12px; }.atrank-tool-root .atrank-notice {
	border-left-width: 3px;
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .atrank-imsg main{ padding:9px; }
  .atrank-imsg-mhead{ grid-template-columns:1fr auto; }
  .atrank-imsg-export{ width:100%; justify-content:center; }
}

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