/* English /use-case pages from the shared Ink template (views/frontend/use-case/use_case_ink.pug, body .ikuk).
   Only the mocks the two hand-built use cases do not have. Everything else comes from ink/home.css and ink/use-case.css.
   No colour behind a mock: frames are the plain mist surface (INK-SYSTEM.md section 4). */

/* The Story with the follower's reply at the bottom */
html body.ik:not(#_) .uk-story { position: relative; width: 132px; overflow: hidden; border-radius: 16px; background: #222; color: #fff; transform: rotate(-2deg); }
html body.ik:not(#_) img.uk-story__pic { display: block; width: 100%; height: 176px; object-fit: cover; }
html body.ik:not(#_) .uk-story__top { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px; padding: 10px 8px 14px; background: linear-gradient(rgba(0, 0, 0, .45), transparent); font-size: 11px; }
html body.ik:not(#_) .uk-story__top img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) .uk-story__top b { font-weight: 600; }
html body.ik:not(#_) .uk-story__top i { font-style: normal; opacity: .75; }
html body.ik:not(#_) .uk-story__reply { position: absolute; left: 6px; right: 6px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 5px; border-radius: 999px; background: #fff; font-size: 11px; line-height: 1.2; color: #111; }
html body.ik:not(#_) .uk-story__reply img { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) .uk-story__reply b { font-weight: 600; }
html body.ik:not(#_) .uk-story__reply .ik-kw { font-size: 10px; }

/* The comments under the post */
html body.ik:not(#_) .uk-cmts { width: min(230px, 100%); }

/* Follow Gate buttons inside the DM */
html body.ik:not(#_) .uk-fbtns { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
html body.ik:not(#_) .uk-fbtns span { padding: 6px 10px; border-radius: 10px; background: #f4f4f5; font-size: 11px; font-weight: 600; text-align: center; color: #3797f0; }

/* A discount code inside the DM */
html body.ik:not(#_) .uk-code { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1.5px dashed #c4c4ca; border-radius: 10px; }
html body.ik:not(#_) .uk-code span { font-size: 10px; color: #63636b; }
html body.ik:not(#_) .uk-code b { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #18181b; }

/* The page that opens after the tap: an optional picture and line */
html body.ik:not(#_) img.uk-web__img { display: block; width: 100%; height: 72px; margin-top: 6px; border-radius: 10px; object-fit: cover; }
html body.ik:not(#_) .uk-web__line { margin: -2px 2px 8px; font-size: 11px; line-height: 1.35; color: #63636b; }

/* Public Reply: the comment and the public answer under it */
html body.ik:not(#_) .uk-pr { display: flex; flex-direction: column; gap: 8px; width: min(260px, 100%); }
html body.ik:not(#_) .uk-pr__row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; }
html body.ik:not(#_) .uk-pr__row--me { margin-left: 22px; }
html body.ik:not(#_) .uk-pr__row img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) .uk-pr__row b { font-weight: 600; }

/* The test line under the setup steps */
html body.ik:not(#_) p.uk-test { margin-top: 18px; font-size: 14px; color: var(--cf-text-2); }
html body.ik:not(#_) p.uk-test b { font-weight: 600; color: var(--cf-text); }

/* The "Replied to your story" line above a Story reply in the DM */
html body.ik:not(#_) p.uk-ctx { align-self: flex-end; margin-bottom: -2px; font-size: 10px; color: #8a8a92; }

/* Index of every use case (overview pages): three groups of plain links, one line each */
html body.ik:not(#_) .uk-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 40px; }
html body.ik:not(#_) p.uk-index__h { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--cf-on-ink-2); }
html body.ik:not(#_) .uk-index ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .uk-index li { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid var(--cf-ink-line); }
html body.ik:not(#_) .uk-index a { font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--cf-on-ink); text-decoration: none; }
html body.ik:not(#_) .uk-index a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
html body.ik:not(#_) .uk-index li span { font-size: 14px; line-height: 1.45; color: var(--cf-on-ink-2); }
@media (max-width: 899px) { .uk-index { grid-template-columns: 1fr; gap: 24px; } }

/* "Saved to your contacts" under the email answer in a story card: in the flow, not floating outside the frame (2026-11-04). */
html body.ik:not(#_) .uc-story .ik-dmcard .ik-note { position: static; display: inline-flex; align-self: flex-start; margin: 8px 0 0; transform: none; }