/* cs1_index_style.css */

:root{
    --bar-hover-color: hsl(0, 0%, 90%);
    --background-color:  hsl(0, 0%, 95%);
    --icon-color: hsl(0, 0%, 15%);
    --blue: #0066cc;
    --weak-color: hsl(0, 0%,45%);
    --logo-height: 49px;
    --logo-width: 50px;

    /* 顶部导航栏的高度 */
    --nav-height: 52px;


    /* 题目区块相关变量（testing-engine.css 会用到，放在这里统一管理设计token） */
    --code-bg: hsl(0, 0%, 96%);
    --code-text: hsl(0, 0%, 15%);
    --answer-bg: hsl(140, 40%, 95%);
    --answer-text: hsl(140, 45%, 25%);
    --divider-color: hsl(0, 0%, 87%);
}


/* 主页 */
body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--background-color);
    min-width: 828px;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, hsl(207, 60%, 96%), hsl(260, 50%, 96%));
}

#header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 24px;
    margin-bottom: 18px;
    /* 沉浸模式要平滑收起，不是瞬间消失。
       max-height 得有个初始值，否则 0 到 auto 之间没法过渡 */
    overflow: hidden;
    max-height: 300px;
    transition: opacity 0.32s ease, max-height 0.35s ease,
                padding 0.35s ease, margin 0.35s ease;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;      /* 单独控制logo和标题的距离，调这个数值就行 */
}

#logo{
    display: flex;
    margin-top: 4px;
    width: var(--logo-width);
    /* 原来这里写的是 var(var(--logo-height))，var 套了两层是无效 CSS，
       height 实际上一直没生效（靠图片自身比例撑着） */
    height: var(--logo-height);
}

#web-header{
    text-decoration: none;
    display: inline-block;
    margin-right: 16px;
}

#web-header h1{
    text-align: center;
    font-size: 2.4rem;
    color: black;
    margin: 0;
}



@media (max-width: 1170px) {  /* 根据屏幕大小来调整字体大小 */
    #web-header h1{
        font-size: 2.1rem;
    }
}

.back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--blue);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.back-home-link:hover {
    background-color: hsl(207, 70%, 94%);
}

.back-home-arrow {
    font-size: 1rem;
}




/* 目录栏 */
.nav-bar{
    position: sticky;
    top: 0;  /* 吸顶位置 */
    text-align: center;
    background-color: white;
    /* 高度固定下来，侧边栏要贴在它下面，需要一个可靠的基准。
       上下 padding 去掉，改用 line-height 撑高，这样 --nav-height 说多高就是多高 */
    height: var(--nav-height);
    line-height: var(--nav-height);

    padding: 0;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.05);       /* 轻微阴影，制造层次感 */
    font-size: 0;   /* 消除子元素之间因为换行产生的空隙 */
    z-index: 100;  /* z-index 越大，涂层越高 */
}

.bar-items{
    text-decoration: none;
    color: black;
    display: inline-block;
    line-height: var(--nav-height);
    padding: 0 110px;
    font-size: 1.05rem;
    transition: color 0.2s ease;
}

.bar-items:hover {
    font-weight: 450;
    background-color: hsl(0, 0%, 95%);
}

.bar-items.active {
    font-weight: 450;
    background-color: hsl(0, 0%, 92%);
}

.bar-items.active:hover {
    background-color: hsl(0, 0%, 90%);
}


/* hover背景色递进：绿 → 黄绿 → 橙 → 红 */
#test1:hover { background-color: hsl(140, 40%, 95%); }
#test2:hover { background-color: hsl(45, 85%, 94%); }
#test3:hover { background-color: hsl(28, 85%, 93%); }
#final:hover { background-color: hsl(0, 60%, 93%); }

/* active背景色递进：绿 → 黄绿 → 橙 → 红 */
#test1.active { background-color: hsl(140, 40%, 90%); }
#test2.active { background-color: hsl(45, 85%, 89%); }
#test3.active { background-color: hsl(28, 85%, 88%); }
#final.active { background-color: hsl(0, 60%, 88%); }


@media (max-width: 1170px) {
    .bar-items {
        padding: 0 55px;
    }
}




/* 切换器和内容上下堆叠。原来是 sidebar 和 content 左右并排的 */
.main-layout {
    display: flex;
    flex-direction: column;
    /* gap 去掉了：侧边栏自己带右边线，内容区自己带左内距，
       两者之间不该再有一段透出页面背景的缝——那正是「浮动卡片」的观感来源 */
    flex: 1 0 auto;             /* 撑满剩余空间，把 footer 推到窗口底部 */
}




/* ---------- 板块切换器 ---------- */
/* 取代原来的侧边栏。三个板块横向平铺，省下左边那 213px 给正文。
   为什么不做成真正的轮播（选中项永远转到中间）：只有三个项，
   它们本来就全部可见，转起来没有隐藏任何东西，却带来了
   "Practice 的上一个是谁" 这种循环顺序的困惑，以及两端的空位。
   这里标签位置固定，滑动的是那张白卡——动画反而更顺。 */
.section-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    align-self: flex-start;
    /* 直接坐在原来 <h2> 的位置，由这个组件充当页面标题
       （Practice 那个 <h2> 已经删掉了）。
       不套胶囊容器：那会让它读起来像个控件而不是标题，
       只留文字和两侧箭头，层级靠字号本身建立 */
    margin: 40px 0 28px 46px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-height: 80px;
    overflow: hidden;
    transition: opacity 0.28s ease, transform 0.28s ease, margin 0.28s ease,
                padding 0.28s ease, max-height 0.28s ease;
}

/* 轨道：三个标签同时可见——中间那个大而深，两侧小而灰，是"预览"。
   宽度和每个标签的横向位置都由 JS 实测后写成内联样式，
   因为三个词长短不一，位置得按各自的实际宽度算才均匀。
   这里的 280px 只是脚本没跑起来时的兜底 */
.switcher-track {
    position: relative;
    width: 280px;
    height: 52px;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.switcher-item {
    position: absolute;
    top: 50%;
    left: 50%;
    text-decoration: none;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    white-space: nowrap;
    text-align: center;
    /* 连点切换的时候不要把这个词选中变成高亮的蓝块 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    /* 两侧的缩小用 scale 而不是 font-size：
       font-size 会改变元素的布局宽度，而下面的横向位置是按宽度算出来的，
       两个动画互相追着跑，切换时会抖。scale 不影响布局宽度，量出来的值稳定 */
    --x: 0px;
    --scale: 0.5;
    transform: translate(-50%, -50%) translateX(var(--x)) scale(var(--scale));
    transform-origin: center center;

    /* 侧项：小、灰、半透明，读起来是"下一个是什么"的提示，不是可选项之一 */
    color: hsl(220, 9%, 58%);
    opacity: 0.55;

    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease,
                color 0.28s ease,
                text-shadow 0.2s ease;
}

/* 侧项只显示首字母，当前项显示全称。
   文字由伪元素输出，内容从 data-* 读——直接写在标签里的话没法用 CSS 截字符。
   注意：伪元素的内容读屏软件不一定读得到，所以标签里另外放了一个
   .switcher-sr，视觉上藏起来，读屏软件读到的始终是完整单词 */
.switcher-item::before {
    content: attr(data-initial);
}

.switcher-item.active::before {
    content: attr(data-label);
}

/* ---------- 子页标题模式 ---------- */
/* 进到 Revision 的子页时，切换器整个变成一个静态标题。
   三个标签全藏掉，标题由容器的伪元素输出，内容从 data-subpage-title 读——
   跟侧项显示首字母是同一套做法：文字放在属性上，由 CSS 决定显示哪个。
   字号和位置跟当前项完全一致，所以切进子页时视觉上是"原地换词"，不会跳 */
.section-switcher.is-subpage .switcher-item {
    opacity: 0;
    pointer-events: none;
}

.section-switcher.is-subpage .switcher-track::after {
    content: attr(data-subpage-title);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: hsl(220, 28%, 11%);
}

/* 当前项：恢复原尺寸、用最深的颜色。
   --scale 回到 1 是关键——不设的话它会沿用上面的默认值 0.5，
   当前项就跟侧项一样是缩小的灰字，看起来像没选中 */
.switcher-item.active {
    --scale: 1;
    color: hsl(220, 28%, 11%);
    opacity: 1;
}

/* 视觉隐藏但保留给读屏软件。不能用 display: none 或 visibility: hidden，
   那样读屏软件也读不到了 */
.switcher-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 侧项只有一个字母，点击区域太小很难点中。
   用 ::after 撑出一块透明的热区，而不是给元素本身加 padding——
   padding 会撑大 offsetWidth，而三个标签的横向位置是按宽度算出来的，
   加了 padding 位置就全乱了。伪元素是绝对定位的，不参与布局宽度。
   热区跟着 scale 一起缩小，所以要除以缩放比例才是屏幕上的实际大小 */
.switcher-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 28px / var(--scale));
    height: calc(1.6em / var(--scale));
}

/* 当前项本来就够大，不需要额外热区 */
.switcher-item.active::after {
    width: 100%;
    height: 1.6em;
}

/* 侧项悬停：变深一点 + 加投影。
   不加背景色——那会让它看起来像个按钮，破坏"预览"的读法。
   用 :not(.active) 限定，是因为当前项的悬停规则不一样：
   它本来就是最深的颜色，再变色只会显得脏，所以只给投影 */
.switcher-item:not(.active):hover {
    opacity: 0.85;
    color: hsl(220, 20%, 30%);
    text-shadow: 0 2px 6px hsla(220, 30%, 25%, 0.28);
}

/* 当前项不需要这层投影，它已经是最重的那个了 */
/* 当前项悬停：只加投影，颜色不动 */
.switcher-item.active:hover {
    text-shadow: 0 3px 8px hsla(220, 30%, 25%, 0.3);
}

/* 具体内容 */
.content {
    flex: 1;
    min-width: 0;          /* flex 子项默认不会小于内容宽度，不加这行长内容会把布局撑破 */
    padding: 0 36px 0 52px;
    transition: padding-top 0.35s ease;

    animation: contentFadeIn 0.9s ease forwards;
}



@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Practice / Testing / Revision 三个区块的显隐切换：
   同一时间只显示带 .active 的那一块，其他全部隐藏 */
.test-section {
    display: none;
    opacity: 0;
}

.test-section.active {
    display: block;
}


/* ---------- 沉浸模式 ---------- */
/* 把跟题目无关的东西全部平滑收起：页头、导航栏、板块切换器、页脚。
   用 max-height 一起收（而不是只有 opacity），是为了让下面的内容往上补位，
   否则会留下一大块空白。
   
   这套 class 跟考试专注模式（.exam-focus-hide）是独立的两套，
   同时生效也没问题——两者都是"收起"，取并集就是收起。 */
body.immersive-mode #header-wrapper,
body.immersive-mode .nav-bar,
body.immersive-mode .section-switcher,
body.immersive-mode #footer-container {
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}

/* 上面的东西都收了，但顶部得留出足够的呼吸空间。
   注意开关按钮是 position: fixed（top: 14px、高 34px），【不占版面空间】，
   所以这里留白不够的话内容会跟按钮挤在一起。
   44px 刚好让第一行内容落在按钮下方 */
body.immersive-mode .content {
    padding-top: 44px;
}

/* 开关按钮：fixed 定位，沉浸模式下页面别的东西都收起了，
   它必须留在外面，否则进去就出不来。
   z-index 要压过导航栏（100）和 Cribsheet 里的浮动工具条 */
.immersive-toggle {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 200;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid hsla(220, 20%, 86%, 0.9);
    border-radius: 999px;
    background: hsla(0, 0%, 100%, 0.88);
    color: hsl(220, 10%, 45%);
    cursor: pointer;
    font-size: 0.8rem;
    box-shadow: 0 1px 3px hsla(220, 30%, 25%, 0.1);
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}

.immersive-toggle:hover {
    background: #ffffff;
    border-color: hsla(220, 20%, 70%, 0.9);
    color: hsl(220, 22%, 18%);
    box-shadow: 0 3px 10px hsla(220, 30%, 25%, 0.16);
}

.immersive-toggle:active {
    transform: scale(0.94);
}

/* 打印时不需要这个按钮 */
@media print {
    .immersive-toggle {
        display: none !important;
    }
}

/* 跳过过渡。交卷时给页面骨架临时加上，让它瞬间恢复而不是慢慢展开。
   !important 是必要的：这几个元素各自的 transition 写在自己的规则里，
   优先级跟这条一样，不加就盖不过去 */
.skip-transition {
    transition: none !important;
}

/* 准备阶段（点了 Get Ready 之后）和考试期间收起的东西是同一批：
   页头、板块切换器、导航栏、页脚。
   
   但不能直接复用 .exam-focus-hide 这个 class：那是
   enterExamFocusMode() 加上的，而那个函数只在【真正开考】时才调。
   准备阶段是独立的一步，所以每条规则都加一个 body.exam-ready-mode 的变体，
   两套状态互不干扰。
   
   下面几条规则的选择器都是成对的，改一条记得看看要不要改另一条。 */

/* 考试期间把页头也收起来。
   #header-wrapper 上已经有 overflow / max-height / transition
   （沉浸模式那边加的），这里只要把值收成 0 就能平滑收起 */
#header-wrapper.exam-focus-hide,
body.exam-ready-mode #header-wrapper {
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}

/* 考试专注模式：切换器和 navbar 平滑收起，而不是瞬间消失
   （由 testing-engine.js 里的 enterExamFocusMode / exitExamFocusMode 触发） */

.section-switcher.exam-focus-hide,
body.exam-ready-mode .section-switcher {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;   /* 收起过程中不能被点到 */
}

.nav-bar {
    overflow: hidden;
    max-height: 120px;   /* 数值只要大于导航栏实际高度即可 */
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, padding 0.4s ease;
}

.nav-bar.exam-focus-hide,
body.exam-ready-mode .nav-bar {
    opacity: 0;
    transform: translateY(-12px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* footer 同样跟着一起收起；加载完成后由 JS 加上 .footer-loaded 才淡入显示，
   考试专注模式再淡出隐藏。这里统一用 transition（不用 animation），
   避免两者作用在同一个属性上互相覆盖导致过渡失效。 */
#footer-container {
    overflow: hidden;
    max-height: 400px;   /* 数值只要大于 footer 实际高度即可 */
    opacity: 0;
    transition: opacity 0.6s ease, max-height 0.4s ease;
}

/* 页脚是次要信息，不该跟内容抢注意力：字号收小、整体压暗一档 */
#footer-container.footer-loaded {
    opacity: 0.72;
}

#footer-container {
    font-size: 0.82rem;
}

#footer-container:hover {
    opacity: 1;
}

/* 页脚在两种情况下收起：
   - 准备阶段（body.exam-ready-mode）：点了 Get Ready 之后，
     页面上只该剩考卷卡片和说明
   - 考试期间（.exam-focus-hide，由 enterExamFocusMode 加上）
   
   准备阶段用 body class 而不是 .exam-focus-hide，是因为
   enterExamFocusMode 只在真正开考时才调——两个阶段要分开控制 */
#footer-container.exam-focus-hide,
body.exam-ready-mode #footer-container {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
}