/* look-feed-embed.css — LOOK Feed embed styles（全 scope .home）*/

/* ── Local type-scale tokens（ported from look-feed.html）── */
.home {
  --lf-u0: 16px;
  --lf-lhu: 24px;
  --lf-k1: 21px;
  --lf-lh1: 32px;
  --lf-k2: 28px;
  --lf-lh2: 40px;
  --lf-t1: 13px;
  --lf-lht1: 16px;
  --lf-t2: 11px;
  --lf-lht2: 16px;
}

/* ── feed ↔ chat 同格疊層（grid stack）──
   feed 與 look-query 佔同一 grid cell，開關過場時兩者並存、交叉顯影；
   grid item 在流內 → 保留 swipe-page padding/捲動，避免 absolute inset 的捲動定位坑。
   同時 opt-out chrome.css 的 column-reverse / margin-top:auto（display:grid 覆蓋 flex）。 */
.home .page-look.feed-look {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}
.home .feed-look > #feedCards,
.home .feed-look > #feedState,
.home .feed-look > #lookSpec,
.home .feed-look > #logHot,
.home .feed-look > .look-query {
  grid-area: 1 / 1;   /* 同格疊層；DOM 後者繪於上層 */
  min-width: 0;
}

/* ── 規格面（2a）：鎖定鞋款 → 規格面取代 feed／chat（最高優先層）── */
.home .feed-look > #lookSpec { display: none; }
.home .feed-look.look-spec-on > #lookSpec { display: block; }
.home .feed-look.look-spec-on > #feedCards,
.home .feed-look.look-spec-on > #feedState,
.home .feed-look.look-spec-on > #logHot,
.home .feed-look.look-spec-on > .look-query { display: none; }

/* ── LOG 冷啟動熱門（重·3）：LOG 模式且未鎖定 → 熱門列取代 feed ── */
.home .feed-look > #logHot { display: none; }
.home .feed-look.log-hot-on > #logHot { display: block; }
.home .feed-look.log-hot-on > #feedCards,
.home .feed-look.log-hot-on > #feedState,
.home .feed-look.log-hot-on > .look-query { display: none; }

/* 桌機：LOG thread 與 LOOK Feed 同齊頂部（覆蓋 chrome.css margin-top:auto）*/
@media (min-width: 1024px) {
  .home .page-log > .thread {
    margin-top: 0;
  }
}

/* ── Feed 容器（無橫向 padding；border 由各 .post 自帶，貼左側垂直分隔線）── */
.home #feedCards {
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
}

.home #feedState {
  font-family: var(--mono);
  font-size: var(--lf-t1);
  color: var(--ink-3);
  padding: 32px 16px;
  text-align: left;
}
.home .feed-end {
  font-family: var(--mono);
  font-size: var(--lf-t1);
  color: var(--ink-3);
  padding: 32px 16px;
  text-align: center;
}
.home #feedState.loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 0;
}
.home .feed-dots {
  display: flex;
  gap: 4px;
}
.home .feed-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-ink);
  animation: feedBounce 1.2s ease-in-out infinite;
}
.home .feed-dot:nth-child(2) { animation-delay: .15s; }
.home .feed-dot:nth-child(3) { animation-delay: .3s; }
@keyframes feedBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ── LOG 聊天頭像：方塊風格（比照右側 feed .spk）── */
.home .thread {
  padding-left: 40px;  /* 28px avatar + 12px gap */
}
.home .typing.show {
  padding-left: 40px;  /* align K box with .thread msg-k speakers */
  gap: 12px;
}
.home .msg-k,
.home .msg-u {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* cont 訊息無 speaker，手動補 28px+12px 讓 kq-text 落在 content 欄 */
.home .msg-k.cont {
  padding-left: 40px;
}
/* chips / kqfl 是 .thread 直接子元素，同樣需對齊 content 欄 */
.home .thread > .chips,
.home .thread > .kqfl {
  padding-left: 40px;
}
/* recordCard 預覽卡（.rc）同為 .thread 直接子元素，但有底色：用 margin-left（非 padding）整張卡右移，
   讓卡片左緣對齊 content 欄（chat 回覆文字），不在卡內留 40px 空白底色 */
.home .thread > .rc {
  margin-left: 40px;
}
.home .speaker {
  position: static;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--signal);
  border-radius: var(--r-xs);
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--lf-t1);
  color: var(--signal);
  text-align: center;
}
.home .speaker.s {
  border-color: var(--teal-ink);
  color: var(--teal-ink);
}

/* ── 卡片共用 ── */
.home .nobr { white-space: nowrap; }

.home .post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 16px;
  border-top: 1px solid var(--seam);
}
/* 第一張卡：無分隔線、無頂端 padding，與左側 LOG 首行對齊 */
.home #feedCards > article:first-child {
  border-top: none;
  padding-top: 0;
}
.home .post-take { padding-top: 10px; padding-bottom: 10px; border-top-color: transparent; }
.home .post-group-head { padding-bottom: 4px; }

.home .spk {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--lf-t1);
  line-height: 1;
  border: 1px solid var(--teal-ink);
  color: var(--teal-ink);
}
.home .spk.k { border-color: var(--signal); color: var(--signal); }
.home a.spk:hover { opacity: .7; }

/* 個人 / K 頭像：hover 逐字展開全名（base 尺寸不變，浮層絕對定位不破對齊） */
/* left:auto / top:auto 必要：LOG 的 .speaker 從 chat.css 繼承了
   position:absolute + left:calc(var(--gutter)*-3)（-48px）與 top:0；
   position:static 原本壓住它；改 relative 後 -48px 會復活 → LOG 頭像左移錯位，
   故一併歸零，讓 relative 只當 ::after 的定位錨、不位移。
   .spk 無此繼承，這兩行對 LOOK 是 no-op。 */
.home .spk[data-name],
.home .speaker[data-name] { position: relative; left: auto; top: auto; }

.home .spk[data-name]::after,
.home .speaker[data-name]::after {
  content: attr(data-name);
  box-sizing: border-box;
  position: absolute; top: -1px; left: -1px;
  height: calc(100% + 2px);
  width: max-content; max-width: 30px;
  overflow: hidden; white-space: nowrap;
  display: flex; align-items: center; padding: 0 8px;
  background: var(--paper);
  border: 1px solid currentColor;
  border-radius: var(--r-xs);
  color: inherit;
  font-family: var(--mono); font-weight: 700; font-size: var(--lf-t1);
  opacity: 0; pointer-events: none;
  transition: max-width .5s steps(14, end), opacity .01s linear;
  z-index: 5;
}
.home .spk[data-name]:hover::after,
.home .spk[data-name]:focus-visible::after,
.home .speaker[data-name]:hover::after,
.home .speaker[data-name]:focus-visible::after {
  opacity: 1; max-width: 280px;
}

/* 個人 / K 頭像改用展開、hover 不整顆淡出；鞋款頭像維持原 .7 淡出 */
.home a.spk[data-name]:hover { opacity: 1; }

.home .body { flex: 1; min-width: 0; }
.home .head { margin-bottom: 8px; }
.home .head .nm {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink);
}
/* 只有鞋名走明體 900（§02：KILOQ wordmark / 人名仍 Barlow 系統聲音，不被連坐）*/
.home .head .nm-shoe {
  font-family: var(--serif);
  font-weight: 900;
}
.home .head .hd {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--lf-t1);
  color: var(--teal-ink);
  text-decoration: none;
  margin-left: 8px;
}

.home .fill {
  background: var(--teal);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.home a.fill:hover { filter: brightness(1.1); }

.home .title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--lf-k2);
  line-height: var(--lf-lh2);
  color: var(--ink);
}
.home .title.sm {
  font-size: var(--lf-k1);
  line-height: var(--lf-lh1);
}
.home .name-b {
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink);
}
.home .frame {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink-2);
  max-width: 34ch;
  margin-top: 6px;
}
.home .meta {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--lf-t1);
  color: var(--ink-3);
}
.home .act {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: var(--lf-t1);
  color: var(--teal-ink);
  cursor: pointer;
  text-decoration: none;
}
.home .act:hover { color: var(--ink); }

.home .quote {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--lf-k1);
  line-height: var(--lf-lh1);
  color: var(--ink);
  max-width: 26ch;
}
.home .verdict {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 60px;
  line-height: 64px;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 2px;
}
@media (max-width: 560px) {
  .home .verdict { font-size: 48px; line-height: 48px; }
}
.home .tq {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink);
  max-width: 30ch;
}
.home .s-say {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink);
  max-width: 32ch;
}
.home .u-ref {
  font-family: var(--sans);
  font-size: var(--lf-t1);
  color: var(--teal-ink);
  margin-top: 10px;
}
.home .orig-quote {
  font-family: var(--sans);
  font-size: var(--lf-t1);
  color: var(--ink-3);
  margin-top: 10px;
  max-width: 30ch;
}

.home .qt-box {
  display: block;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--paper-2);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.home .qt-box .qt-attr {
  display: block;
  font-family: var(--sans);
  font-size: var(--lf-t1);
  color: var(--ink-3);
  margin-bottom: 6px;
}
.home .qt-box .qt-text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink-2);
  margin: 0;
}
.home a.qt-box:hover { border-color: var(--ink-3); background: var(--paper-2); }

.home .shoes { list-style: none; margin: 12px 0 0; padding: 0; }
.home .shoe-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--seam);
  text-decoration: none;
}
.home .shoe-row:hover .name-b {
  text-decoration: underline;
  text-decoration-color: var(--signal);
}

.home .invite {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--seam);
  cursor: pointer;
}
.home .invite .ask {
  display: block;
  font-family: var(--sans);
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink-2);
  margin-bottom: 6px;
}
.home .invite .go {
  font-family: var(--sans);
  font-size: var(--lf-t1);
  color: var(--teal-ink);
}

/* ── 社團週報卡（digest）──────────────────────────────────────────────────── */
.home .ghead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.home .gname {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink);
}
.home .gweek {
  font-family: var(--mono);
  font-size: var(--lf-t1);
  line-height: var(--lf-lht1);
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* digest .shoe-row 內引言：明朝體小字，不用原 .quote 大字大小 */
.home .shoe-row .lft {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home .shoe-row .quote {
  font-size: var(--lf-t1);
  line-height: var(--lf-lht1);
  font-weight: 600;
  max-width: 28ch;
}

.home .invite .inv-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--lf-t2);
  line-height: var(--lf-lht2);
  color: var(--signal);
  border: 1px solid var(--signal);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  margin-bottom: 6px;
}

/* ── 社團單則卡（group news）統一方框 .lk ──────────────────────────────────── */
.home .lk {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--paper-2);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.home .lk.src {
  background: var(--bubble);
  border-color: transparent;
}
.home a.lk:hover { border-color: var(--ink-3); }
.home a.lk.src:hover { filter: brightness(0.97); }
.home .lk-attr {
  display: block;
  font-family: var(--sans);
  font-size: var(--lf-t1);
  color: var(--ink-3);
  margin-bottom: 4px;
}
.home .lk-text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--lf-u0);
  line-height: var(--lf-lhu);
  color: var(--ink-2);
  margin: 0;
}

/* ── feed ↔ 查詢視圖切換（look-awake class 由 JS 控制）──
   feed 的顯示/隱藏改由 JS+GSAP 控（交叉顯影後才 display:none），CSS 不再硬切 feed。 */
.home .feed-look .look-query { display: none; }
.home .feed-look.look-awake .look-query { display: block; }

/* ── close 按鈕（sticky 右上角，捲動時不移動）+ 視窗頂部溝線（seam）── */
.home .lq-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  padding: 16px 16px 8px;
  background: var(--paper);            /* sticky 底色：捲動時對話不穿過溝線 */
  border-top: 1px solid var(--seam);  /* LOOK chat 視窗上緣溝線——在關閉鈕上方（與中縫/feed 分隔同 token）*/
}
.home .lf-back {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  background: var(--teal-ink); border: none; color: var(--paper);
  font-family: var(--mono); font-weight: 700; font-size: var(--lf-u0); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .15s ease;
}
.home .lf-back:hover { opacity: .85; }