/* The character counters (/x-character-counter, /linkedin-character-counter): the tools' page (tool.css) with one sheet
   that holds the writing and the count. The count is the sheet's one big thing, set in the display weight; what doesn't
   fit is marked in the text, on a layer under the textarea in exactly its type (red past the limit, the well's tint for
   what LinkedIn hides behind "…more"). On a phone the count rides at the top of the sheet while the text scrolls. */
.counter .tool { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 56px; padding: 32px 44px 32px 32px; }
/* The marks' tints and the focused well, from the sheet's own inks: red past the limit, a shade of ink for "…more". */
.counter { --deep: color-mix(in srgb, var(--well) 92%, var(--ink)); --over: color-mix(in srgb, var(--bad) 22%, transparent); --hid: color-mix(in srgb, var(--ink) 11%, transparent); }

/* The text, in a well: the identity's tile for what you type into on the sheet. Focused, the well deepens a step; the
   caret does the rest, with no box drawn around the writing. */
.write { position: relative; border-radius: 12px; background: var(--well); transition: background .15s ease-out; }
.write:focus-within { background: var(--deep); }
.write textarea, .marks {
  display: block; width: 100%; min-height: 360px; margin: 0; padding: 22px 24px 28px; border: 0;
  font: 400 18px/1.55 var(--font); letter-spacing: -0.01em; font-kerning: normal; text-rendering: optimizeLegibility; tab-size: 4;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
}
.write textarea { position: relative; z-index: 1; background: transparent; }
.tool .write textarea:focus-visible { outline: none; }
.marks { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; user-select: none; }
.marks { padding-left: calc(24px + var(--inset, 0px)); padding-right: calc(24px + var(--inset, 0px)); }
/* counter.js measures the textarea's own inset here, then removes it. */
.write.inset { position: absolute; left: -10000px; top: 0; visibility: hidden; }
.write.inset textarea, .write.inset .marks { position: static; min-height: 0; padding: 0; overflow: hidden; }
.write.inset textarea { height: 0; }
mark { color: inherit; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.over { background: var(--over); }
mark.hide { background: var(--hid); }

/* The count: what's left (or how far over), the meter under it, then what counts double and where it cuts. */
.tally { position: sticky; top: 32px; align-self: start; padding-top: 20px; }
.left { margin: 0; }
/* Its digits' ink on the label's edge, measured: a 2 or a 1 within 2 px of it, a round 0 or 3 overshooting a little. */
.left b { display: block; margin-left: -0.04em; font-weight: 700; font-size: 104px; line-height: .86; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.left span { display: block; margin-top: 12px; font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); }
.over .left b { color: var(--bad); }
.meter { height: 2px; margin: 24px 0 0; border-radius: 2px; background: var(--hair); overflow: hidden; }
.meter i { display: block; width: 0; height: 100%; background: var(--ink); transition: width .15s ease-out; }
.over .meter i { background: var(--bad); }
.more { margin-top: 20px; }
.more p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.more p + p { margin-top: 8px; }
.more p:empty { display: none; }
.more mark.hide { padding: 0 3px; color: var(--ink); }
.feed { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hair); }
.feed .seg { margin-bottom: 12px; }
.next { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
/* The way to the previewer is a word with an underline; the pennant is the one act. */
.to { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.to:hover { text-decoration-thickness: 2px; }

/* The headline's figures on the eyebrow's edge, as the tools' stems are (tool.css h1 .stem): measured at 76, 56 and 40 px. */
h1 .two { margin-left: -0.025em; }
h1 .three { margin-left: -0.015em; }

/* Measuring room for LinkedIn's "…more": laid out at the feed's width, never seen. */
.probe { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; contain: layout style; }

@media (max-width: 1119px) {
  .counter .tool { grid-template-columns: minmax(0, 1fr) 300px; gap: 0 40px; }
  .left b { font-size: 88px; }
}
@media (max-width: 899px) {
  .counter .tool { grid-template-columns: 1fr; gap: 0; padding: 32px; }
  .tally { display: contents; }
  .sum { order: -1; position: sticky; top: 0; z-index: 2; margin: -8px 0 0; padding: 8px 0 20px; background: var(--sheet); }
  .left { display: flex; align-items: baseline; gap: 12px; }
  .left b { font-size: 64px; line-height: .9; margin-left: -0.035em; }
  .left span { margin: 0; font-size: 16px; }
  .meter { margin-top: 14px; }
  .write textarea, .marks { min-height: 240px; }
  .sum { padding-bottom: 24px; }
  .more { margin-top: 20px; }
}
@media (max-width: 759px) {
  .counter .tool { padding: 20px 20px 32px; }
  .write textarea, .marks { font-size: 17px; min-height: 200px; padding: 18px 18px 24px; }
  .marks { padding-left: calc(18px + var(--inset, 0px)); padding-right: calc(18px + var(--inset, 0px)); }
  .next { gap: 16px; margin-top: 28px; }
  .next .cta { align-self: stretch; }
}
@media (max-width: 359px) {
  .counter .tool { padding-left: 16px; padding-right: 16px; }
  .left b { font-size: 56px; }
}