/* 页面层：入口页、列表页、练习页、平板分栏。
   断点只有两个：768（满宽 + 分栏）、1024（分类栏加宽）。
   导航只有底部导航一套，任何宽度都不再换侧栏。 */

@layer pages {
  /* ---- 入口验证 ---- */
  .login-shell {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg);
  }

  .login-box {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }

  .login-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 7px;
  }

  .login-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 30px;
  }

  .login-code {
    width: 100%;
    border: 1px solid var(--line-input);
    border-radius: var(--r-md);
    padding: 11px 12px;
    font-size: 15px;
    letter-spacing: 3px;
    text-align: center;
    background: var(--card);
  }

  .login-code:focus {
    outline: none;
    border-color: #8a8a82;
  }

  /* 数字验证码：字距拉开好念，但 placeholder 不能跟着拉开，否则像乱码 */
  .login-num {
    letter-spacing: 6px;
    font-variant-numeric: tabular-nums;
  }

  .login-num::placeholder {
    letter-spacing: 0;
    font-size: 13px;
    color: var(--text-3);
  }

  /* 居中对齐的空输入框，光标正好压在 placeholder 上，聚焦时把提示收掉 */
  .login-num:focus::placeholder {
    color: transparent;
  }

  .login-btn {
    width: 100%;
    background: var(--btn);
    color: #fff;
    border-radius: var(--r-md);
    padding: 11px 0;
    font-size: 13px;
    font-weight: 500;
    margin-top: 12px;
    min-height: 42px;
  }

  .login-err {
    font-size: 12px;
    color: var(--danger);
    margin-top: 14px;
    line-height: 1.6;
  }

  /* 测试模式提示条：故意做得显眼，免得带着它上线 */
  .login-dev {
    display: inline-block;
    margin: 2px 0 12px;
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--danger);
    background: #fdf3f3;
    border: 1px solid var(--danger-line);
    border-radius: var(--r-sm);
  }

  /* 第二步的次要动作 */
  .login-again {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-2);
    background: none;
    min-height: 36px;
  }

  .login-again:hover {
    color: var(--text);
  }

  .login-foot {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 20px;
    line-height: 1.75;
  }

  .login-reset {
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- 列表页 ---- */
  .list {
    padding-bottom: 8px;
  }

  /* 首行用重一点的线，和导航条分开 */
  .list > .swipe:first-child,
  .list > .row:first-child {
    border-top-color: var(--line);
  }

  /* 宽屏：表单、导入、练习这类单列页面收进 720 的栏里居中。
     不收敛的话输入框会被拉到 1000 宽，一行字要横着扫半天。
     列表页（分类 / 短语）保持满宽 —— 表格本来就该占满屏 */
  @media (min-width: 768px) {
    .main.flush > * {
      max-width: var(--max-wide);
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* ---- 分栏骨架 ---- */
  .shell-split {
    flex: 1;
    display: flex;
    min-height: 0;
    align-items: stretch;
    /* 底部导航是 fixed，内容要自己让出高度，否则最后一条被压住。
       横屏也留着这条 —— 底部导航在任何宽度下都在 */
    padding-bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
  }

  .pane {
    flex: 1;
    min-width: 0;
  }

  .rail {
    display: none;
  }

  .rail,
  .pane {
    min-height: 0;
  }

  .rail-head {
    padding: 14px var(--gutter) 6px;
    font-size: 11px;
    color: var(--text-3);
  }

  .rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-2);
    border-left: 2px solid transparent;
  }

  .rail-item .n {
    font-size: 12px;
  }

  .rail-item .e {
    font-size: 10px;
    margin-top: 1px;
  }

  .rail-item.on {
    background: var(--bg);
    color: var(--text);
    border-left-color: var(--text);
  }

  @media (min-width: 768px) {
    .rail {
      display: block;
      width: 152px;
      flex-shrink: 0;
      border-right: 1px solid var(--line);
      overflow-y: auto;
      background: var(--bg);
    }

    .rail-item {
      border-radius: 0;
      border-left-width: 2px;
    }

    /* 分栏时行距收紧一点，一屏能多看两条 */
    .shell-split .row,
    .shell-split .swipe .front {
      padding-top: 11px;
      padding-bottom: 11px;
      min-height: 52px;
    }
  }

  /* 横屏：左侧分类栏放宽一点，别让它挤在 1024 宽的屏幕上像一条细缝。
     导航交给底部导航，所以这里不再出第三列 */
  @media (min-width: 1024px) {
    .rail {
      width: var(--rail-cat);
    }
  }

  /* ---- 练习页 ----
     播放条不做 fixed：.app 是 flex 列、main 是 flex:1，播放条自然落到屏幕底部。
     fixed 反而要在三个地方算 padding 去躲它。 */
  .practice-shell .main {
    padding-bottom: 0;
  }

  .practice-shell .practice {
    max-width: var(--max);
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
  }

  /* 播放条 sticky 而不是 fixed：内容短时沉底，内容长时钉在视口底部，
     不用在三个地方算 padding 去躲它。 */
  .practice-bar {
    position: sticky;
    bottom: 0;
    z-index: 25;
    width: 100%;
    background: var(--bg);
    border-top: 1px solid var(--line);
  }

  /* 随机练习带底部导航，播放条要让出导航的高度 */
  .practice-bar.with-tabs {
    bottom: calc(var(--nav-h) + var(--safe-b));
  }

  .practice-shell .toast {
    bottom: 110px;
  }

  .note-line {
    padding: 4px 16px 0;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.7;
  }

  .meta-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 var(--gutter);
    font-size: 11px;
    color: var(--text-3);
  }

  .meta-line .right {
    margin-left: auto;
  }

  @media (min-width: 768px) {
    .practice-shell .practice {
      font-size: 20px;
      line-height: 2.2;
      max-width: var(--max-wide);
      padding-left: 24px;
      padding-right: 24px;
    }

    .practice-shell .zh {
      font-size: 13px;
    }

    .practice-shell .sent {
      --spk-size: 24px;
      --en-line: 2.2em;   /* 宽屏 .practice 的 line-height 是 2.2 */
    }

    .hint {
      max-width: var(--max-wide);
      margin: 0 auto;
      padding-left: 24px;
      padding-right: 24px;
    }

    /* 宽屏：顶部信息、备注、播放条跟正文收进同一栏。
       不收的话文字贴着屏幕最左边，播放按钮横跨 1024，看着像没排版 */
    .practice-shell .meta-line,
    .practice-shell .note-line {
      max-width: var(--max-wide);
      margin: 0 auto;
      padding-left: 24px;
      padding-right: 24px;
    }

    .practice-shell .playbar {
      padding-left: max(16px, calc((100% - var(--max-wide)) / 2 + 24px));
      padding-right: max(16px, calc((100% - var(--max-wide)) / 2 + 24px));
    }
  }

  /* ---- 设置 ---- */
  .settings-form {
    display: block;
  }

  .settings-foot {
    padding: 14px var(--gutter);
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.7;
  }

  .why {
    font-size: 10px;
    color: var(--danger);
    margin-left: 4px;
  }

  /* ---- 短语表单：自动切句 + 逐句中文 ---- */
  .split-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--gutter) 4px;
    font-size: 11px;
    color: var(--text-3);
  }

  .link {
    font-size: 11px;
    color: var(--link);
    padding: 4px 0;
  }

  .split-box {
    padding: 0 var(--gutter);
  }

  .split-row {
    padding: 9px 0;
    border-top: 1px solid var(--line-soft);
  }

  .split-en {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
  }

  .zh-input {
    margin-top: 6px;
    padding: 7px 9px;
    font-size: 12px;
    border-radius: var(--r-sm);
    border-color: var(--line);
  }

  .split-empty {
    padding: 14px 0;
    font-size: 11px;
    color: var(--text-3);
  }

  /* ---- 拍照识别 ----
     主按钮和「相册」并排：手机上前者直接开相机，后者去相册挑。
     桌面浏览器忽略 capture，两个入口都退化成选文件，行为不歧义。 */
  .shot-bar {
    display: flex;
    gap: 8px;
    padding: 0 var(--gutter);
    margin-bottom: 10px;
  }

  .shot-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-input);
    border-radius: var(--r-md);
    background: var(--card);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
  }

  .shot-btn:active {
    background: var(--bg-out);
  }

  .shot-btn[disabled] {
    opacity: 0.5;
  }

  .shot-btn.ghost {
    flex: 1;
    font-weight: 400;
    color: var(--text-2);
  }

  .shot-file {
    display: none;
  }

  /* 进度和结果都写在这一行，不弹层：识别要 5~10 秒，用户眼睛就在表单上 */
  .shot-status {
    padding: 0 var(--gutter);
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-3);
  }

  .shot-status[hidden] {
    display: none;
  }

  .shot-status.ok {
    color: var(--ok-fg);
  }

  .shot-status.err {
    color: var(--danger);
  }

  /* 字段标题右侧挂一个小动作（如「AI 翻译成中文」） */
  .field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .field-head .label {
    margin-bottom: 0;
  }

  /* 表单底部主操作。删除已收进导航右上角，这里只放保存 */
  .form-footer {
    padding: 26px var(--gutter) calc(32px + var(--safe-b));
  }

  .form-footer .btn {
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
  }

  /* ---- 批量导入 ---- */
  .import-list {
    padding: 0 var(--gutter);
  }

  .import-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 12px;
  }

  .import-item .tick {
    color: var(--ok-fg);
    flex-shrink: 0;
    font-size: 12px;
  }

  .import-item .txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .import-item .count {
    font-size: 11px;
    color: var(--text-3);
    flex-shrink: 0;
  }

  .import-foot {
    margin-top: auto;
    padding: 12px var(--gutter) 14px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.7;
  }
}