/* Fumi 学习台 · desk.css（token 来源：packages/design-system/tokens.css 可引用入口）
 * @import 保持 desk.css 自包含；tokens.css 定义 --ink/--paper/--amber 等语义 token
 * 路径：apps/learning-desk/ → 上两级到仓库根 → packages/design-system/tokens.css */
@import url("../../packages/design-system/tokens.css");

:root {
  --ink: #2d2b2a;
  --paper: #faf8f5;
  --amber: #d4953a;
  --amber-dark: #955818;
  --amber-soft: #fff3df;
  --surface: #ffffff;
  --surface-muted: #f3f1ec;
  --text-secondary: #4a5553; /* WCAG AA：米白底上 ≥4.5:1（原 #4a5553 仅 4.1:1） */
  --text-subtle: #8a9492;
  --line: #e5dfd6;
  --line-strong: #b9c5c1;
  --success: #2f715d;
  --success-soft: #e9f5f0;
  --warning: #b06a1e;
  --warning-soft: #fff3df;
  --danger: #a9473d;
  --danger-soft: #faece9;
  --radius-page: 8px;
  --radius-btn: 7px;
  --content-max: 1040px;
  --focus: 3px solid var(--amber);
  --duration: 180ms;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  padding: 8px 14px; background: var(--ink); color: var(--paper);
  border-radius: var(--radius-btn); transition: top 160ms ease-out;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--radius-btn); }

/* ── 壳 ── */
.dk-shell { display: flex; flex-direction: column; min-height: 100vh; }

.dk-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.dk-header-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 20px;
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.dk-brand { display: flex; align-items: center; gap: 10px; }
.dk-brand img { width: 72px; height: 72px; }
.dk-brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.dk-brand-copy strong { font-size: 26px; font-weight: 800; }
.dk-slogan { font-size: 12px; font-size: 10px; color: var(--text-subtle); letter-spacing: 2px; }

.dk-auth { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.dk-auth .badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line-strong); color: var(--text-secondary); }
.dk-auth .badge--ok { background: var(--success-soft); border-color: #b7d3c8; color: var(--success); }
.dk-auth .badge--wait { background: var(--warning-soft); border-color: #e5c48f; color: var(--warning); }
.dk-auth .badge--no { background: var(--danger-soft); border-color: #ecc9c2; color: var(--danger); }

/* ── 主区 ── */
.dk-main { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 32px 20px 64px; }
.dk-eyebrow { margin: 0 0 4px; font-size: 13px; color: var(--text-secondary); letter-spacing: 0.04em; }
.dk-title { margin: 0 0 8px; font-size: 28px; line-height: 1.3; font-weight: 800; }
.dk-lead { margin: 0; color: var(--text-secondary); max-width: 56ch; }

/* ── 科目卡片网格 ── */
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; }
.dk-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: var(--radius-page);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--duration) ease-out, transform var(--duration) ease-out;
  cursor: pointer; text-align: left;
}
.dk-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.dk-card:active { transform: none; }
.dk-card .dk-card-head { display: flex; align-items: center; justify-content: space-between; }
.dk-card .dk-card-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(45, 43, 42, 0.06); display: inline-flex; align-items: center; justify-content: center; }
.dk-card .dk-card-icon img { display: block; }
.dk-card .dk-grade-label { font-size: 12px; color: var(--text-subtle); }
.dk-card h3 { margin: 0; font-size: 17px; font-weight: 700; }
.dk-card p { margin: 0; font-size: 13px; color: var(--text-secondary); }

.dk-card.is-locked { background: var(--surface-muted); border-color: var(--line); color: var(--text-subtle); cursor: pointer; }
.dk-card.is-locked h3 { color: var(--text-subtle); }
.dk-card .dk-lock { font-size: 13px; color: var(--text-subtle); }

/* 徽标 */
.dk-badge { padding: 2px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line-strong); color: var(--text-secondary); }
.dk-badge--open { background: var(--success-soft); border-color: #b7d3c8; color: var(--success); }
.dk-badge--locked { background: var(--surface-muted); color: var(--text-subtle); }
.dk-badge--dev { background: var(--amber-soft); border-color: #e5c48f; color: var(--amber-dark); }
.dk-card.is-dev { background: var(--surface-muted); border-style: dashed; color: var(--text-subtle); cursor: pointer; }
.dk-card.is-dev h3 { color: var(--text-subtle); }

/* 能力辅助色（仅图标底色，不暗示成绩；主操作色全平台一致） */
.dk-ability-reading .dk-card-icon { background: rgba(212, 149, 58, 0.14); }
.dk-ability-vocab .dk-card-icon { background: rgba(91, 125, 140, 0.16); }
.dk-ability-grammar .dk-card-icon { background: rgba(138, 123, 168, 0.16); }
.dk-ability-listening .dk-card-icon { background: rgba(74, 144, 164, 0.16); }
.dk-ability-speaking .dk-card-icon { background: rgba(201, 130, 43, 0.14); }
.dk-ability-writing .dk-card-icon { background: rgba(176, 105, 110, 0.16); }
.dk-ability-sound .dk-card-icon { background: rgba(122, 156, 143, 0.16); }

/* 年级筛选行 */
.dk-grade-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; }
.dk-grade-row .dk-grade-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.dk-grade-select {
  min-height: 40px; padding: 7px 32px 7px 12px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-primary);
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.dk-grade-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.dk-empty { margin: 18px 0 0; padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-page); font-size: 14px; color: var(--text-secondary); text-align: center; }
.dk-badge--frozen { background: var(--amber-soft); border-color: #e5c48f; color: var(--amber-dark); }

/* ── 按钮 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 20px; border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 700; border: 0; cursor: pointer;
  transition: background-color var(--duration) ease-out;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.btn:hover { filter: brightness(0.96); }

/* ── 弹层 ── */
.dk-dialog { border: 0; border-radius: var(--radius-page); padding: 0; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 14px 38px rgba(45, 43, 42, 0.12); }
.dk-dialog::backdrop { background: rgba(45, 43, 42, 0.4); }
.dk-dialog-inner { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.dk-dialog h2 { margin: 0; font-size: 20px; font-weight: 800; }
.dk-dialog input { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--surface); color: var(--ink); }
.dk-dialog input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.auth-tabs { display: flex; gap: 8px; }
.auth-tab { flex: 1; padding: 10px 0; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); cursor: pointer; font-size: 14px; }
.auth-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.auth-err { font-size: 13px; color: var(--danger); min-height: 18px; margin: 0; }
.auth-note { font-size: 12px; color: var(--text-subtle); margin: 0; }
.buy-desc { margin: 0; color: var(--text-secondary); }
.buy-note { margin: 0; font-size: 13px; color: var(--text-subtle); }
.buy-actions { display: flex; gap: 10px; }
.buy-actions .btn { flex: 1; }

/* ── 页脚 ── */
.dk-footer { padding: 20px; text-align: center; font-size: 12px; color: var(--text-subtle); letter-spacing: 2px; }

/* ── 响应式 ── */
@media (max-width: 899px) {
  .dk-title { font-size: 22px; }
  .dk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dk-card { padding: 14px; }
}

/* ── 低动效 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── F3 任务壳（真实任务聚合；token 引用 packages/design-system/tokens.css --ds-*）── */
.dk-tasks { background: var(--ds-surface, #ffffff); border: 1px solid var(--ds-line, #e5dfd6); border-radius: 14px; padding: 16px 18px; margin: 14px 0 4px; }
.dk-tasks-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dk-tasks-head h2 { font-size: 17px; margin: 0; color: var(--ds-ink, #2d2b2a); }
.dk-task-state { font-size: 14px; color: var(--ds-text-secondary, #4a5553); margin: 0; line-height: 1.6; }
.dk-task-state.is-empty { color: var(--ds-text-subtle, #8a9492); }
.dk-task-state.is-error, .dk-task-state.is-unavailable { color: var(--ds-danger, #a9473d); }
.dk-task-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--ds-line, #e5dfd6); }
.dk-task-row:first-of-type { border-top: 0; }
.dk-task-name { font-weight: 800; color: var(--ds-ink, #2d2b2a); }
.dk-task-meta { font-size: 12px; color: var(--ds-text-secondary, #4a5553); display: block; margin-top: 2px; }
.dk-task-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.dk-task-badge.is-in_progress, .dk-task-badge.is-feedback { background: var(--ds-warning, #b06a1e); color: var(--ds-text-on-action, #faf8f5); }
.dk-task-badge.is-review_due { background: var(--ds-info, #416d8d); color: var(--ds-text-on-action, #faf8f5); }
.dk-task-badge.is-complete { background: var(--ds-success, #2f715d); color: var(--ds-text-on-action, #faf8f5); }
.dk-task-badge.is-not_started { background: var(--ds-line, #e5dfd6); color: var(--ds-ink, #2d2b2a); }