/* linkedin-text-formatter.html + nl/linkedin-text-formatter.html
 *
 * Almost only the editor. .page-head, .section, .sec-head,
 * .feat-pair/.feat-tile, .cta-card and .btn are all composed from styles.css
 * and need nothing here. The FAQ accordion should have been on that list and
 * is not. See the note above its rules at the bottom of this file.
 *
 * The editor is the one thing the site had no component for. It is a text
 * input with a formatting toolbar attached. Nothing on a marketing site looks
 * like that, because nothing else on the site takes typing. The shell is still
 * a .card; this file carries only the deltas.
 *
 * Sizes and spacing are taken from values the site already sets for the same
 * jobs (15px for copy inside a card, 13px for a meter, 12px for a micro
 * label, --r-md for a small control) so the file introduces no primitive of
 * its own. check-design.py E3 holds a new stylesheet to zero.
 */

/* ── The one dark band ───────────────────────────────────────────────────── */

/* The editor is the point of the page, so it gets the dark band rather than a
   section explaining it. One line, because the .card composer supplies its own
   white surface and needs no recolouring to sit on ink. Same background as
   .coach-band. */
.ltf-band { background: var(--ink); }

/* The surface alternation the standard page calls for: cream, ink, paper. */
.ltf-cost { background: var(--paper); }

/* ── Hero jump row ───────────────────────────────────────────────────────── */

/* .page-head has no action row of its own: the comparison pages that put
   buttons under a .lede each carry the same four declarations inline. Same
   values as .cta-card .cta-actions, kept in a class because a page stylesheet
   is where this belongs. */
.ltf-jump {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */

/* Deltas on .card: the toolbar and footer are full-bleed rows, so the padding
   moves inside them, and the rows' own edges have to be clipped to the radius.
   Held to 760px and centred in the 1320px .wrap. A composer stretched to the
   full grid gives lines far longer than the feed it is written for, and a post
   is read at roughly this measure. */
.ltf-shell {
  padding: 0;
  overflow: hidden;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.ltf-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}

.ltf-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ltf-sep {
  width: 1px;
  height: 22px;
  background: var(--rule);
  margin: 0 6px;
}

.ltf-tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ltf-tb svg {
  width: 17px;
  height: 17px;
}

.ltf-tb:hover {
  background: var(--cream);
  color: var(--ink);
}

.ltf-tb:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Pressed, not merely hovered: the button reports formatting that is already
   on the selection, so it needs to read as a state rather than a target. */
.ltf-tb.is-on {
  background: var(--blue-soft);
  border-color: var(--blue-mid);
  color: var(--blue);
}

.ltf-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}

/* ── The editable area ───────────────────────────────────────────────────── */

.ltf-editor {
  padding: 20px;
  min-height: 260px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  overflow-wrap: break-word;
}

/* Shown on a genuinely empty editor, which covers first load and the Clear
   button (it sets innerHTML back to ''). Type a character and delete it again
   and some browsers leave a stray <br> behind, which defeats :empty and drops
   the placeholder until Clear. That is a cosmetic edge case, and the
   alternative is the script policing every keystroke to maintain a class. */
.ltf-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-4);
  pointer-events: none;
}

.ltf-editor ul,
.ltf-editor ol {
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.ltf-editor ul { list-style: disc; }
.ltf-editor ol { list-style: decimal; }

.ltf-editor li {
  margin-bottom: 4px;
}

/* ── Footer: counter on the left, actions on the right ───────────────────── */

.ltf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.ltf-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--ink-4);
  padding-left: 4px;
}

.ltf-meta strong {
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ltf-meta.is-near strong { color: var(--punch-orange); }
.ltf-meta.is-over strong { color: var(--punch-red); }

.ltf-fold {
  color: var(--ink-4);
}

.ltf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The copy button confirms in place. A toast would be a second component for
   one word, and the button is where the eye already is. */
.ltf-copy.is-copied {
  background: var(--sage);
  border-color: var(--sage);
}

/* ── FAQ accordion ───────────────────────────────────────────────────────── */

/* components.md lists .faq-q / .faq-a in the global vocabulary and says the
 * behaviour is wired by site.js. Neither is true: site.js has no FAQ code at
 * all, and styles.css owns only `.faq-q:focus-visible`. The rules below
 * already exist, byte-identical, in page-pricing.css and comparison.css.
 * (page-will.css looks like a third, but its .wfaq-* is a native <details>
 * accordion, deliberately renamed and structurally different.)
 *
 * So this is a third copy, which is the thing this folder exists to prevent.
 * Copied rather than promoted deliberately: hoisting a component that 60
 * pages render is a change with its own blast radius and its own review, not a
 * side effect of porting one tool. Logged in TODO.md §20c so it gets that
 * review. The rules are kept identical to the other two, and the `.faq`
 * padding line they each carry is omitted, because this page's FAQ sits in a
 * plain `.section` that already supplies the padding and the divider hairline,
 * so the eventual consolidation is a straight move.
 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 40px;
  max-width: 880px;
}

.faq-item {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.012em;
  gap: 32px;
}

.faq-q .indic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  /* Optically centre the "+": see --optical-plus. Without the padding it lands
     ~2px high in the circle. line-height:1 keeps the line box smaller than the
     padded content box, and letter-spacing:0 drops the inherited tracking,
     which on a lone glyph is only a trailing gap that pulls it off centre. */
  padding-top: calc(2 * var(--optical-plus));
  line-height: 1;
  letter-spacing: 0;
  transition: transform 0.2s;
}

.faq-item.open .indic { background: var(--blue); color: var(--white); transform: rotate(45deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.2s;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}

.faq-item.open .faq-a { max-height: 400px; margin-top: 16px; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ltf-hint { display: none; }

  .ltf-editor {
    padding: 16px;
    min-height: 220px;
  }

  .ltf-foot {
    align-items: stretch;
    flex-direction: column;
  }

  /* Three actions do not fit one row at 390px, and .btn is `white-space:
     nowrap`, so they cannot shrink to fit either. Without wrapping, the third
     one is simply clipped by the card. Wrapping drops it onto its own row and
     `flex: 1 1 auto` lets each row divide up evenly. */
  .ltf-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .ltf-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}