/* ----------------------------------------------------------------- *
 * index.css — index.html-only styles                                *
 *                                                                  *
 * Loaded only by the home page (index.html). terminal.css handles  *
 * the global theme; this file owns everything unique to home:      *
 *   · friend cards, subjects, h2 rhythm                            *
 *   · footer margin override (base in terminal.css)                *
 *   · footer-nav (JS-driven prev/next/back-to-top)                 *
 *   · interactive prompt (cmd-form)                               *
 *   · progressive section routing (.app main > section ...)        *
 *                                                                  *
 * The body layout (720px centered card + sticky footer + font-     *
 * feature-settings) lives in terminal.css. The                     *
 * `border-radius: 0 !important` reset stays here because 404.html *
 * legitimately uses a 2px rounded corner on inline <code> chips    *
 * inside its framed block.                                         *
 * ----------------------------------------------------------------- */

/* fully squared: zero out all rounded corners (override vendor) */
*, *::before, *::after { border-radius: 0 !important; }

/* (pre.prompt was replaced by the interactive cmd-form in prompt-block — see js-only rule below) */

/* .framed-block, .aside and .cta-link moved to terminal.css (shared by index.html / 404.html) */

/* ---------- friend card avatar fallback ---------- */
.friend-card img.avatar-fallback {
  background: var(--background);
  object-fit: contain;
  padding: 0;
  border-width: 2px;
}

/* ---------- heading rhythm: 上疏下紧，制造"上方开间、下方贴上" 视觉平衡 ---------- */
h2 {
 margin: 14px 0 14px;
}

/* ---------- progressive section routing ---------- */
/* root state markers (set by JS at boot):
 *   body.app          - JS activated, route by tab
 *   body[data-tab]    - current tab id (home / plans / habits / friends / about)
 * default (no JS / app absent): all sections stacked & fully readable
 */
main > section { display: block; padding-top: 24px; }
/* app mode: hide non-active, show active */
.app main > section { display: none; }
.app main > section.active { display: block; }
/* home in app mode: hide every section (incl. .active), higher specificity so no !important needed */
.app[data-tab="home"] main > section { display: none; }

/* ---------- friend card ---------- */
.friend-card {
 display: flex; gap: 16px; align-items: center;
 margin-top: 32px; /* 与上方 blockquote 拉开间距 */
 padding: 16px;
 border: 1px solid var(--foreground);
}
.friend-card img {
 width: 72px; height: 72px;
 object-fit: cover; border: 2px solid var(--accent);
 padding: 0; margin: 0;
}
.friend-meta { flex: 1; min-width: 0; }
.friend-name a { font-weight: 600; }
.friend-bio { margin: 4px 0; }
.friend-links { font-size: 0.85em; }

/* ---------- 学习科目：三层分组（通识 / CS基础 / 工程实践） ---------- */
.subjects {
 list-style: none;
 padding: 0;
 margin: 8px 0;
}
.subjects li {
 margin: 10px 0;
 padding-left: 14px;
 border-left: 2px dashed color-mix(in srgb, var(--foreground) 25%, transparent);
}
.subjects h4 {
 margin: 0 0 4px;
 color: var(--accent);
 font-size: 1em;
}
.subjects p {
 margin: 0;
}
.subjects ul {
 margin: 4px 0 0;
 padding-left: 18px;
}
.subjects abbr {
 text-decoration: underline dotted;
 text-underline-offset: 3px;
 cursor: help;
}
.subjects strong {
 color: var(--accent);
 font-weight: 600;
}

/* ---------- footer / project link ---------- */
/* footer base (padding-top + border-top) now in terminal.css; home overrides margin-top here */
footer { margin-top: 0; }
footer p { margin: 4px 0; }
/* .cta-link, .meta, .beian, .gongan-icon moved to terminal.css (shared by index.html / 404.html) */
/* 回到顶部 + 左右导航箭头：居中按钮组 */
.footer-nav {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 2px;
 margin: 6px 0 4px;
}
/* no-JS 隐藏整个 footer-nav：箭头在堆叠视图里没有可去的上一个/下一个，回到顶部也无意义 */
body:not(.app) .footer-nav { display: none; }
/* 首页（app 模式下）隐藏导航箭头与"回到顶部" */
.app[data-tab="home"] .footer-nav { display: none; }
.footer-nav button {
 padding: 2px 8px;
 font: inherit;
 font-size: 0.78em;
 color: color-mix(in srgb, var(--foreground) 55%, transparent);
 background: transparent;
 border: none;
 cursor: pointer;
 text-align: center;
 transition: color .15s ease;
}
.nav-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.8em;
 padding: 2px 0;
 font-size: 1em !important;
 line-height: 1;
}
.footer-nav button:hover,
.footer-nav button:focus-visible {
 color: var(--accent);
 outline: none;
}
.back-to-top {
 display: block;
 padding: 2px 8px;
}
/* ---------- per-section command header (decorative, removed) ----------
 * 原始：<p class="cmd-line">cat X.md</p> + ::before '>' 作为"看起来在打命令"的装饰。
 * 已从 4 个 section 里删除全部 4 处 HTML 节点；保留这条规则是为了有人
 * 重新插入该类名时立刻生效（"档位"保证），并备忘它曾存在的用途：
 *   · JS 模式下用真终端（.cmd-form），装饰行没有意义。
 *   · no-JS 模式下没有可用输入，装饰行会误导（看起来能输但不能）。
 */
.cmd-line { display: none; }

/* ---------- interactive prompt (after <main>) ---------- */
.js-only { display: none; }
.app .js-only { display: block; }
/* 顶部 prompt-block 作为 <section>：覆盖 bundle 的 border-top + padding 默认值 */
.prompt-block {
 margin: 0;
 margin-bottom: 30px;
 border-top: 0;
 padding: 0;
}
/* cmd-form 现在包含 output + prompt-line 两部分。终端窗口感设计：
  - 实线 accent 边框（呼应 BSOD 蓝主题）
  - 顶部 inset 1px 高光，模拟光源从上方
  - 背景轻微顶深底浅渐变，给屏幕感
  - padding 略宽松，"窗口内"留白 */
.cmd-form {
 display: flex;
 flex-direction: column;
 border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
 box-shadow:
   inset 0 1px 0 color-mix(in srgb, var(--foreground) 12%, transparent),
   inset 0 -1px 0 color-mix(in srgb, var(--background) 40%, transparent);
 background: linear-gradient(
   to bottom,
   color-mix(in srgb, var(--foreground) 6%, transparent),
   color-mix(in srgb, var(--foreground) 3%, transparent)
 );
 padding: 10px 14px;
 color: color-mix(in srgb, var(--foreground) 70%, transparent);
}
/* prompt-line：prompt-mark + input 橫排 */
.cmd-prompt-line {
 display: flex;
 align-items: center;
 gap: 0.5em;
}
.cmd-prompt-line .prompt-mark {
 color: var(--foreground);
 user-select: none;
 font-weight: 400;
 font-size: 0.75em;  /* 与 input / static-cmd-output 统一 */
}
.cmd-prompt-line input {
 flex: 1;
 border: none;
 padding: 0;
 outline: none;
 background: transparent;
 color: var(--foreground);
 font-family: inherit;        /* 保留 input 字体（不用 system 字体覆盖） */
 font-size: 0.75em;            /* 与 static-cmd-output 统一：12px */
 appearance: none;
 caret-color: var(--accent);
}
.cmd-prompt-line input::placeholder {
 color: color-mix(in srgb, var(--foreground) 35%, transparent);
}
/* output：复用 form 的边框/背景，不独立设。 */

/* hints 区：input 下方的临时提示（Tab 多匹配等）。仅 1 行：
 * 超出截断不滚；input 变化时由 JS 立即清空。
 * 颜色更淡、紧贴 input、不参与历史轨迹。 */
.cmd-hints {
 font-size: 0.75em;
 font-family: 'Fira Code', 'Sarasa Mono SC', monospace;
 color: color-mix(in srgb, var(--foreground) 50%, transparent);
 /* 无 margin/padding：empty 时 display:none，有内容时紧贴 prompt-line */
 margin: 0;
 padding: 0;
 max-height: 1.4em;
 overflow: hidden;
}
.cmd-hints:empty { display: none; }
.cmd-hints .line.candidates {
 display: block;
 margin: 0;                    /* 覆盖 terminal.css 中 <p> 默认的 25px 垂直 margin */
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;  /* 超出裁切，提示用户可继续输入 */
 /* 无 padding-left：候选紧贴左边，与 input prompt-mark 对齐（同一列） */
 min-height: 1.4em;
 box-sizing: border-box;
}


/* === static-cmd output color ===
 *  Command tokens in bright blue, output in muted foreground.
 *  Interactive (JS) commands also append .static-cmd sections here.
 */
.static-cmd-output {
 color: color-mix(in srgb, var(--foreground) 70%, transparent);
}
/* === static-cmd: terminal-style info blocks (no-JS fallback) ===
 *  Visible whether or not JS runs. Mimics the interactive cmd look.
 */
.static-cmd {
 border-top: none;
 padding: 12px 0;
}
.static-cmd pre {
 margin: 0;
 font-family: 'Fira Code', 'Sarasa Mono SC', monospace;
 font-size: 0.75em;
 line-height: 1.6;
 white-space: pre-wrap;
}
.static-cmd-line {
 color: #78c8ff;
}
.static-cmd-output {
 padding-left: 2ch;
}
/* hashtag prefix: muted tone, visually lighter than tag text */
.tag-hash {
 color: color-mix(in srgb, var(--foreground) 40%, transparent);
}
/* contact email link: bright white + light gray underline, click-to-copy */
.copy-email {
 color: #ffffff;
 text-decoration: underline;
 text-decoration-color: color-mix(in srgb, var(--foreground) 35%, transparent);
 text-underline-offset: 2px;
 cursor: pointer;
}
.copy-email:hover {
 color: #ffffff;
 text-decoration-color: color-mix(in srgb, var(--foreground) 55%, transparent);
}