/* ============================================================================
 * WLTT Layout & Pages · 布局与页面层
 * ----------------------------------------------------------------------------
 * 依赖：tokens.css → base.css → components.css → layout.css
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 1. App Shell · 应用外壳
 * -------------------------------------------------------------------------*/
.wltt-app {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
  background: var(--wltt-surface-base);
  position: relative;
}

/* 环境光：极低强度径向渐变，制造纵深，不喧宾夺主 */
.wltt-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--wltt-gradient-aurora);
}

.wltt-app > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * 2. Topbar · 顶部导航
 * -------------------------------------------------------------------------*/
.wltt-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--wltt-z-header);
  display: flex;
  align-items: center;
  gap: var(--wltt-space-6);
  height: 60px;
  padding-inline: var(--wltt-gutter);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background-color var(--wltt-dur-base) var(--wltt-ease-standard),
    border-color var(--wltt-dur-base) var(--wltt-ease-standard),
    backdrop-filter var(--wltt-dur-base) var(--wltt-ease-standard);
}

/* 滚动后毛玻璃化 —— 仅在有滚动时出现，避免静态页面就有廉价玻璃感 */
.wltt-topbar.is-scrolled {
  background: var(--wltt-surface-overlay);
  backdrop-filter: blur(var(--wltt-blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--wltt-blur-md)) saturate(160%);
  border-bottom-color: var(--wltt-border-subtle);
}

.wltt-brand {
  display: flex;
  align-items: center;
  gap: var(--wltt-space-2);
  font-size: var(--wltt-text-lg);
  font-weight: var(--wltt-weight-bold);
  letter-spacing: var(--wltt-tracking-tight);
  color: var(--wltt-text-primary);
  text-decoration: none;
}

.wltt-brand:hover { text-decoration: none; }

.wltt-brand__mark {
  width: 28px;
  height: 28px;
  border-radius: var(--wltt-radius-md);
  background: var(--wltt-gradient-brand);
  display: grid;
  place-items: center;
  color: var(--wltt-text-on-brand);
  font-size: var(--wltt-text-xs);
  font-weight: var(--wltt-weight-bold);
  letter-spacing: 0;
  box-shadow: var(--wltt-shadow-brand);
}

.wltt-nav {
  display: flex;
  align-items: center;
  gap: var(--wltt-space-1);
  margin-inline-start: var(--wltt-space-4);
}

.wltt-nav__link {
  position: relative;
  padding: var(--wltt-space-2) var(--wltt-space-3);
  border-radius: var(--wltt-radius-sm);
  font-size: var(--wltt-text-md);
  font-weight: var(--wltt-weight-medium);
  color: var(--wltt-text-secondary);
  text-decoration: none;
  transition: var(--wltt-transition-colors);
}

.wltt-nav__link:hover {
  color: var(--wltt-text-primary);
  background: var(--wltt-fill-hover);
  text-decoration: none;
}

.wltt-nav__link[aria-current="page"] {
  color: var(--wltt-text-brand);
}

.wltt-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--wltt-space-3);
  inset-block-end: -0.62rem;
  height: 2px;
  background: var(--wltt-surface-brand);
  border-radius: var(--wltt-radius-full);
}

.wltt-topbar__spacer { flex: 1; }

/* ---------------------------------------------------------------------------
 * 3. Hero · 首屏：约束条件输入台
 * -------------------------------------------------------------------------*/
.wltt-hero {
  position: relative;
  padding-block: var(--wltt-space-20) var(--wltt-space-12);
}

.wltt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wltt-space-2);
  padding: var(--wltt-space-1) var(--wltt-space-3);
  border-radius: var(--wltt-radius-full);
  background: var(--wltt-surface-raised);
  border: 1px solid var(--wltt-border-default);
  box-shadow: var(--wltt-shadow-xs);
  font-size: var(--wltt-text-xs);
  font-weight: var(--wltt-weight-medium);
  color: var(--wltt-text-secondary);
}

.wltt-hero__title {
  margin-block: var(--wltt-space-6) var(--wltt-space-4);
  font-size: clamp(2rem, 1.2rem + 3.4vw, var(--wltt-text-5xl));
  font-weight: var(--wltt-weight-bold);
  line-height: var(--wltt-leading-tight);
  letter-spacing: var(--wltt-tracking-tighter);
  max-width: 20ch;
}

.wltt-hero__title em {
  font-style: normal;
  background: var(--wltt-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wltt-hero__lede {
  max-width: 46ch;
  font-size: var(--wltt-text-lg);
  line-height: var(--wltt-leading-relaxed);
  color: var(--wltt-text-secondary);
}

/* 约束输入台 */
.wltt-console {
  margin-top: var(--wltt-space-8);
  padding: var(--wltt-space-6);
  background: var(--wltt-surface-raised);
  border: 1px solid var(--wltt-border-default);
  border-radius: var(--wltt-radius-xl);
  box-shadow: var(--wltt-shadow-lg);
}

.wltt-console__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--wltt-space-5);
}

.wltt-console__actions {
  display: flex;
  align-items: center;
  gap: var(--wltt-space-4);
  margin-top: var(--wltt-space-6);
  padding-top: var(--wltt-space-5);
  border-top: 1px solid var(--wltt-border-subtle);
  flex-wrap: wrap;
}

/* 约束条：已解析出的约束以 chip 展示，可删除 */
.wltt-constraints {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wltt-space-2);
  margin-top: var(--wltt-space-4);
}

.wltt-constraint {
  display: inline-flex;
  align-items: center;
  gap: var(--wltt-space-2);
  padding: var(--wltt-space-1) var(--wltt-space-2) var(--wltt-space-1) var(--wltt-space-3);
  border-radius: var(--wltt-radius-full);
  background: var(--wltt-surface-brand-soft);
  border: 1px solid var(--wltt-border-brand);
  color: var(--wltt-text-brand);
  font-size: var(--wltt-text-sm);
  font-weight: var(--wltt-weight-medium);
  animation: wltt-scale-in var(--wltt-dur-base) var(--wltt-ease-spring) both;
}

.wltt-constraint__x {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--wltt-radius-full);
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  transition: var(--wltt-transition-colors);
}

.wltt-constraint__x:hover {
  opacity: 1;
  background: var(--wltt-fill-hover);
}

/* ---------------------------------------------------------------------------
 * 4. Section · 区块结构
 * -------------------------------------------------------------------------*/
.wltt-section {
  padding-block: var(--wltt-space-12);
}

.wltt-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wltt-space-6);
  margin-bottom: var(--wltt-space-6);
  flex-wrap: wrap;
}

.wltt-section__title {
  font-size: var(--wltt-text-2xl);
  font-weight: var(--wltt-weight-semibold);
  letter-spacing: var(--wltt-tracking-tight);
}

.wltt-section__desc {
  margin-top: var(--wltt-space-2);
  font-size: var(--wltt-text-md);
  color: var(--wltt-text-secondary);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------------
 * 5. Decision Board · 决策工作台（左右分栏）
 * -------------------------------------------------------------------------*/
.wltt-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--wltt-space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .wltt-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wltt-board__aside {
  position: sticky;
  inset-block-start: 76px;
  display: flex;
  flex-direction: column;
  gap: var(--wltt-space-4);
}

@media (max-width: 1024px) {
  .wltt-board__aside {
    position: static;
  }
}

/* 方案对比条 */
.wltt-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wltt-space-4);
}

@media (max-width: 768px) {
  .wltt-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 方案卡：被选中项抬升 */
.wltt-plan {
  position: relative;
  padding: var(--wltt-space-5);
  background: var(--wltt-surface-raised);
  border: 1px solid var(--wltt-border-subtle);
  border-radius: var(--wltt-radius-lg);
  cursor: pointer;
  text-align: start;
  width: 100%;
  transition:
    transform var(--wltt-dur-base) var(--wltt-ease-out-expo),
    box-shadow var(--wltt-dur-base) var(--wltt-ease-standard),
    border-color var(--wltt-dur-base) var(--wltt-ease-standard);
}

.wltt-plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--wltt-shadow-md);
}

.wltt-plan[aria-pressed="true"] {
  border-color: var(--wltt-border-brand);
  box-shadow: var(--wltt-shadow-lg);
}

.wltt-plan[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: var(--wltt-space-4);
  inset-inline-end: var(--wltt-space-4);
  width: 8px;
  height: 8px;
  border-radius: var(--wltt-radius-full);
  background: var(--wltt-primary-500);
  box-shadow: 0 0 0 4px oklch(64.1% 0.148 248 / 0.16);
}

.wltt-plan__rank {
  font-family: var(--wltt-font-numeric);
  font-size: var(--wltt-text-xs);
  letter-spacing: var(--wltt-tracking-wider);
  color: var(--wltt-text-tertiary);
  text-transform: uppercase;
}

.wltt-plan__name {
  margin-block: var(--wltt-space-2) var(--wltt-space-3);
  font-size: var(--wltt-text-lg);
  font-weight: var(--wltt-weight-semibold);
}

.wltt-plan__bars {
  display: flex;
  flex-direction: column;
  gap: var(--wltt-space-2);
  margin-top: var(--wltt-space-4);
}

.wltt-plan__row {
  display: grid;
  grid-template-columns: 3.6rem 1fr 2.4rem;
  align-items: center;
  gap: var(--wltt-space-2);
  font-size: var(--wltt-text-xs);
  color: var(--wltt-text-tertiary);
}

.wltt-plan__row span:last-child {
  text-align: end;
  font-family: var(--wltt-font-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--wltt-text-secondary);
}

.wltt-minibar {
  height: 4px;
  border-radius: var(--wltt-radius-full);
  background: var(--wltt-surface-sunken);
  overflow: hidden;
}

.wltt-minibar > i {
  display: block;
  height: 100%;
  border-radius: var(--wltt-radius-full);
  background: var(--wltt-primary-500);
  transition: width var(--wltt-dur-narrative) var(--wltt-ease-out-expo);
}

/* ---------------------------------------------------------------------------
 * 6. Feed · 内容流（知识/情报卡）
 * -------------------------------------------------------------------------*/
.wltt-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--wltt-space-5);
}

.wltt-feedcard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--wltt-surface-raised);
  border: 1px solid var(--wltt-border-subtle);
  border-radius: var(--wltt-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--wltt-dur-base) var(--wltt-ease-out-expo),
    box-shadow var(--wltt-dur-base) var(--wltt-ease-standard),
    border-color var(--wltt-dur-base) var(--wltt-ease-standard);
}

.wltt-feedcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--wltt-shadow-lg);
  border-color: var(--wltt-border-default);
}

.wltt-feedcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--wltt-surface-sunken);
  overflow: hidden;
}

.wltt-feedcard__media > .wltt-feedcard__art {
  position: absolute;
  inset: 0;
  background: var(--wltt-gradient-brand);
  opacity: 0.9;
  transition: transform var(--wltt-dur-slower) var(--wltt-ease-out-expo);
}

.wltt-feedcard:hover .wltt-feedcard__art {
  transform: scale(1.045);
}

.wltt-feedcard__tag {
  position: absolute;
  inset-block-start: var(--wltt-space-3);
  inset-inline-start: var(--wltt-space-3);
  z-index: 1;
  padding: var(--wltt-space-1) var(--wltt-space-2);
  border-radius: var(--wltt-radius-sm);
  background: oklch(0% 0 0 / 0.42);
  backdrop-filter: blur(var(--wltt-blur-sm));
  color: oklch(98% 0 0);
  font-size: var(--wltt-text-xs);
  font-weight: var(--wltt-weight-medium);
}

.wltt-feedcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--wltt-space-2);
  padding: var(--wltt-space-5);
  flex: 1;
}

.wltt-feedcard__title {
  font-size: var(--wltt-text-lg);
  font-weight: var(--wltt-weight-semibold);
  line-height: var(--wltt-leading-snug);
  letter-spacing: var(--wltt-tracking-tight);
}

.wltt-feedcard__excerpt {
  font-size: var(--wltt-text-sm);
  line-height: var(--wltt-leading-normal);
  color: var(--wltt-text-secondary);
}

.wltt-feedcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wltt-space-3);
  margin-top: auto;
  padding-top: var(--wltt-space-3);
  font-size: var(--wltt-text-xs);
  color: var(--wltt-text-tertiary);
}

/* ---------------------------------------------------------------------------
 * 7. Insight · 因果/依据说明块
 * -------------------------------------------------------------------------*/
.wltt-insight {
  padding: var(--wltt-space-4) var(--wltt-space-5);
  border-radius: var(--wltt-radius-md);
  border: 1px solid var(--wltt-border-subtle);
  border-inline-start: 3px solid var(--wltt-primary-400);
  background: var(--wltt-surface-sunken);
}

.wltt-insight__label {
  font-size: var(--wltt-text-xs);
  font-weight: var(--wltt-weight-semibold);
  letter-spacing: var(--wltt-tracking-wider);
  text-transform: uppercase;
  color: var(--wltt-text-tertiary);
  margin-bottom: var(--wltt-space-2);
}

.wltt-insight__text {
  font-size: var(--wltt-text-sm);
  line-height: var(--wltt-leading-relaxed);
  color: var(--wltt-text-secondary);
}

.wltt-insight__text b {
  color: var(--wltt-text-primary);
  font-weight: var(--wltt-weight-semibold);
}

/* ---------------------------------------------------------------------------
 * 8. Agent Log · 求解过程日志（体现"求解器优先"）
 * -------------------------------------------------------------------------*/
.wltt-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--wltt-font-mono);
  font-size: var(--wltt-text-xs);
  border: 1px solid var(--wltt-border-subtle);
  border-radius: var(--wltt-radius-md);
  background: var(--wltt-surface-sunken);
  overflow: hidden;
}

.wltt-log__line {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: var(--wltt-space-3);
  padding: var(--wltt-space-2) var(--wltt-space-3);
  border-bottom: 1px solid var(--wltt-border-subtle);
  color: var(--wltt-text-secondary);
  animation: wltt-fade-in var(--wltt-dur-slow) var(--wltt-ease-out-expo) both;
}

.wltt-log__line:last-child { border-bottom: none; }

.wltt-log__ts { color: var(--wltt-text-tertiary); }

.wltt-log__ok { color: var(--wltt-text-success); }

/* ---------------------------------------------------------------------------
 * 9. Footer
 * -------------------------------------------------------------------------*/
.wltt-footer {
  margin-top: var(--wltt-space-20);
  padding-block: var(--wltt-space-10);
  border-top: 1px solid var(--wltt-border-subtle);
  color: var(--wltt-text-tertiary);
  font-size: var(--wltt-text-sm);
}

.wltt-footer__grid {
  display: flex;
  justify-content: space-between;
  gap: var(--wltt-space-8);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
 * 10. 实用工具类
 * -------------------------------------------------------------------------*/
.wltt-mt-2 { margin-top: var(--wltt-space-2); }
.wltt-mt-4 { margin-top: var(--wltt-space-4); }
.wltt-mt-6 { margin-top: var(--wltt-space-6); }
.wltt-mt-8 { margin-top: var(--wltt-space-8); }
.wltt-mb-4 { margin-bottom: var(--wltt-space-4); }
.wltt-flex { display: flex; }
.wltt-flex-col { display: flex; flex-direction: column; }
.wltt-items-center { align-items: center; }
.wltt-justify-between { justify-content: space-between; }
.wltt-gap-2 { gap: var(--wltt-space-2); }
.wltt-gap-3 { gap: var(--wltt-space-3); }
.wltt-gap-4 { gap: var(--wltt-space-4); }
.wltt-w-full { width: 100%; }
.wltt-hidden { display: none !important; }

@media (max-width: 768px) {
  .wltt-hero { padding-block: var(--wltt-space-12) var(--wltt-space-8); }
  .wltt-section { padding-block: var(--wltt-space-8); }
  .wltt-console { padding: var(--wltt-space-4); }
  .wltt-timeline__item { grid-template-columns: 4rem 1.25rem 1fr; }
  .wltt-topbar { gap: var(--wltt-space-3); }
  .wltt-nav { display: none; }
}