/* The LinkedIn post formatter (template-parts/tool-linkedin-post-formatter.php, root .tl; its script
   assets/js/tool-linkedin-post-formatter.js), loaded only on /tools/linkedin-post-formatter/ after the kit and tool.css.
   Two cards in the product's crisp style (BRANDBOOK section 20: a 1px hairline, radius 12, the card's own ground, no
   shadow, no tint): the editor and the preview, side by side from 1000 px, stacked under it. The preview's post card
   is ours: initials, our type, our colours, never LinkedIn's blue, typeface or interface. Colour means something: the
   pressed button and the AI's primary, the warn ink for what needs the person (the count over the limit, a letter
   with no styled form). Nothing moves on its own. Beside each other the two cards are as tall as each other: the
   text area and the preview's body take the room. The post card keeps its device's width (552 or 360 px) at every
   screen width and the script scales it to fit (.tl-fit takes the scaled height), so its wraps never change; the
   card's own sizes therefore have no phone rules. */

:root{
  --tl-card:var(--k-card,var(--panel));
  --tl-warn:#B9410E;
  --tl-fold:color-mix(in srgb,var(--mute) 75%,transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--tl-warn:#FF9466}
}
:root[data-theme="dark"]{--tl-warn:#FF9466}

.tl{text-align:left}
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.tl-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--tl-card);color:var(--ink)}

/* ---- the editor: the toolbar, the text, the count and the two actions, the quiet lines ------------------------- */
.tl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:8px 10px;border-bottom:1px solid var(--line)}
.tl-btn{display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--k-text,var(--ink));cursor:pointer}
.tl-btn:hover{background:var(--sunk);color:var(--ink2)}
.tl-btn[aria-pressed="true"]{background:var(--k-ai-soft);color:var(--k-ai-ink)}
.tl-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.tl-btn svg{display:block;width:18px;height:18px}
/* the style buttons' letters are drawn in our own type with the real style, so each says what it does */
.tl-g{font:600 16px/1 var(--sans);letter-spacing:0}
.tl-g-b{font-weight:800}
.tl-g-i{font-weight:500;font-style:italic}
.tl-g-bi{font-weight:800;font-style:italic}
.tl-g-bi i{font-style:italic}
.tl-g-u{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.tl-g-s{text-decoration:line-through;text-decoration-thickness:1.5px}
.tl-sep{flex:none;width:1px;height:20px;margin:0 6px;background:var(--line)}

.tl-text{display:block;flex:1 1 auto;box-sizing:border-box;width:100%;min-height:340px;margin:0;padding:16px 18px;border:0;border-radius:0;background:transparent;font:400 15.5px/1.6 var(--sans);color:var(--ink);resize:vertical;outline:0}
.tl-text::placeholder{color:var(--mute);opacity:1}
.tl-text:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--blue) 50%,transparent)}

.tl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 12px 10px 18px;border-top:1px solid var(--line)}
/* the count takes the free width and its note wraps inside it, so Clear and Copy keep their place on the right */
.tl-count{display:flex;flex:1 1 220px;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0;margin:0}
.tl-count-n{font:500 13px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--k-text,var(--ink));white-space:nowrap}
.tl-count-note{font:400 12.5px/1.35 var(--sans);color:var(--mute)}
.tl-is-over .tl-count-n{font-weight:600;color:var(--tl-warn)}
.tl-acts{display:flex;align-items:center;gap:6px}
.tl-clear{height:40px;margin:0;padding:0 12px;border:0;border-radius:10px;background:transparent;font:500 14.5px/1 var(--sans);color:var(--mute);cursor:pointer}
.tl-clear:hover{background:var(--sunk);color:var(--ink2)}
.tl-clear:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tl-copy svg{display:block;flex:none;width:16px;height:16px}
.tl-note{margin:0;padding:10px 18px 11px;border-top:1px solid var(--line);font:400 13px/1.5 var(--sans);color:var(--mute);text-wrap:pretty}
.tl-note-warn{color:var(--tl-warn)}

/* ---- the preview: its head with the size toggle, then our own post card at the chosen width -------------------- */
.tl-pv-h{display:flex;align-items:center;gap:10px;min-height:53px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--line)}
.tl-pv-t{margin:0;font:700 13px/1.3 var(--sans);letter-spacing:0;color:var(--ink2)}
.tl-seg{display:inline-flex;margin-left:auto;padding:2px;border-radius:10px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.tl-seg button{height:32px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;font:500 13.5px/1 var(--sans);color:var(--mute);cursor:pointer}
.tl-seg button[aria-pressed="true"]{background:var(--tl-card);box-shadow:0 0 0 1px var(--line);color:var(--ink2)}
.tl-seg button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
/* forced colors (Windows Contrast themes) drop the background, the shadow and the colour that mark the pressed device
   and the pressed style, so both take the system's selected pair there; the focus outlines are kept by forced colors */
@media (forced-colors:active){
  .tl-seg button[aria-pressed="true"],.tl-btn[aria-pressed="true"]{forced-color-adjust:none;background:SelectedItem;color:SelectedItemText}
}
.tl-pv-body{flex:1 1 auto;padding:20px}
/* the fit box: the card's column, whose height the script sets to the scaled card's */
.tl-fit{min-width:0}
.tl-post{box-sizing:border-box;width:552px;max-width:none;margin:0 auto;border:1px solid var(--line);border-radius:12px;background:var(--tl-card);transform-origin:0 0}
.tl-post[data-dev="phone"]{width:360px}
.tl-post-h{display:flex;align-items:center;gap:10px;padding:14px 16px 4px}
.tl-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 var(--sans);color:var(--mute)}
.tl-who{min-width:0}
.tl-who b{display:block;font:600 14px/1.3 var(--sans);color:var(--ink2)}
.tl-who small{display:block;margin-top:1px;font:400 12.5px/1.35 var(--sans);color:var(--mute)}
/* the post's text: a fixed line height, so the script counts the lines the card wraps it to */
.tl-post-t{min-height:160px;padding:8px 16px 18px;font:400 14px/20px var(--sans);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.tl-ln{min-height:20px}
.tl-dim{color:var(--mute)}
/* the cut, by the estimate: a dashed line with its label. Its sizes are in em on a font counter-scaled by the card's
   scale (--tl-k, set by the script), so the strip reads at 11 px however small the card is drawn */
.tl-fold{display:flex;align-items:center;gap:.9em;margin:.73em 0;font:500 calc(11px / var(--tl-k,1))/1.3 var(--mono);letter-spacing:.02em;color:var(--mute);white-space:normal}
.tl-fold::before,.tl-fold::after{content:"";flex:1 0 2.9em;border-top:1px dashed var(--tl-fold)}
.tl-fold span{flex:0 1 auto;text-align:center}
/* a letter with no styled form inside a styled word */
.tl-nf{text-decoration:underline dotted var(--tl-warn);text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ==== widths ========================================================================================================= */
@media (max-width:1000px){
  .tl-grid{grid-template-columns:minmax(0,1fr)}
  .tl-text{min-height:260px}
}
@media (max-width:760px){
  .tl-bar{padding:6px}
  .tl-btn{width:34px;height:34px}
  .tl-sep{margin:0 3px}
  /* 16 px, so a phone does not zoom the page when the text area takes the focus */
  .tl-text{padding:14px;font-size:16px}
  .tl-foot{padding:10px 10px 10px 14px}
  .tl-note{padding:10px 14px 11px}
  .tl-pv-h{padding-left:14px}
  .tl-pv-body{padding:12px}
}