/* ============================================================
   /account/practice — the cross-concept practice dashboard.
   Voice: contemplative, sumi-ink, literary. No gamification noise.
   ============================================================ */
.page-practice {
    --pr-paper:#F8F4ED; --pr-paper-2:#EFE9DC;
    --pr-ink:#1B1714; --pr-mute:#6E6862;
    --pr-gold:#B8860B; --pr-gold-d:#8C6608;
    background:var(--pr-paper); color:var(--pr-ink);
}
[data-theme="dark"] .page-practice, [data-theme="dark"].page-practice {
    --pr-paper:#15110E; --pr-paper-2:#1D1814; --pr-ink:#EBE5D7; --pr-mute:#A39A8E;
    --pr-gold:#D7AC4A; --pr-gold-d:#E8BF66;
    background:#15110E; color:#EBE5D7;
}

.pr-eyebrow { font-family:var(--f-mono,monospace); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--pr-gold-d); margin-bottom:var(--s-3,0.75rem); }
.pr-h2 { font-family:var(--f-serif,serif); font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.25; color:var(--pr-ink); margin:0 0 var(--s-3,0.75rem); font-weight:600; }
.pr-h2 em { font-style:italic; color:var(--pr-gold-d); font-weight:500; }
.pr-sub { font-size:1.02rem; line-height:1.7; color:var(--pr-mute); max-width:62ch; margin:0; }
.pr-section { padding:var(--s-8,3rem) 0; }
.pr-section-head { margin-bottom:var(--s-5,1.25rem); }
.pr-data { font-family:var(--f-mono,monospace); font-feature-settings:"tnum"; color:var(--pr-ink); font-weight:600; }
.pr-cta { margin-top:var(--s-5,1.25rem); display:flex; flex-wrap:wrap; gap:var(--s-3,0.75rem); }

/* Hero */
.pr-hero { padding:var(--s-10,4rem) 0 var(--s-6,1.5rem); background:linear-gradient(180deg,var(--pr-paper) 0%,var(--pr-paper-2) 100%); }
[data-theme="dark"] .pr-hero { background:linear-gradient(180deg,#15110E 0%,#1D1814 100%); }
.pr-title { font-family:var(--f-serif,serif); font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.15; color:var(--pr-ink); margin:0 0 var(--s-4,1rem); font-weight:600; }
.pr-title em { font-style:italic; color:var(--pr-gold-d); font-weight:500; }

.pr-stats { display:flex; flex-wrap:wrap; gap:var(--s-5,1.25rem) var(--s-7,2.5rem); margin-top:var(--s-5,1.25rem); }
.pr-stat { display:flex; flex-direction:column; gap:4px; }
.pr-stat-n { font-family:var(--f-serif,serif); font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:700; color:var(--pr-ink); line-height:1; font-style:italic; }
.pr-stat-l { font-size:0.86rem; color:var(--pr-mute); text-transform:lowercase; letter-spacing:0.02em; }
.pr-since { margin-top:var(--s-3,0.75rem); font-family:var(--f-serif,serif); font-style:italic; color:var(--pr-mute); font-size:0.96rem; }

/* Anon-to-account call-out */
.pr-callout-section { padding:var(--s-4,1rem) 0 var(--s-2,0.5rem); }
.pr-callout { background:var(--pr-paper-2); border-left:3px solid var(--pr-gold); padding:var(--s-5,1.25rem); border-radius:3px; }
[data-theme="dark"] .pr-callout { background:#1D1814; }
.pr-callout-title { font-family:var(--f-serif,serif); font-style:italic; font-size:1.15rem; color:var(--pr-ink); margin:0 0 var(--s-2,0.5rem); font-weight:600; }
.pr-callout-body { color:var(--pr-mute); margin:0 0 var(--s-4,1rem); line-height:1.65; }
.pr-callout-cta { display:flex; flex-wrap:wrap; gap:var(--s-3,0.75rem); margin:0; }

/* Concept breakdown */
.pr-concept-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s-3,0.75rem); }
.pr-concept-card { background:var(--pr-paper-2); border-left:3px solid var(--accent, var(--pr-gold)); border-radius:3px; transition:transform .15s, background .15s; }
[data-theme="dark"] .pr-concept-card { background:#1D1814; }
.pr-concept-card:hover { transform:translateY(-1px); }
.pr-concept-link { display:flex; flex-direction:column; gap:8px; padding:var(--s-4,1rem) var(--s-5,1.25rem); text-decoration:none; color:var(--pr-ink); }
.pr-concept-title { font-family:var(--f-serif,serif); font-size:1.15rem; line-height:1.35; color:var(--pr-ink); font-weight:500; }
.pr-concept-stats { display:flex; flex-wrap:wrap; gap:var(--s-3,0.75rem); font-size:0.88rem; color:var(--pr-mute); }
.pr-streak { color:var(--pr-gold-d); }
.pr-concept-last { font-family:var(--f-mono,monospace); font-size:0.76rem; letter-spacing:0.04em; color:var(--pr-mute); text-transform:lowercase; }

/* Activity feed */
.pr-feed-section { background:var(--pr-paper-2); }
[data-theme="dark"] .pr-feed-section { background:#1D1814; }
.pr-feed { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pr-feed-item { display:grid; grid-template-columns:90px 1fr; gap:var(--s-4,1rem); padding:var(--s-3,0.75rem) 0; border-bottom:1px dashed rgba(110,104,98,0.22); }
.pr-feed-item:last-child { border-bottom:none; }
@media (max-width:560px){ .pr-feed-item { grid-template-columns:1fr; gap:4px; } }
.pr-feed-time { font-family:var(--f-mono,monospace); font-size:0.82rem; color:var(--pr-mute); padding-top:3px; text-transform:lowercase; }
.pr-feed-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pr-feed-where { font-size:0.92rem; color:var(--pr-mute); }
.pr-feed-where a { color:var(--pr-ink); text-decoration:none; border-bottom:1px solid rgba(110,104,98,0.32); }
.pr-feed-where a:hover { border-bottom-color:var(--pr-gold-d); color:var(--pr-gold-d); }
.pr-feed-tool { font-family:var(--f-mono,monospace); font-size:0.84rem; color:var(--pr-gold-d); }
.pr-feed-label { font-family:var(--f-serif,serif); font-size:1.02rem; color:var(--pr-ink); line-height:1.5; }
.pr-feed-payload { font-family:var(--f-serif,serif); font-style:italic; color:var(--pr-mute); font-size:0.95rem; line-height:1.55; }

/* Suggested next concept */
.pr-next-section .pr-section-head { text-align:left; max-width:none; }