/* Kabinet — «Sukunat» (spec 2026-09-07 §4). Karta yo'q: bo'limlar chiziq
   bilan ajratiladi. Grafik bitta seriya, bitta rang; qiymatlar pastdagi
   jadvalda ham bor, ya'ni chart yagona o'qish yo'li emas. */

.account { width: min(var(--reading-width), calc(100% - 48px)); margin-inline: auto; padding-bottom: 96px; }


.account-head { padding-top: 40px; }
.account-head h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 300; letter-spacing: -.03em; }
.account-identity { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.account-identity strong { font-size: 17px; font-weight: 500; }
.account-identity .chip { cursor: default; }

.account-section-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.account-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

/* Kirish formasi */
.account-signin { padding-top: 40px; }
.account-signin h2 { margin: 0 0 10px; font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.account-signin-lede { margin: 0 0 28px; max-width: 52ch; color: var(--text-secondary); line-height: 1.6; }
.account-form { display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
.field-control { display: flex; align-items: center; gap: 8px; }
.field-control .input { flex: 1; min-width: 0; }
.remember-line { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text-secondary); }
.remember-line input { width: 18px; height: 18px; accent-color: var(--accent); }
.auth-message { margin: 0; min-height: 20px; font-size: 14px; color: var(--danger); }
.auth-message:empty { display: none; }
.account-links { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; font-size: 14px; }
.account-links a { color: var(--accent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* Kirgan holat */
.account-signed > section { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--border-subtle); }
.account-signed > section:first-child { border-top: 0; }

.account-resume-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.account-resume-row span { color: var(--text-secondary); font-size: 15px; }

/* Hero raqam: proportional figures — tabular-nums katta o'lchamda bo'shashib
   ko'rinadi va bu yerda hech narsa vertikal tenglashmaydi. */
.account-hero { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 0; }
.account-hero b { font-size: 44px; font-weight: 300; letter-spacing: -.03em; color: var(--text-primary); }
.account-hero span { font-size: 14px; color: var(--text-tertiary); }

.account-chart { margin: 24px 0 0; }
.account-chart figcaption { margin-bottom: 12px; font-size: 13px; color: var(--text-tertiary); }
.account-chart-plot { position: relative; }
.account-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.account-chart .grid-line { stroke: var(--border-subtle); stroke-width: 1; }
.account-chart .axis-label { fill: var(--text-tertiary); font-size: 11px; font-family: var(--font-mono); }
.account-chart .series-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-chart .series-dot { fill: var(--accent); stroke: var(--canvas); stroke-width: 2; }
.account-chart .end-label { fill: var(--text-primary); font-size: 12px; font-weight: 500; }
.account-chart .hit { fill: transparent; cursor: pointer; }
.account-chart .hit:focus-visible { fill: var(--accent-soft); }
.account-tip { position: absolute; z-index: 2; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--canvas); box-shadow: var(--shadow-float); font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); }
.account-tip b { display: block; font-size: 13px; font-weight: 500; }
.account-tip span { color: var(--text-tertiary); font-family: var(--font-mono); }

/* Jadvalning oxirgi qatori chizig'i bo'lim chegarasi bilan ikkilanmasin. */
.account-attempts { margin-top: 28px; }
.account-attempts tr:last-child td { border-bottom: 0; }
.account-attempts td:first-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-secondary); }

.account-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--border-subtle); }

@media (max-width: 900px) {
  .account { width: calc(100% - 48px); padding-bottom: 72px; }
  .account-head { padding-top: 24px; }
  .account-head h1 { font-size: 30px; }
  .account-hero b { font-size: 36px; }
  .account-resume-row { flex-direction: column; align-items: stretch; }
  .account-signed > section { padding-top: 32px; margin-top: 32px; }
}

@media (max-width: 600px) {
  .account-attempts th:nth-child(2), .account-attempts td:nth-child(2) { display: none; }
}

/* ─── Statistika paneli (spec 2026-09-10) ─────────────────────────────────
   «Sukunat»: karta yo'q, chiziq va bo'shliq. Rang faqat tokendan. */

.account-today, .account-program, .account-continue, .account-quiz, .account-weak { margin-top: 44px; }
.account-streak { margin: 0 0 16px; font-size: 15px; color: var(--text-body); }
.account-streak b { font-size: 22px; font-weight: 400; color: var(--text-primary); }

/* Faollik xaritasi — 12 hafta ustun bo'lib turadi, har ustun bir hafta.
   Katak o'lchami qat'iy: 84 katak tor ekranda ham sig'ishi kerak. */
.account-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 10px); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.account-heatmap i { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--canvas-raised); }
/* To'rt daraja — soyalanish emas, shaffoflik: u har ikkala temada ham
   bir xil ishlaydi va alohida dark qiymat talab qilmaydi. */
.account-heatmap i[data-level="1"] { background: var(--accent); opacity: .28; }
.account-heatmap i[data-level="2"] { background: var(--accent); opacity: .55; }
.account-heatmap i[data-level="3"] { background: var(--accent); opacity: .8; }
.account-heatmap i[data-level="4"] { background: var(--accent); }

/* Bo'lim chiziqlari */
.account-bars { display: grid; gap: 14px; }
.account-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; }
.account-bar-name { font-size: 15px; color: var(--text-primary); }
.account-bar-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-tertiary); }
.account-bar-track { grid-column: 1 / -1; height: 3px; background: var(--border-subtle); }
.account-bar-track > i { display: block; height: 3px; background: var(--accent); }
/* Tanishib chiqilgan, lekin tugatilmagan qism — och rang bilan. */
.account-bar-track > i[data-partial] { background: var(--accent); opacity: .35; }

/* Rejim bo'yicha */
.account-modes { display: grid; gap: 12px; margin-top: 18px; }
.account-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; }
.account-mode-name { font-size: 15px; }
.account-mode-meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-tertiary); }

/* Zaif savol qatori — matn uzun, shuning uchun ikki qatorga tushadi */
.account-weak .row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.account-weak .row-title { font-weight: 400; font-size: 15px; line-height: 1.5; }
.account-weak .row-count { color: var(--danger); }

@media (max-width: 600px) {
  .account-heatmap { grid-template-rows: repeat(7, 9px); }
  .account-heatmap i { width: 9px; height: 9px; }
}