/* English /use-case/auto-respond-comments, Ink and Lime (Vytas, 2026-11-03). Template: frontend/use-case/auto_respond_ink.pug.
   Loads after ink/home.css and only adds this page's mocks. Every section uses the homepage components; new classes start with uc-. */

/* The packing guide picture: the top of the flat lay, so the shirt and the hat show whole. */
html body.ik:not(#_) img.uc-guide { object-position: center 18%; }

/* ---------- Story card 1: the creator's Reel with its caption ---------- */
.uc-reel { width: 168px; transform: rotate(-2deg); }
.uc-reel .ik-post__top { padding: 8px 10px; font-size: 12px; }
html body.ik:not(#_) .uc-reel .ik-post__top img { width: 22px; height: 22px; }
.uc-reel .ik-post__pic { aspect-ratio: 1 / 1; }
html body.ik:not(#_) p.uc-reel__cap { padding: 8px 10px 10px; font-size: 12px; line-height: 1.35; color: #111; text-align: left; }
.uc-reel__cap .ik-kw { font-size: 11px; }

/* ---------- Story card 2 and the public reply tile: a comment list ---------- */
.uc-cmts { width: min(250px, 100%); padding: 10px 12px; border-radius: 18px; background: #fff; color: #111; transform: rotate(-1.5deg); }
html body.ik:not(#_) p.uc-cmts__h { padding: 0 2px 6px; font-size: 12px; font-weight: 600; color: #63636b; text-align: left; }
.uc-cmts__row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid #efeff0; font-size: 12px; line-height: 1.3; }
html body.ik:not(#_) .uc-cmts__row img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.uc-cmts__row b { font-weight: 600; }
.uc-cmts__row .ik-kw { font-size: 11px; }
.uc-cmts__row.is-hit { border-radius: 10px; background: #f4f4f5; }
.uc-cmts__row.is-hit + .uc-cmts__row { border-top-color: transparent; }

/* ---------- Story card 3: the DM the follower gets ---------- */
.uc-dm { width: min(262px, 100%); transform: rotate(1.5deg); }
.uc-dm .ik-dm__head { gap: 8px; }
html body.ik:not(#_) .uc-dm .ik-dm__head img { width: 26px; height: 26px; }
.uc-dm .ik-dm__head span { font-size: 12px; }
.uc-dm .ik-dm__msgs { gap: 6px; padding-top: 8px; font-size: 12px; }
html body.ik:not(#_) .uc-dm p.ik-dm__in { max-width: 100%; padding: 7px 10px; border-radius: 14px 14px 14px 5px; }
.uc-dm .ik-dm__card { padding: 6px; }
html body.ik:not(#_) .uc-dm .ik-dm__card img { width: 34px; height: 34px; }
.uc-dm .ik-dm__card em { padding: 5px 8px; font-size: 11px; }

/* ---------- Story card 4: the page the link opens ---------- */
.uc-web { display: flex; flex-direction: column; width: min(200px, 100%); padding: 8px; border-radius: 16px; background: #fff; color: #111; transform: rotate(-1.5deg); }
html body.ik:not(#_) p.uc-web__url { margin-bottom: 6px; padding: 4px 8px; border-radius: 999px; background: #f1f1f2; font-size: 10px; color: #63636b; text-align: center; }
.uc-web__pic { height: 80px; overflow: hidden; border-radius: 10px; }
html body.ik:not(#_) .uc-web__pic img { width: 100%; height: 100%; object-fit: cover; }
.uc-web__t { margin: 8px 2px 6px; font-size: 13px; font-weight: 600; }
.uc-web__btn { padding: 7px; border-radius: 8px; background: var(--cf-lime); font-size: 12px; font-weight: 600; text-align: center; }

/* Cards in the story are an ordered list; the homepage card rules expect li. */
html body.ik:not(#_) ol.uc-story { counter-reset: none; }
html body.ik:not(#_) .uc-story .ik-trg__card .ik-art { padding-bottom: 14px; justify-content: center; }

/* ---------- Setup step 2 and the keyword tile: the automation builder ---------- */
.uc-kwui .ik-ui__label + .uc-kwui__post, .uc-kwui .ik-ui__label + .uc-kwui__field { margin-bottom: 10px; }
.uc-kwui__post { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--cf-field); border-radius: 10px; }
html body.ik:not(#_) .uc-kwui__post img { flex: none; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.uc-kwui__post span { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
html body.ik:not(#_) .uc-kwui__post i { padding: 2px 7px; border-radius: 999px; background: #f1f1f2; font-size: 11px; }
.uc-kwui__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--cf-field); border-radius: 10px; }
.uc-kwui__n { margin-left: auto; font-size: 11px; color: #8a8a92; }
html body.ik:not(#_) .uc-kwui p.ik-ui__label:last-of-type { margin-top: 0; }
/* All three setup pictures one height, so the step numbers and headings line up. */
html body.ik.ikuc:not(#_) #setup .ik-step .ik-art { height: 214px; min-height: 0; padding: 16px; }

/* ---------- Setup step 3: the DM editor ---------- */
html body.ik:not(#_) p.uc-edit__msg { padding: 8px 10px; border: 1px solid var(--cf-field); border-radius: 10px; font-size: 12px; line-height: 1.4; text-align: left; }
.uc-edit__link { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--cf-field); border-radius: 10px; font-size: 12px; }
.uc-edit__link span { font-weight: 600; }
html body.ik:not(#_) .uc-edit__link i { margin-left: auto; font-size: 11px; }
.uc-edit__on { margin-top: 10px; font-size: 12px; }

/* ---------- Feature tiles ---------- */
.uc-pr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 16px; width: min(560px, 100%); }
.uc-pr__thread { padding: 10px 12px; border-radius: 18px; background: #fff; color: #111; transform: rotate(-1.5deg); }
.uc-pr__reply { margin-left: 22px; border-top-color: transparent; }
html body.ik:not(#_) .uc-pr__reply img { width: 22px; height: 22px; }
html body.ik:not(#_) p.uc-pr__var { margin: 2px 0 0 26px; font-size: 11px; color: #8a8a92; text-align: left; }
.uc-pr__dm { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transform: rotate(1.5deg); }
html body.ik:not(#_) .uc-pr__dm p.ik-dm__me { max-width: 100%; font-size: 13px; }
html body.ik:not(#_) .uc-reel .ik-post__pic img { object-position: center 30%; }
/* A shorter picture, so the caption that asks for the word stays inside the 220px frame. */
html body.ik:not(#_) .uc-reel .ik-post__pic { aspect-ratio: auto; height: 100px; }
.uc-reel { width: 186px; }
.uc-pr__dm .ik-note--in { margin-top: 0; }
.uc-kws__any { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 500; }
.uc-radio { flex: none; width: 16px; height: 16px; border: 1.5px solid #a1a1aa; border-radius: 50%; }
.uc-opts { display: flex; flex-direction: column; gap: 6px; }
.uc-opts__row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--cf-line); border-radius: 10px; font-size: 13px; font-weight: 500; }
.uc-opts__row.is-on { border-color: #111; }
.uc-opts__row.is-on .uc-radio { border: 5px solid #111; }
.ik-tile .ik-art:has(.uc-pr) { padding: 16px 24px; }

/* Limits: the homepage feature list, dark text on the light sheet. */
html body.ik:not(#_) .ik-flist.uc-know { margin-top: 4px; }
html body.ik:not(#_) .ik-sheet .uc-know li { border-top-color: var(--cf-field); }
html body.ik:not(#_) .ik-sheet .uc-know .ik-flist__ico { background: #fff; color: var(--cf-ink); }
html body.ik:not(#_) .ik-sheet .uc-know h3 { color: var(--cf-text); }
html body.ik:not(#_) .ik-sheet .uc-know p { color: var(--cf-text-2); }

/* "Also read" under the FAQ: one quiet line. */
html body.ik:not(#_) p.uc-also { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--cf-text-2); text-align: left; }
html body.ik:not(#_):not(#_) [role="main"] p.uc-also a { color: var(--cf-text); }

@media (prefers-reduced-motion: no-preference) {
  /* The matching comment lights up and the DM rises, once, when the story scrolls in. */
  html.ik-js .uc-story .ik-trg__card:not(.is-in) .uc-cmts__row.is-hit { background: transparent; }
  html.ik-js .uc-story .ik-trg__card.is-in .uc-cmts__row.is-hit { transition: background-color .5s var(--ease-out) .6s; }
  html.ik-js .uc-story .ik-trg__card:not(.is-in) .uc-dm { opacity: 0; transform: translateY(14px) rotate(1.5deg); }
  html.ik-js .uc-story .ik-trg__card.is-in .uc-dm { transition: opacity .5s var(--ease-out) calc(var(--rd, 0s) + .35s), transform .6s var(--ease-out) calc(var(--rd, 0s) + .35s); }
  html.ik-js [data-play]:not(.is-in) .uc-kwui .ik-ui__tag { opacity: 0; }
}

@media (max-width: 1099px) {
  html body.ik:not(#_) .ik-flist.uc-know { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .uc-pr { grid-template-columns: 1fr; gap: 10px; }
  .uc-pr__dm { display: none; }
}

/* "auto-reply" never breaks at its hyphen in a heading. */
.uc-nb { white-space: nowrap; }

/* Phones: the limits list is one column with the icon on the left. */
@media (max-width: 767px) {
  html body.ik.ikuc:not(#_) .ik-aud .ik-dm__card em { display: none; }
  html body.ik.ikuc:not(#_) .ik-flist.uc-know { grid-template-columns: 1fr; }
  html body.ik.ikuc:not(#_) .ik-flist.uc-know li { grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 0; padding: 9px 0; }
  html body.ik.ikuc:not(#_) .uc-know .ik-flist__ico { width: 32px; height: 32px; }
  html body.ik.ikuc:not(#_) .uc-know p { margin-top: 2px; font-size: 14px; line-height: 1.4; }
  html body.ik.ikuc:not(#_) .uc-know .ik-flist__ico { grid-row: span 2; }
}

/* ---------- /use-case/auto-reply-dms mocks ---------- */
/* The follower's own DM: the keyword alone in a blue bubble, then a quiet "sent" line. */
html body.ik:not(#_) p.ik-dm__me.uc-typed { padding: 9px 14px; }
.uc-typed .ik-kw { background: #fff; color: #111; }
html body.ik:not(#_) p.uc-seen { align-self: flex-end; font-size: 11px; color: #8a8a92; }
.uc-dm .ik-dm__msgs { min-height: 96px; }
/* The booking page the button opens: three class times, one picked. */
.uc-slots { display: flex; gap: 5px; margin: 2px 2px 8px; }
.uc-slots span { flex: 1; padding: 6px 2px; border: 1px solid var(--cf-line); border-radius: 8px; font-size: 10.5px; font-weight: 500; text-align: center; white-space: nowrap; }
.uc-slots span.is-on { border-color: #111; background: #111; color: #fff; }
/* Feature tile: one answer with an image and three link buttons, and the taps on each button. */
.uc-btns { width: min(250px, 100%); padding: 10px; transform: rotate(-1.5deg); }
.uc-btns .ik-dm__msgs { gap: 6px; padding: 0; font-size: 12px; }
html body.ik:not(#_) .uc-btns p.ik-dm__in { max-width: 100%; padding: 7px 10px; }
.uc-btns__card { display: flex; overflow: hidden; border: 1px solid #e4e4e7; border-radius: 12px; }
html body.ik:not(#_) .uc-btns__card img { flex: none; width: 64px; height: auto; object-fit: cover; }
.uc-btns__list { flex: 1; display: flex; flex-direction: column; }
.uc-btns__list span { padding: 5px 6px; font-size: 11.5px; font-weight: 600; color: #0a64d8; text-align: center; }
.uc-btns__list span + span { border-top: 1px solid #efeff0; }
.uc-clicks { width: min(220px, 100%); padding: 12px; transform: rotate(1.5deg); }
.uc-clicks__row { display: grid; grid-template-columns: 78px 1fr 28px; align-items: center; gap: 8px; padding: 4px 0; font-size: 11.5px; }
.uc-clicks__row i { height: 6px; overflow: hidden; border-radius: 3px; background: #ececee; }
.uc-clicks__row u { display: block; height: 100%; background: #111; transform: scaleX(var(--w)); transform-origin: left; }
.uc-clicks__row b { font-weight: 600; text-align: right; }
@media (max-width: 767px) { .uc-clicks { display: none; } }

/* Feature tile: one automation per question, each switched on. */
.uc-auto { gap: 8px; padding: 7px 10px; }
.uc-auto > span:nth-child(2) { flex: 1; font-size: 12.5px; }
.uc-auto .ik-switch { width: 32px; height: 19px; }
.uc-auto .ik-switch::after { top: 2.5px; left: 15px; width: 14px; height: 14px; }
/* Feature tile: contacts with the export button. */
.uc-contacts { display: flex; flex-direction: column; gap: 6px; }
.uc-contacts .ik-ui__li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--cf-mist); }
html body.ik:not(#_) .uc-contacts .ik-ui__li img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.uc-contacts .ik-ui__li span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; }

/* The builder's post row shows the whole caption ask, on two lines if it needs them, never cut with "..." (2026-11-04). */
html body.ik:not(#_) .uc-kwui__post span { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.3; }