/*
 * 行旅札记 · 真实做题页内部试点
 * 启用: ?quizDesign=journal
 * 边界: 只改手机做题态，不改 DOM、题库或判分逻辑。
 */
@media (max-width:768px){
  html.quiz-design-journal{
    --qj-paper:#f3f0e7;
    --qj-paper-raised:#fbfaf5;
    --qj-ink:#183c3a;
    --qj-muted:#667672;
    --qj-cinnabar:#b74a36;
    --qj-brass:#b88b43;
    --qj-correct:#277660;
    --qj-wrong:#a44438;
    --qj-rule:#c9c5b8;
  }

  html.quiz-design-journal body[data-view="quiz"].quiz-answering{
    --quiz-actionbar-height:76px;
    min-height:100dvh;
    overflow-x:clip;
    padding-bottom:calc(var(--quiz-actionbar-height) + env(safe-area-inset-bottom,0px))!important;
    color:var(--qj-ink);
    background:var(--qj-paper)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering main{
    min-height:100dvh;
    background-color:var(--qj-paper)!important;
    background-image:
      radial-gradient(circle at 12% 0,rgba(184,139,67,.065),transparent 34%),
      repeating-linear-gradient(0deg,transparent 0 31px,rgba(24,60,58,.018) 32px)!important;
  }
  html.quiz-design-journal body.quiz-answering #jxTabbar,
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .immersive-nav{
    display:none!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-page.is-answering{
    padding:0 0 calc(var(--quiz-actionbar-height) + 24px)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-stage{
    max-width:none!important;
    min-height:100dvh;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-stage::before{
    content:none!important;
  }

  /* 导航像书页题眉，不再是卡片顶栏。 */
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-session-head{
    position:relative;
    display:grid;
    grid-template-columns:78px minmax(0,1fr) 78px!important;
    align-items:center;
    gap:4px!important;
    margin:0!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px!important;
    border:0!important;
    border-bottom:1px solid rgba(24,60,58,.14)!important;
    background:rgba(243,240,231,.94);
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-session-head>button{
    min-width:44px;
    min-height:44px;
    padding:0!important;
    border:0!important;
    color:var(--qj-ink)!important;
    background:transparent!important;
    font-size:13px!important;
    font-weight:700!important;
    text-align:left!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-session-head>div:nth-child(2){
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-session-head>div:nth-child(2)>span{
    max-width:100%;
    overflow:hidden;
    color:var(--qj-cinnabar)!important;
    font-size:9px!important;
    font-weight:700!important;
    letter-spacing:.08em!important;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-session-head h2{
    max-width:100%;
    margin-top:2px!important;
    color:var(--qj-ink)!important;
    font-family:"Songti SC","STSong","Source Han Serif SC",serif!important;
    font-size:15px!important;
    font-weight:700!important;
    letter-spacing:0!important;
    white-space:nowrap;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-score{
    justify-self:end;
    min-width:0;
    padding:0 0 0 9px!important;
    border:0!important;
    border-left:1px solid rgba(24,60,58,.2)!important;
    border-radius:0!important;
    color:var(--qj-muted)!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:9px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-score span{
    white-space:nowrap;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-score b{
    color:var(--qj-ink)!important;
  }

  /* 带起点的行程线。 */
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-progress{
    position:relative;
    height:24px!important;
    margin:10px 24px 2px 54px!important;
    overflow:visible!important;
    border-radius:0!important;
    background:transparent!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-progress::before{
    content:"起";
    position:absolute;
    top:0;
    left:-31px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border:1px solid var(--qj-brass);
    border-radius:50%;
    color:#8d672c;
    background:var(--qj-paper);
    font-family:"Songti SC","STSong",serif;
    font-size:11px;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-progress::after{
    content:"";
    position:absolute;
    top:11px;
    left:0;
    right:0;
    border-top:1px dashed rgba(24,60,58,.3);
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-progress i{
    position:absolute;
    z-index:1;
    top:10px;
    left:0;
    height:2px!important;
    background:var(--qj-brass)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-progress i::after{
    content:"";
    position:absolute;
    top:-3px;
    right:-4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--qj-cinnabar);
    box-shadow:0 0 0 3px var(--qj-paper);
  }

  /* 用一个阅读平面取代“卡片套卡片”。 */
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-card{
    margin:0!important;
    padding:12px 24px 28px!important;
    border:0!important;
    border-radius:0!important;
    color:var(--qj-ink)!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-card::before{
    content:none!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-meta{
    min-height:30px;
    margin:0 0 12px!important;
    padding:0!important;
    border:0!important;
    color:var(--qj-muted)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-meta>div{
    align-items:center;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .tag.b{
    padding:0!important;
    border:0!important;
    color:var(--qj-cinnabar)!important;
    background:transparent!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.12em;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mode-label{
    color:var(--qj-muted)!important;
    font-size:10px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .review-repeat-toggle{
    display:none!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-report-trigger{
    min-height:44px;
    padding:0 7px!important;
    border:0!important;
    color:var(--qj-muted)!important;
    background:transparent!important;
    font-size:11px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-meta>div:last-child>span:last-child{
    font-variant-numeric:tabular-nums;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-stem{
    display:block!important;
    margin:0 0 18px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-stem>i{
    display:none!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-q{
    color:var(--qj-ink)!important;
    font-family:"Songti SC","STSong","Source Han Serif SC",serif!important;
    font-size:21px!important;
    font-weight:700!important;
    line-height:1.68!important;
    letter-spacing:.005em!important;
  }

  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt{
    min-height:58px!important;
    padding:10px 12px!important;
    gap:10px!important;
    border:1px solid rgba(24,60,58,.22)!important;
    border-radius:6px!important;
    color:var(--qj-ink)!important;
    background:rgba(251,250,245,.76)!important;
    box-shadow:none!important;
    font-size:16px!important;
    line-height:1.5!important;
    transition:background .14s ease,border-color .14s ease,transform .14s ease!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt:active{
    transform:scale(.992)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt .k{
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    border:1px solid #aeb5ae!important;
    border-radius:50%!important;
    color:var(--qj-ink)!important;
    background:transparent!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:12px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt-copy{
    font-size:16px!important;
    font-weight:650!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-stage .opt.selected{
    border-color:var(--qj-ink)!important;
    background:#e4e9df!important;
    box-shadow:inset 4px 0 0 var(--qj-ink)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .practice-stage .opt.selected .k{
    border-color:var(--qj-ink)!important;
    color:#fff!important;
    background:var(--qj-ink)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.correct-selected,
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.correct-answer,
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.missed{
    border-color:var(--qj-correct)!important;
    background:#e1ede5!important;
    box-shadow:inset 4px 0 0 var(--qj-correct)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.wrong-selected{
    border-color:var(--qj-wrong)!important;
    background:#f4e4df!important;
    box-shadow:inset 4px 0 0 var(--qj-wrong)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.correct-selected .k,
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.correct-answer .k,
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.missed .k{
    border-color:var(--qj-correct)!important;
    color:#fff!important;
    background:var(--qj-correct)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt.wrong-selected .k{
    border-color:var(--qj-wrong)!important;
    color:#fff!important;
    background:var(--qj-wrong)!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt-state{
    font-size:11px!important;
    font-weight:800!important;
  }

  html.quiz-design-journal body[data-view="quiz"].quiz-answering .multi-submit{
    min-height:48px;
    margin-top:12px;
    border:0;
    border-radius:7px;
    color:#fff;
    background:var(--qj-ink);
  }

  /* 判分后形成一段朱批，而不是另一张结果卡。 */
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-result{
    margin:24px 0 0!important;
    padding:16px 0 4px!important;
    border:0!important;
    border-top:2px solid var(--qj-cinnabar)!important;
    border-radius:0!important;
    color:#465c58!important;
    background:transparent!important;
    box-shadow:none!important;
    animation:qj-note-in .22s ease-out;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .result-title{
    display:block;
    position:relative;
    min-height:38px;
    padding:8px 0 0 48px!important;
    color:var(--qj-cinnabar)!important;
    font-family:"Songti SC","STSong","Source Han Serif SC",serif!important;
    font-size:17px!important;
    font-weight:700!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .result-title::before{
    content:"批";
    position:absolute;
    top:0;
    left:1px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:2px solid currentColor;
    color:var(--qj-cinnabar);
    font-family:"Songti SC","STSong",serif;
    font-size:18px;
    transform:rotate(-4deg);
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .answer-reveal{
    margin:10px 0 0!important;
    padding:11px 12px!important;
    border:0!important;
    border-left:2px solid var(--qj-brass)!important;
    border-radius:0!important;
    color:#465c58!important;
    background:rgba(184,139,67,.08)!important;
    font-size:13px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .answer-compare em{
    white-space:normal!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-exp{
    margin:14px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    color:#465c58!important;
    background:transparent!important;
    font-family:"Songti SC","STSong","Source Han Serif SC",serif!important;
    font-size:15px!important;
    line-height:1.8!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-exp summary{
    min-height:44px;
    display:flex;
    align-items:center;
    color:var(--qj-cinnabar)!important;
    font-family:inherit!important;
    font-weight:700!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-exp-divider{
    border-color:rgba(24,60,58,.16)!important;
  }

  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-actionbar{
    bottom:0!important;
    min-height:var(--quiz-actionbar-height)!important;
    grid-template-columns:44px 46px minmax(0,1fr)!important;
    gap:9px!important;
    padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid rgba(24,60,58,.17)!important;
    background:rgba(243,240,231,.96)!important;
    box-shadow:none!important;
    backdrop-filter:blur(12px);
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-prev{
    width:44px!important;
    height:48px!important;
    border:1px solid rgba(24,60,58,.3)!important;
    border-radius:7px!important;
    color:var(--qj-ink)!important;
    background:transparent!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-progress{
    color:var(--qj-muted)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:11px!important;
    font-variant-numeric:tabular-nums;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-progress b{
    color:var(--qj-ink)!important;
    font-size:17px!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-actions button{
    min-height:48px!important;
    border-radius:7px!important;
    box-shadow:none!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-skip{
    border:1px solid rgba(24,60,58,.3)!important;
    color:var(--qj-ink)!important;
    background:transparent!important;
  }
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-submit,
  html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-mobile-next{
    border:1px solid var(--qj-cinnabar)!important;
    color:#fff!important;
    background:var(--qj-cinnabar)!important;
  }

  @media (hover:none){
    html.quiz-design-journal body[data-view="quiz"].quiz-answering .quiz-options .opt:hover{
      transform:none!important;
      border-color:rgba(24,60,58,.22)!important;
      background:rgba(251,250,245,.76)!important;
      box-shadow:none!important;
    }
  }
}

@keyframes qj-note-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html.quiz-design-journal *,
  html.quiz-design-journal *::before,
  html.quiz-design-journal *::after{
    animation:none!important;
    transition:none!important;
  }
}