/* The Intentions feed: TikTok Wide, in rows.

   TYPE SIZES ARE THE POINT HERE, so they are stated rather than tuned by eye.
   The card this replaces set its title at 22px, which is a poster headline, not
   a caption. TikTok runs the creator name around 17px semibold and the caption
   around 15px regular, and the words are small against the frame on purpose:
   the footage is the subject and the text annotates it. So this matches TikTok's
   ABSOLUTE sizes rather than scaling them down to our narrower card, which would
   have produced 9px and been unreadable.

   The words sit directly on the video. There is no panel behind them. Contrast
   comes from a text shadow plus a scrim that is deliberately light until the
   caption is opened. */

/* NOTHING ON THE SITE STYLES .am-main, INCLUDING ITS GUTTERS.

   The posters page looks right only because its gallery brings its own padding,
   so a page that puts new content in that slot gets none: the lockup, the row
   headers and the cards all started hard against the right edge of the side
   menu with nothing between them. Kaʻo, twice: "use proper spacing", then "all
   content butting up to edge of side menu".

   So the gutter is stated here. The horizontal one is the fix for that report;
   the vertical scale also overrides .am-h1 { margin-bottom: 0 } out of
   kc-music-engine.css, which is what pinned "Intentions" to "For You".

   The carousels deliberately BLEED past the right gutter, so a row reads as
   continuing off screen rather than stopping at a margin, which is what makes
   it obvious there is more to scroll to. */
.kif-page { padding: 20px 34px 76px; }
.kif-page > .am-h1 { margin: 0 0 22px; }
.kif-page .am-lockup { justify-content: flex-start; }
.kif-scroll { margin-right: -34px; padding-right: 34px; }
@media (max-width: 760px) {
  .kif-page { padding: 20px 18px 56px; }
  .kif-scroll { margin-right: -18px; padding-right: 18px; }
}

/* ---------------------------------------------------------------- the rows */
.kif-row { margin: 0 0 42px; }
.kif-row:last-child { margin-bottom: 0; }
.kif-rowhead { display: flex; align-items: center; gap: 10px; padding: 0 0 13px 2px; }
.kif-rowtitle {
  margin: 0; font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 25px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15;
  color: var(--wt-ink, #16221e);
}
.kif-rowmore {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; flex: none;
  align-items: center; justify-content: center; color: inherit; text-decoration: none;
  border: 1.5px solid currentColor; opacity: .5; transition: opacity .14s, transform .14s;
}
.kif-rowmore svg { width: 13px; height: 13px; }
.kif-rowmore:hover { opacity: 1; transform: translateX(2px); }
.kif-rowmore:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; opacity: 1; }

.kif-rowbody { position: relative; }
/* The row is focusable now that the arrow buttons are gone, so it needs a
   visible focus state of its own. */
.kif-scroll:focus-visible { outline: 3px solid var(--wt-ink, #16221e); outline-offset: 4px; border-radius: 6px; }
.kif-scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.kif-scroll::-webkit-scrollbar { display: none; }
.kif-track { display: flex; gap: 16px; padding: 2px 2px 6px; }


/* ---------------------------------------------------------------- the card */
.kif-item { flex: none; width: 360px; scroll-snap-align: start; }
.kif-flip { width: 360px; aspect-ratio: 9 / 16; position: relative; perspective: 1400px; border-radius: 14px; }
.kif-flip .kc-flip__inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1); border-radius: 14px;
}
.kif-flip.is-flipped .kc-flip__inner { transform: rotateY(180deg); }
.kif-flip .kc-flip__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; overflow: hidden; background: #0a0e0c;
}
.kif-flip .kc-flip__back { transform: rotateY(180deg); }

.kif-poster { position: absolute; inset: 0; background: #0a0e0c center / cover no-repeat; }
.kif-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transition: opacity .28s ease; }
.kif-video.is-live { opacity: 1; }

/* THE SCRIM IS LIGHT UNTIL THE CAPTION OPENS. Closed, this is a soft fade over
   roughly the bottom third, the way TikTok's is, and the text shadow does the
   rest of the work. Open, the words need real ground under them. */
.kif-scrim {
  position: absolute; inset: 0; pointer-events: none; transition: background .26s ease;
  background: linear-gradient(to top, rgba(4, 8, 6, .58) 0%, rgba(4, 8, 6, .30) 22%, rgba(4, 8, 6, .05) 46%, rgba(4, 8, 6, 0) 66%);
}
.kif-item.is-open .kif-scrim {
  background: linear-gradient(to top, rgba(4, 8, 6, .94) 0%, rgba(4, 8, 6, .88) 34%, rgba(4, 8, 6, .70) 62%, rgba(4, 8, 6, .40) 100%);
}

/* ---- the words, on the video, in no container at all ---- */
.kif-text {
  position: absolute; left: 16px; right: 56px; bottom: 30px; z-index: 3;
  font-family: 'Montserrat', system-ui, sans-serif; color: #fffdf9;
  /* LEFT, EXPLICITLY. Kaʻo: "left align all copy". The card sits inside the
     posters shell, which centers its own lockup, and the caption was inheriting
     that. Stated here so it cannot be inherited away again. */
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .82), 0 0 18px rgba(0, 0, 0, .5);
  transition: opacity .2s ease;
}
.kif-text > *, .kif-text p, .kif-text h3 { text-align: left; }

.kif-title {
  margin: 0 0 5px; font-size: 17px; font-weight: 700; line-height: 1.28; letter-spacing: -.005em;
}

/* CLOSED: one row. Body takes the line, "more" sits at its right end. */
.kif-caprow { display: flex; align-items: flex-end; gap: 10px; min-height: 0; }
.kif-cap { flex: 1 1 auto; min-width: 0; min-height: 0; }
/* THREE LINES CLOSED, NOT ONE. This started as a single line, matching TikTok's
   teaser exactly. Kaʻo, 2026-08-21: "include 2 more lines of body copy to get
   people intrigued." One line of a guided piece reads as a label; three lines
   read as the beginning of something, which is the job the closed card is
   actually doing here. TikTok's captions are somebody's post; ours are the
   opening of a three minute story and need room to pull. */
.kif-body {
  margin: 0; font-size: 15px; font-weight: 400; line-height: 1.36;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* THE GAP IS NOT DECORATION. "more" sits at the end of the last line, and the
   play button owns the bottom right corner 45px away from the text block's own
   right edge. Kaʻo: "the more action item is too close to the play button."
   Closed, it keeps a hard 18px clear of it; open, "less" is on its own line and
   needs none. */
.kif-more {
  flex: none; padding: 0; margin: 0 18px 0 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: #fffdf9; opacity: .82;
  text-shadow: inherit; white-space: nowrap;
}
.kif-more:hover { opacity: 1; }
.kif-more:focus-visible { outline: 3px solid #fffdf9; outline-offset: 3px; border-radius: 4px; }

/* Hashtags belong to the OPEN caption, at the END of the copy, and they scroll
   with it. Kaʻo: "hashtags should not anchor and be at the bottom of the copy." */
.kif-tags { display: none; margin: 14px 0 0; font-size: 15px; line-height: 1.7; }
/* EVERY HASHTAG IS A LINK, so it has to look like one and answer to a pointer.
   Underline on hover rather than a colour change: the card's ground is moving
   footage, and a colour that reads on one clip disappears on the next. */
.kif-tag {
  color: #fffdf9; text-decoration: none; opacity: .92;
  border-radius: 4px; transition: opacity .12s ease, text-decoration-color .12s ease;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
.kif-tag:hover { opacity: 1; text-decoration-color: currentColor; }
.kif-tag:focus-visible { outline: 2px solid #fffdf9; outline-offset: 2px; opacity: 1; }
.kc-flip.kc-tone-dark .kif-tag { color: #14201b; }

/* ---- the results view for one hashtag ---- */
.kif-results { padding: 2px 0 0; }
.kif-reshead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; padding: 0 0 20px 2px; }
.kif-back-link {
  order: -1; flex: 1 1 100%; font-size: 14px; opacity: .7;
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.kif-back-link::before { content: "\2039"; font-size: 20px; line-height: 1; }
.kif-back-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.kif-back-link:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; opacity: 1; }
.kif-restitle {
  margin: 0; font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--wt-ink, #16221e);
}
.kif-rescount { margin: 0; font-size: 14px; opacity: .62; }
.kif-resempty { margin: 0; font-size: 15px; opacity: .7; }
.kif-resgrid { display: flex; flex-wrap: wrap; gap: 16px; }

/* OPEN: a column. The copy scrolls, the hashtags travel with it at the end, and
   "less" ANCHORS underneath, outside the scroller, so it never scrolls away in
   the middle of a three minute piece. */
.kif-item.is-open .kif-text { top: 18px; bottom: 30px; display: flex; flex-direction: column; }
.kif-item.is-open .kif-caprow { flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 6px; }
.kif-item.is-open .kif-cap {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  /* THIN, AND CLOSE TO THE BUTTONS. Kaʻo: "have the scroll bar be thinner and
     closer to the stack of buttons, making more room/width for the text."

     Two changes, not one. The bar itself drops from 4px to 3px, and the whole
     text block now stops 56px from the right rather than 72px, which is 7px
     clear of the rail's own 38px buttons at right: 11px. The line gains 16px of
     width, which on a 360px card is a word or so per line across the entire
     piece. The scrollbar rides at the far edge of that wider block, so it ends
     up beside the buttons instead of floating in a gutter between them. */
  scrollbar-width: thin; scrollbar-color: rgba(255,253,249,.34) transparent;
  padding-right: 8px;
}
.kif-item.is-open .kif-cap::-webkit-scrollbar { width: 3px; }
.kif-item.is-open .kif-cap::-webkit-scrollbar-thumb { background: rgba(255,253,249,.34); border-radius: 3px; }
.kif-item.is-open .kif-cap::-webkit-scrollbar-track { background: transparent; }
.kc-flip.kc-tone-dark .kif-item.is-open .kif-cap::-webkit-scrollbar-thumb,
.kif-flip.kc-tone-dark .kif-cap::-webkit-scrollbar-thumb { background: rgba(20,32,27,.32); }
.kif-item.is-open .kif-body { display: block; -webkit-line-clamp: none; white-space: pre-wrap; overflow: visible; line-height: 1.42; }
.kif-item.is-open .kif-tags { display: block; }
.kif-item.is-open .kif-more { align-self: flex-end; flex: none; padding-top: 2px; margin-right: 0; }

/* The eye clears the words and keeps every control. */
.kif-item.is-bare .kif-text { opacity: 0; pointer-events: none; }
.kif-item.is-bare .kif-scrim { background: linear-gradient(to top, rgba(4, 8, 6, .34) 0%, rgba(4, 8, 6, 0) 40%); }

/* ---- the right rail ---- */
.kif-rail {
  /* clear of the play button, which owns the bottom right corner */
  position: absolute; right: 11px; bottom: 74px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.kif-rail .kc-pcard__icon {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 253, 249, .55); background: rgba(10, 14, 12, .46); color: #fffdf9;
  transition: background .14s, border-color .14s, color .14s, transform .12s;
}
.kif-rail .kc-pcard__icon svg { width: 20px; height: 20px; display: block; }
.kif-rail .kc-cardflip__ic { width: 15px; height: 15px; display: block; flex: none; }
.kif-rail .kc-pcard__icon:hover { border-color: #fffdf9; background: rgba(10, 14, 12, .66); transform: scale(1.05); }
.kif-rail .kc-pcard__icon:focus-visible { outline: 3px solid #fffdf9; outline-offset: 3px; }
.kif-rail .kc-heart.is-hearted { color: #ff6b8a; border-color: #ff6b8a; }
.kif-rail .kc-heart.is-hearted .kc-heart__svg { fill: #ff6b8a; stroke: #ff6b8a; }
.kif-rail .kc-pcard__icon.is-done { color: #8fd0b4; border-color: #8fd0b4; }
.kif-prof { display: block; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; }
.kif-prof .kc-acircle { width: 40px; }
.kif-prof:focus-visible { outline: 3px solid #fffdf9; outline-offset: 3px; border-radius: 50%; }

/* ---- play, bottom right, the same size as the rail above it ----

   Kaʻo: "have the play button in the lower right corner be the same size as the
   buttons above it so that the text can move down on the screen." It reads as
   the last item in the same stack now, and the caption gets the height back. */
.kif-play {
  position: absolute; right: 11px; bottom: 28px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: #fffdf9; color: #10201a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4); transition: transform .12s, background .14s;
}
.kif-play svg { width: 17px; height: 17px; display: block; }
.kif-play:hover { transform: scale(1.07); }
.kif-play:focus-visible { outline: 3px solid #fffdf9; outline-offset: 3px; }
.kif-play[disabled] { opacity: .5; cursor: not-allowed; }

/* The large hover affordance over the picture. Never takes the pointer: the
   face handles the click, so the middle of the card stays draggable. */
.kif-bigplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.86);
  z-index: 4; pointer-events: none;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255, 253, 249, .30); color: #fffdf9;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.kif-bigplay svg { width: 40px; height: 40px; display: block; margin-left: 4px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.kc-flip__front:hover .kif-bigplay { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Once it is running the affordance has done its job and gets out of the way. */
.kif-item.is-playing .kif-bigplay { opacity: 0 !important; }
@media (hover: none) { .kif-bigplay { display: none; } }

/* ---- progress, on TikTok's terms ----

   Kaʻo: "circle needs to not be clipped, follow the TikTok conventions in
   colour/size/interaction."

   THE CLIPPING was structural, not cosmetic. The bar sat flush at bottom: 0 and
   the knob hung below it at bottom: -3px, so the card's own overflow: hidden and
   its 14px corner radius sliced the bottom off the circle. The bar now sits 8px
   up from the edge and the knob is centred ON the bar line rather than hanging
   under it, so the whole circle is inside the card at every size.

   TIKTOK'S CONVENTIONS, matched:
     idle      a 2px line, white at .3 for the track, solid white for the
               played part, and no knob at all
     hover     the line grows to 4px and the knob fades in
     dragging  stays thick with the knob held
   The generous hit area is invisible and 22px tall, because a 2px line is not
   a pointer target. */
.kif-prog {
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 22px; z-index: 7;
  cursor: pointer; touch-action: none;
}
.kif-prog::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  border-radius: 2px; background: rgba(255, 255, 255, .3);
  transition: height .14s ease;
}
/* THE PLAYED PART IS RED, which is TikTok's own convention and YouTube's before
   it: the track reads as neutral chrome and the red is the only thing on the bar
   that means "how far you are". White fill on a white track relies on opacity
   alone to carry that, and opacity is the first thing a bright frame of video
   destroys. Kaʻo: "TikTok progress bars on what was viewed are red, follow that
   too." */
.kif-fill {
  position: absolute; left: 0; bottom: 8px; height: 2px; width: 0;
  border-radius: 2px; background: #fe2c55;
  transition: height .14s ease;
}
.kif-knob {
  position: absolute; left: 0; bottom: 9px; width: 11px; height: 11px;
  margin-left: -5.5px; transform: translateY(50%) scale(.3);
  /* white knob over the red fill, as TikTok has it: the two never blend */
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .14s ease, transform .14s ease;
}
.kif-prog:hover::before, .kif-prog.is-dragging::before,
.kif-prog:hover .kif-fill, .kif-prog.is-dragging .kif-fill { height: 4px; }
.kif-prog:hover .kif-knob, .kif-prog.is-dragging .kif-knob, .kif-prog:focus-visible .kif-knob {
  opacity: 1; transform: translateY(50%) scale(1);
}
.kif-prog:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 4px; }

/* ---- the back: the same moving card, wearing the poster ----

   Not a flat panel. It carries its own video and the same scrim as the front,
   with the lockup centered over it, so turning the card changes what it says
   and not whether it is alive.

   THE SIZE RULE, which the old version broke: every .kc-fc__line is one size,
   brand words and phrase alike, set together by fitLockup. Only .kc-fc__and is
   smaller. Kaʻo: "the words after AND must be the same size as KEEP CALM and
   only AND is smaller." Nothing here may set a font-size on .kc-fc__line. */
.kif-back { background: #0a0e0c; }
.kif-lockup {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 26px 18px; text-align: center; color: #fffdf9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.kif-lockup .kc-fc__crown { display: block; width: 54px; margin: 0 auto 8px; color: currentColor; }
.kif-lockup .kc-fc__crown svg { width: 100%; height: auto; display: block; }
.kif-lockup .kc-fc__stack { display: flex; flex-direction: column; align-items: center; }
.kif-lockup .kc-fc__line {
  display: block; font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800; line-height: .98; letter-spacing: .005em; text-transform: uppercase;
}
.kif-lockup .kc-fc__and {
  display: block; font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700; font-size: .34em; letter-spacing: .12em; text-transform: uppercase;
  margin: .3em 0 .26em; opacity: .95;
}
.kif-lockup .kc-fc__words { display: flex; flex-direction: column; align-items: center; }
.kif-lockup .kc-fc__url {
  position: absolute; left: 0; right: 0; bottom: 26px;
  font-size: 13px; letter-spacing: .04em; opacity: .8; color: inherit; text-decoration: none;
}

/* ---- light tone: kc-tone-dark is the card system's own class ---- */
.kif-flip.kc-tone-dark .kif-scrim {
  background: linear-gradient(to top, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .42) 24%, rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, 0) 68%);
}
.kif-flip.kc-tone-dark .kif-item.is-open .kif-scrim,
.kif-item.is-open .kif-flip.kc-tone-dark .kif-scrim {
  background: linear-gradient(to top, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .9) 36%, rgba(255, 255, 255, .74) 64%, rgba(255, 255, 255, .44) 100%);
}
.kif-flip.kc-tone-dark .kif-text { color: #14201b; text-shadow: 0 1px 3px rgba(255, 255, 255, .8); }
.kif-flip.kc-tone-dark .kif-more { color: #14201b; }
.kif-flip.kc-tone-dark .kif-rail .kc-pcard__icon { color: #14201b; border-color: rgba(20, 32, 27, .5); background: rgba(255, 253, 249, .66); }
.kif-flip.kc-tone-dark .kif-rail .kc-pcard__icon:hover { color: #0c1512; border-color: #14201b; background: rgba(255, 253, 249, .9); }
.kif-flip.kc-tone-dark .kif-play { background: #14201b; color: #fffdf9; }
/* The red is the meaning, so it survives the light tone; only the knob flips. */
.kif-flip.kc-tone-dark .kif-knob { background: #14201b; }
.kif-flip.kc-tone-dark .kif-prog::before { background: rgba(20, 32, 27, .3); }
.kif-flip.kc-tone-dark .kif-back { background: #f4f2ec; color: #14201b; }

/* ---- narrow screens: one card, full width ---- */
@media (max-width: 760px) {
  .kif-item, .kif-flip { width: min(360px, calc(100vw - 40px)); }
  .kif-rowtitle { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
}