/* page-practice.css — Practice page (redesign 2026-09, v2). Ported from
   docs/redesign-mockups/practice-mockup.html. Scoped under .px-page (added
   alongside .today-page on the root, matching .cmp-page/.pf-page convention).
   Real-data page — see page-practice.js for data sourcing; sizing/rule logic
   lives in app.js (deskSize/deskSizeRun/correlatedPairs) and is called, not
   duplicated. .today-* classes below are global (today.css) — used as-is,
   not redeclared. .pf-* style patterns are local re-declarations, matching
   page-portfolio.css's own patterns but scoped to .px-page. */

/* ===== shared pieces (local copies, matching page-compare.css/page-value.css) ===== */
body[data-theme=gemini] #view .up{color:var(--up)}
body[data-theme=gemini] #view .dn{color:var(--dn)}
body[data-theme=gemini] #view .mut{color:var(--ink3)}
body[data-theme=gemini] #view .pf-foot a{text-underline-offset:2px}

/* ===== px-* : practice page ===== */
body[data-theme=gemini] #view .px-page{--px-card:var(--today-paper);--px-inset:var(--paper);--px-lift:var(--paper-3);--px-edge:var(--today-rule)}
body[data-theme=gemini] #view .px-page .card{background:var(--px-card);border:1px solid var(--px-edge);padding:14px 18px 16px}
body[data-theme=gemini] #view .px-page .px-inset{background:var(--px-inset);border:1px solid var(--px-edge)}

/* chapters */
body[data-theme=gemini] #view .px-page .px-ch{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;margin-top:56px}
body[data-theme=gemini] #view .px-page .px-ch.first{margin-top:14px}
body[data-theme=gemini] #view .px-page .px-ch-n{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink3);padding-top:3px}
body[data-theme=gemini] #view .px-page .px-ch-t{min-width:0}
body[data-theme=gemini] #view .px-page .px-ch-t>h3{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--ink1)}

/* 01 book — hero uses global .today-hero/.today-stance/.today-index/.today-kicker;
   .pf-value/.pf-duo are local re-declarations of page-portfolio.css's pattern. */
body[data-theme=gemini] #view .px-page .px-book{display:flex;flex-direction:column;gap:2px}
body[data-theme=gemini] #view .px-page .today-stance h1.pf-value{font-size:clamp(30px,4.4vw,52px)}
body[data-theme=gemini] #view .px-page .pf-duo{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--today-rule);border-bottom:1px solid var(--today-rule);margin:12px 0}
body[data-theme=gemini] #view .px-page .pf-duo span{display:flex;flex-direction:column;gap:3px;padding:8px 0;font-size:10px}
body[data-theme=gemini] #view .px-page .pf-duo span+span{border-inline-start:1px solid var(--today-rule);padding-inline-start:12px}
body[data-theme=gemini] #view .px-page .pf-duo small{font-size:9px;letter-spacing:.08em;color:var(--ink3)}
body[data-theme=gemini] #view .px-page .pf-duo b{font-size:15px;font-weight:500;letter-spacing:-.02em}
body[data-theme=gemini] #view .px-page .pf-duo em{font-style:normal;font-size:10px}

/* equity-curve SVG — dashed start line, solid book line, grey KSE-100 overlay */
body[data-theme=gemini] #view .px-page .px-eq{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
body[data-theme=gemini] #view .px-page .px-eq .start{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3}
body[data-theme=gemini] #view .px-page .px-eq .eq{fill:none;stroke:var(--up);stroke-width:1.6}
body[data-theme=gemini] #view .px-page .px-eq .bench{fill:none;stroke:var(--ink3);stroke-width:1.3;stroke-dasharray:2 2}

/* ticker price chart (chapter 03) */
body[data-theme=gemini] #view .px-page .px-tick{display:block;width:100%;height:auto;overflow:visible}
body[data-theme=gemini] #view .px-page .px-tick .ln{fill:none;stroke-width:1.6}
body[data-theme=gemini] #view .px-page .px-tick .ln.up{stroke:var(--up)}
body[data-theme=gemini] #view .px-page .px-tick .ln.dn{stroke:var(--dn)}

/* stacked allocation bar with 20%-limit tick */
body[data-theme=gemini] #view .px-page .px-alloc{margin:14px 0}
body[data-theme=gemini] #view .px-page .px-alloc-bar{position:relative;display:flex;height:10px;background:var(--px-inset);border:1px solid var(--px-edge);overflow:visible}
body[data-theme=gemini] #view .px-page .px-alloc-bar .inv{display:block;height:100%;background:var(--ink1)}
body[data-theme=gemini] #view .px-page .px-alloc-bar .csh{display:block;height:100%;background:transparent}
body[data-theme=gemini] #view .px-page .px-alloc-bar .lim{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--dn)}
body[data-theme=gemini] #view .px-page .px-alloc-lab{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.05em;color:var(--ink3);margin-top:5px}

/* holdings table sector sub-line — no truncation, wraps under the ticker */
body[data-theme=gemini] #view .px-page .px-sec{display:block;max-width:180px;white-space:normal;line-height:1.3}

/* 02 rule tiles — local re-declaration of page-portfolio.css's .pf-rule pattern,
   reused BY NAME but not inherited (each page-*.css declares its own). */
body[data-theme=gemini] #view .px-page .px-rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--today-rule)}
body[data-theme=gemini] #view .px-page .pf-rule{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:16px 14px;border-bottom:1px solid var(--today-rule);border-inline-end:1px solid var(--today-rule)}
body[data-theme=gemini] #view .px-page .px-rules-grid .pf-rule:nth-child(2n){border-inline-end:0}
body[data-theme=gemini] #view .px-page .pf-rule-h{display:flex;gap:12px;align-items:flex-start;min-width:0}
body[data-theme=gemini] #view .px-page .pf-rule .mk{flex:none;width:18px;height:18px;display:grid;place-items:center;font-size:10px;font-weight:700;border:1px solid currentColor;margin-top:1px;color:var(--ink3)}
body[data-theme=gemini] #view .px-page .pf-rule.ok .mk{color:var(--up)}
body[data-theme=gemini] #view .px-page .pf-rule.bad .mk{color:var(--dn)}
body[data-theme=gemini] #view .px-page .pf-rule b{font-size:12px;font-weight:600;display:block;color:var(--ink1)}
body[data-theme=gemini] #view .px-page .pf-rule p{margin:5px 0 0;color:var(--ink3);font-size:10px;line-height:1.55;max-width:44ch}
body[data-theme=gemini] #view .px-page .pf-rule .v{flex:none;text-align:end;font-size:10px;font-weight:600;color:var(--ink1);max-width:120px}
body[data-theme=gemini] #view .px-page .pf-rule.bad .v{color:var(--dn)}

body[data-theme=gemini] #view .px-page .px-disclosure{margin-top:14px;font-size:11px;color:var(--ink2)}
body[data-theme=gemini] #view .px-page .px-disclosure summary{cursor:pointer;font-weight:600;color:var(--ink1)}
body[data-theme=gemini] #view .px-page .px-disclosure-list{margin:8px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px;font-size:10px;color:var(--ink3);line-height:1.5}

/* 03 trade card, mockup's stepped layout */
body[data-theme=gemini] #view .px-page .px-trade-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start}
body[data-theme=gemini] #view .px-page .px-trade{display:flex;flex-direction:column;gap:14px}
body[data-theme=gemini] #view .px-page .px-step{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body[data-theme=gemini] #view .px-page .px-step-n{font-size:11px;color:var(--ink3)}
body[data-theme=gemini] #view .px-page .px-step-lab{font-size:9px;letter-spacing:.08em;color:var(--ink3);margin-inline-end:2px}
body[data-theme=gemini] #view .px-page .ph-in{background:var(--px-inset);border:1px solid var(--px-edge);border-radius:0;color:var(--ink1);font:inherit;font-size:12px;padding:7px 10px}
body[data-theme=gemini] #view .px-page .ph-in:hover{border-color:var(--ink3)}
body[data-theme=gemini] #view .px-page .ph-in:focus-visible{outline:2px solid var(--today-focus);outline-offset:1px}
body[data-theme=gemini] #view .px-page .px-side{display:inline-flex;border:1px solid var(--px-edge)}
body[data-theme=gemini] #view .px-page .px-side-btn{background:var(--px-inset);color:var(--ink3);border:0;font:inherit;font-size:11px;font-weight:600;padding:7px 14px;cursor:pointer}
body[data-theme=gemini] #view .px-page .px-side-btn.on{background:var(--ink1);color:var(--paper)}
body[data-theme=gemini] #view .px-page .pp-form{display:flex;gap:10px;flex-wrap:wrap}
body[data-theme=gemini] #view .px-page .pp-form .dr-f{display:flex;flex-direction:column;gap:4px;font-size:9px;letter-spacing:.06em;color:var(--ink3);flex:1 1 120px}

/* 04 journal */
body[data-theme=gemini] #view .px-page .px-jrn{display:flex;flex-direction:column;gap:2px}
body[data-theme=gemini] #view .px-page .px-jrn table{width:100%}

@media (hover:hover){
  body[data-theme=gemini] #view .px-page .px-jrn tbody tr:hover{background:var(--today-hover)}
  body[data-theme=gemini] #view .px-page .pf-rule:hover{background:var(--today-hover)}
}

@media (prefers-reduced-motion:reduce){
  body[data-theme=gemini] #view .px-page *,body[data-theme=gemini] #view .px-page *::before{transition:none!important;animation:none!important}
}

@media (max-width:820px){
  body[data-theme=gemini] #view .px-page .px-trade-grid{grid-template-columns:1fr}
  body[data-theme=gemini] #view .px-page .px-rules-grid{grid-template-columns:1fr}
  body[data-theme=gemini] #view .px-page .px-rules-grid .pf-rule{border-inline-end:0}
}

@media (max-width:620px){
  body[data-theme=gemini] #view .px-page.today-page{padding:10px 16px 26px}
  body[data-theme=gemini] #view .px-page .px-ch{grid-template-columns:1fr;gap:8px;margin-top:36px}
  body[data-theme=gemini] #view .px-page .px-ch.first{margin-top:10px}
  body[data-theme=gemini] #view .px-page .card{padding:12px}
  body[data-theme=gemini] #view .px-page .px-trade{gap:10px}
  body[data-theme=gemini] #view .px-page .px-step{width:100%}
  body[data-theme=gemini] #view .px-page .ph-in{flex:1 1 auto!important}
}