/* The text formatters (/linkedin-text-formatter, /x-text-formatter): the previewers' page (tool.css) with a toolbar over
   the text, Copy text under it and one plain line about styled letters. The toolbar's tracks are the switches' (.seg):
   a well with the pressed buttons raised to the sheet. Each style's button is written in that style, the letters it
   puts in the post, in whatever face the system draws them with, as LinkedIn and X will. */
.styles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 16px; }
.track { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--well); }
.track button {
  position: relative; height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font-size: 15px; color: var(--ink-2); white-space: nowrap; transition: background .15s ease-out, color .15s ease-out;
}
.track button::after { content: ""; position: absolute; inset: -3px 0; } /* a 44 px tap target, the track's padding included */
@media (hover: hover) { .track button:hover { color: var(--ink); } }
.track button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 .5px var(--hair), 0 1px 2px rgba(36, 17, 12, .08); }
.styles .link[hidden] { display: none; }

/* The toolbar takes the room the previewers give the text, so Copy text stays on the first screen. */
.formatter textarea { min-height: 168px; }

/* The one thing the page is for: the post, styled, onto the clipboard. Ink on the sheet; the pennant stays the CTA's. */
.formatter .bar { gap: 16px; min-height: 0; padding: 12px 0; }
.copy {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 0; border-radius: 12px;
  background: var(--ink); color: var(--sheet); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: opacity .15s ease-out;
}
.copy:hover { opacity: .88; }
.note { margin: 16px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

@media (max-width: 759px) {
  .track button { padding: 0 10px; }
  .copy { height: 48px; }
}