/* ============================================================================
   页面级样式
   ----------------------------------------------------------------------------
   base / components / layout 三层负责「通用」：令牌、组件、骨架。
   这一层只放「某个页面独有」的东西，避免通用层被页面细节撑肿。
   目前主要服务「我的 / 设置」页，以及跟读练习页的队列条。
   ============================================================================ */

/* ============================ 我的 ============================ */
.me-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 头像本身复用 .avatar.is-xl，这里只把它的图标底色压深一点，避免发灰 */
.me-head .avatar.is-xl {
  color: #fff;
}

/* ============================ 设置行 ============================ */
.setting-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  flex-wrap: wrap;
}

.setting-row .sr-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.5;
}

.setting-row .sr-sub {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.65;
}

.setting-row .sr-ctl {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* 窄屏：控件换行落到下一行并靠左，避免被挤成一条线 */
@media (max-width: 479px) {
  .setting-row {
    align-items: flex-start;
  }
  .setting-row .sr-ctl {
    width: 100%;
    justify-content: flex-start;
  }
  .setting-row .sr-ctl .segmented {
    display: flex;
    width: 100%;
  }
  .setting-row .sr-ctl .segmented > button {
    flex: 1;
  }
}

/* ============================ 今日（首页） ============================ */
/* 首页只承担一件事：让「现在点哪里」在首屏内被看见。
   所以主按钮占满整行、字号拉大，且紧跟在进度之下 —— 中间不插任何说明段落。 */
.today-title {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.today-cta {
  width: 100%;
  margin-top: var(--sp-5);
}
.today-card .progress {
  margin-top: var(--sp-4);
}
.stage-tile {
  display: block;
}
.stage-tile .st-name {
  margin-top: var(--sp-3);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.stage-tile .progress {
  margin-top: var(--sp-3);
}

/* ============================ 筛选抽屉 ============================ */
/* 分类筛选是低频操作，默认只占一行；点开才铺开。
   收起时把浏览器默认的三角换成会转的箭头。 */
.filter-drawer > summary {
  list-style: none;
}
.filter-drawer > summary::-webkit-details-marker {
  display: none;
}
.filter-drawer > summary > .t-4 {
  transition: transform 0.18s var(--ease);
}
.filter-drawer[open] > summary > .t-4 {
  transform: rotate(90deg);
}

/* ============================ 折叠分组 ============================ */
details > summary > .t-4 {
  transition: transform 0.18s var(--ease);
}
details[open] > summary > .t-4 {
  transform: rotate(90deg);
}

/* ============================ 跟读练习 · 队列条 ============================ */
/* 音素很多时横向滚动，两侧做一点渐隐，暗示「还能往右拖」 */
.queue-strip {
  padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
}
.queue-strip:not(.is-scrollable) {
  -webkit-mask-image: none;
  mask-image: none;
}

/* 本轮已经掌握的音素（非当前项）用描边提示，不用填充，避免和当前项抢视线 */
.chip.is-done {
  border-color: var(--teal-400, var(--teal));
  color: var(--teal-600);
  background: var(--teal-50);
}

/* ============================ 音素详情 · 侧栏面板 ============================ */
/* 移动端两栏折叠后，侧栏会落到正文下方，这里给它一条分隔，读起来不粘连 */
@media (max-width: 1023px) {
  .split-side.sticky-panel {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
  }
}

/* ============================ 成长报告 ============================ */
/* 弱项/已掌握列表用的迷你音素卡，字号比地图页小一档 */
.grid-sounds .sound-card.is-mastered {
  border-color: var(--teal-200, var(--line));
}

/* ============================ 打印 ============================ */
/* 家长偶尔会想把「成长报告」或「体系总览」打出来贴在书桌边 */
@media print {
  .app-side,
  .app-tabbar,
  .app-header,
  .install-host,
  .sticky-panel {
    display: none !important;
  }
  .app-main {
    padding: 0 !important;
  }
  .page-container {
    max-width: none !important;
    padding: 0 !important;
  }
  .card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid var(--line-strong) !important;
  }
  .hero {
    border-radius: 0 !important;
  }
}