/* Prime Time 24: the engagement bar under a story (engage_bar.html).
 *
 * Reads the tokens pt24.css sets and sets none of its own: the ink, the
 * paper, the rule greys, the red, the three faces. The bar is drawn the
 * way the byline's share glyph already is, one small stroke icon in the
 * byline's grey that goes to ink on hover, so a row of five reads as part
 * of the page's furniture and not as a toolbar dropped onto it. A pressed
 * like goes to the house red; a pressed dislike stays ink: one accent, used
 * once.
 *
 * Nothing here is a glyph character (golden rule 1): every icon is the
 * inline SVG the template carries.
 */

.engage {
  margin: 8px 0 26px;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule, #E2DDD3);
  max-width: 88ch;
}

.engage-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
}

.engage-spacer { flex: 1 1 auto; }

.engage-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink-45, #6B665C);
  font: 500 12.5px var(--sans, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  cursor: pointer;
  transition: color .15s ease;
}
.engage-btn:hover, .engage-btn:focus-visible { color: var(--ink, #14120F); }
.engage-btn:focus-visible { outline: 2px solid var(--focus, #EC1F28); outline-offset: 2px; }
.engage-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.engage-btn[aria-pressed="true"] { color: var(--ink, #14120F); }
.engage-btn[data-react="like"][aria-pressed="true"] { color: var(--red-type, #EC1F28); }
.engage-btn[data-react="like"][aria-pressed="true"] .pt24-icon path,
.engage-btn[data-react="dislike"][aria-pressed="true"] .pt24-icon path,
.engage-btn[data-engage-save][aria-pressed="true"] .pt24-icon path { fill: currentColor; fill-opacity: .14; }
.engage-btn[aria-expanded="true"] { color: var(--ink, #14120F); }

/* The counts arrive after the page: engage.js writes them once the store
   has answered, and each one rises in. A change later (a like of your own,
   a fresh count) is a small pop. Both are a transform and an opacity and
   nothing else, and both are off for a reader who asked for less motion. */
.engage-count { display: inline-block; min-width: 0; line-height: 1; }
.engage-count:empty { display: none; }
.engage-count.is-in { animation: pt24engage-in .36s ease-out both; }
.engage-count.is-bump { animation: pt24engage-bump .32s ease-out both; }
@keyframes pt24engage-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@keyframes pt24engage-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .engage-count.is-in, .engage-count.is-bump { animation: none; }
  .engage-btn { transition: none; }
}

/* The fallback share row, for a device without the native sheet: five
   small marks with their names, in one line that wraps. */
.engage-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 0 8px;
  border-top: 1px solid var(--rule, #E2DDD3);
}
.engage-net {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 2px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink-60, #57534A);
  font: 500 12.5px var(--ui, system-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.engage-net .pt24-brand, .engage-net .pt24-icon { width: 15px; height: 15px; }
.engage-net:hover, .engage-net:focus-visible { color: var(--ink, #14120F); text-decoration: underline; text-underline-offset: 3px; }
.engage-net:focus-visible { outline: 2px solid var(--focus, #EC1F28); outline-offset: 2px; }

.engage-note {
  margin: 4px 0 6px;
  font: 400 13px/1.5 var(--sans, system-ui, sans-serif);
  color: var(--ink-60, #57534A);
}
.engage-note.is-error { color: var(--red-type, #EC1F28); }

/* The nudge, shown once the end of the story has been reached and only if
   the reader has not shared already. One sentence and one underlined word,
   nothing that looks like an advert for the page the reader is already on. */
.engage-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 2px 0 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold, #C7862B);
  background: rgba(var(--ink-rgb, 20, 18, 15), .03);
  font: 400 13.5px/1.5 var(--sans, system-ui, sans-serif);
  color: var(--ink-70, #3A362E);
}
.engage-nudge.is-in { animation: pt24engage-in .4s ease-out both; }
.engage-nudge-btn {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink, #14120F);
  font: 600 13.5px var(--ui, system-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.engage-nudge-btn:focus-visible { outline: 2px solid var(--focus, #EC1F28); outline-offset: 2px; }

/* Comments. The same measure and leading as the body above them, so a
   reader's paragraph is set like the story's own, one size down. */
.engage-comments { padding: 8px 0 0; border-top: 1px solid var(--rule, #E2DDD3); }
.engage-h {
  margin: 8px 0 12px;
  font: 700 12px var(--sans, system-ui, sans-serif);
  letter-spacing: calc(.06em * var(--track, 1));
  text-transform: uppercase;
  color: var(--ink, #14120F);
}
.engage-form { display: grid; gap: 10px; margin: 0 0 18px; }
.engage-field { display: grid; gap: 4px; }
.engage-label { font: 500 12.5px var(--sans, system-ui, sans-serif); color: var(--ink-60, #57534A); }
.engage-muted { color: var(--ink-45, #6B665C); font-weight: 400; }
.engage-rule { font: 400 12px/1.4 var(--sans, system-ui, sans-serif); }
.engage-form input, .engage-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  background: var(--paper, #FBF9F5);
  color: var(--ink, #14120F);
  border: 1px solid var(--rule-strong, #D8D2C6);
  border-radius: 0;
  font: 400 15px/1.5 var(--sans, system-ui, sans-serif);
}
.engage-form textarea { resize: vertical; min-height: 72px; }
.engage-form input:focus, .engage-form textarea:focus { outline: 2px solid var(--focus, #EC1F28); outline-offset: 1px; border-color: var(--ink, #14120F); }
.engage-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.engage-post { min-height: 36px; padding: 7px 16px; }
.engage-post[disabled] { opacity: .5; cursor: default; }

.engage-list { list-style: none; margin: 0; padding: 0; }
.engage-comment { padding: 10px 0; border-top: 1px solid var(--rule, #E2DDD3); }
.engage-comment.is-in { animation: pt24engage-in .36s ease-out both; }
.engage-comment:first-child { border-top: 0; }
.engage-who {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  margin: 0 0 3px;
  font: 500 12.5px var(--sans, system-ui, sans-serif);
  color: var(--ink-60, #57534A);
}
.engage-who .engage-name { color: var(--ink, #14120F); font-weight: 600; }
.engage-who time { font-variant-numeric: tabular-nums; }
.engage-comment p { margin: 0; font: 400 14.5px/1.6 var(--sans, system-ui, sans-serif); color: var(--ink, #14120F); white-space: pre-line; overflow-wrap: anywhere; }
.engage-empty { margin: 4px 0 0; font: 400 13.5px/1.5 var(--sans, system-ui, sans-serif); }

/* Devanagari and Kannada want no tracking and a little more leading; the
   page already sets --track to 0 for those languages, and the caps label
   above has nothing to uppercase in either script. */
.engage-comment p[lang="hi"], .engage-comment p[lang="mr"] { line-height: 1.7; }
.engage-comment p[lang="kn"] { line-height: 1.75; }

@media (max-width: 820px) {
  .engage { max-width: none; margin: 6px 0 22px; }
  .engage-btn { padding: 0 6px; }
  .engage-share-row { gap: 2px 12px; }
}