/* ============================================================ Practice Journal (Bucket B) — launcher, slide-in panel, and per-exercise Got it / Needs work footers. ============================================================ */ /* launcher + panel live on ; only shown while the Learn view is active */ body:not(.pj-learn) #pj-launch, body:not(.pj-learn) #pj-panel{display:none} /* floating launcher */ #pj-launch{position:fixed; right:22px; bottom:90px; z-index:60; display:flex; align-items:center; gap:8px; padding:11px 16px 11px 13px; border-radius:14px; border:1px solid var(--accent-deep,#C99B45); background:linear-gradient(180deg,#2f2418,var(--bg-warm,#1e1813)); color:var(--accent,#E8C36B); font-family:var(--f-head,'Sora',sans-serif); font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 10px 28px -8px rgba(232,195,107,.36), 0 0 0 1px rgba(232,195,107,.10)} #pj-launch:hover{background:linear-gradient(180deg,#3a2c1c,var(--bg-warm,#1e1813))} #pj-launch .pj-ico{font-size:15px; line-height:1} /* slide-in panel */ #pj-panel{position:fixed; top:0; right:0; height:100vh; width:min(380px,92vw); z-index:61; background:var(--panel,#211b16); border-left:1px solid var(--border-strong,#4a3d34); box-shadow:-24px 0 60px -20px rgba(0,0,0,.6); transform:translateX(103%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; color:var(--ink,#f5f1e8)} #pj-panel.open{transform:translateX(0)} .pj-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 20px 15px; border-bottom:1px solid var(--line,#3a2f28); background:radial-gradient(ellipse 300px 120px at 30% -24px, rgba(232,195,107,.12), transparent 70%)} .pj-kick{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint,#8f7f72)} .pj-title{font-family:var(--f-head,'Sora',sans-serif); font-weight:800; font-size:18px; margin-top:3px; line-height:1.2} .pj-x{background:transparent; border:1px solid var(--line,#3a2f28); color:var(--ink-dim,#c9bdaf); width:30px; height:30px; border-radius:8px; cursor:pointer; flex:0 0 auto; font-size:12px} .pj-x:hover{color:var(--ink,#f5f1e8); border-color:var(--ink-faint,#8f7f72)} .pj-body{padding:16px 20px 26px; overflow-y:auto; flex:1} .pj-sec-h{font-family:var(--f-head,'Sora',sans-serif); font-weight:700; font-size:13px; color:var(--accent,#E8C36B); margin:16px 0 8px} .pj-body .pj-sec-h:first-child{margin-top:0} .pj-presets{display:flex; flex-direction:column; gap:7px} .pj-chk{display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border:1px solid var(--line,#3a2f28); border-radius:9px; cursor:pointer; font-size:13.5px; line-height:1.35; color:var(--ink-dim,#c9bdaf); background:var(--surface-1,#2a231f)} .pj-chk.on{border-color:var(--good,#7BBE6B); color:var(--ink,#f5f1e8); background:linear-gradient(135deg,rgba(123,190,107,.13),transparent 72%)} .pj-chk input{margin-top:2px; accent-color:var(--good,#7BBE6B); flex:0 0 auto} .pj-notes{width:100%; min-height:120px; resize:vertical; margin-top:2px; padding:11px 13px; border-radius:10px; border:1px solid var(--line,#3a2f28); background:var(--surface-1,#2a231f); color:var(--ink,#f5f1e8); font-family:var(--f-body,'Mulish',sans-serif); font-size:13.5px; line-height:1.5} .pj-notes:focus{outline:0; border-color:var(--accent-deep,#C99B45)} .pj-agg{margin-top:16px; padding-top:14px; border-top:1px solid var(--line,#3a2f28); display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-faint,#8f7f72)} .pj-agg b{color:var(--accent,#E8C36B)} .pj-agg em{font-style:normal; opacity:.75} /* per-exercise rating footer on each grab card */ .view-learn .ex-rate{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:12px; padding-top:11px; border-top:1px dashed var(--line,#3a2f28)} .view-learn .ex-rate-q{font-size:12.5px; color:var(--ink-faint,#8f7f72); margin-right:2px} .view-learn .ex-btn{font-family:var(--f-body,'Mulish',sans-serif); font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:8px; cursor:pointer; border:1px solid var(--line,#4a3d34); background:transparent; color:var(--ink-dim,#c9bdaf)} .view-learn .ex-btn:hover{border-color:var(--ink-faint,#8f7f72)} .view-learn .ex-btn.got.on{background:var(--good,#7BBE6B); border-color:var(--good,#7BBE6B); color:#12210e} .view-learn .ex-btn.needs.on{background:#D9814E; border-color:#D9814E; color:#1a1008} /* Dashboard — "Keep working on" (fed by the journal ratings) */ .pj-dash{margin:22px 0; padding:20px 22px; border:1px solid var(--border-subtle,#433730); border-radius:16px; background:var(--grad-surface, var(--surface-1,#2a231f)); box-shadow:var(--elev-2, 0 8px 24px rgba(0,0,0,.3)), 0 0 50px -22px rgba(232,195,107,.16)} .pj-dash-head{margin-bottom:14px} .pj-dash-kick{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint,#8f7f72)} .pj-dash-head h2{font-family:var(--f-head,'Sora',sans-serif); font-weight:800; font-size:20px; margin:3px 0 0} .pj-dash-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px} .pj-dash-item{width:100%; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; padding:12px 15px; border-radius:11px; border:1px solid var(--line,#3a2f28); border-left:3px solid #D9814E; background:var(--surface-1,#2a231f); color:var(--ink,#f5f1e8); font-family:var(--f-body,'Mulish',sans-serif)} .pj-dash-item:hover{border-color:#D9814E; background:linear-gradient(90deg,rgba(217,129,78,.10),transparent 60%)} .pj-dash-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px} .pj-dash-ex{font-family:var(--f-head,'Sora',sans-serif); font-weight:700; font-size:14.5px} .pj-dash-les{font-size:12px; color:var(--ink-faint,#8f7f72)} .pj-dash-go{font-size:12.5px; font-weight:700; color:var(--accent,#E8C36B); flex:0 0 auto} .pj-dash-empty{color:var(--ink-dim,#c9bdaf); font-size:14px; line-height:1.55; margin:4px 0 0; padding:14px 16px; border:1px dashed var(--line,#3a2f28); border-radius:11px} .pj-dash-empty b{color:var(--accent,#E8C36B)} .pj-dash-foot{margin-top:14px; padding-top:13px; border-top:1px solid var(--line,#3a2f28); font-size:12.5px; color:var(--ink-faint,#8f7f72); display:flex; gap:18px; flex-wrap:wrap} .pj-dash-foot b{color:var(--accent,#E8C36B)} .pj-dash-notes{margin-top:16px} .pj-dash-note{margin-top:8px; padding:10px 13px; border-radius:10px; background:var(--surface-1,#2a231f); border:1px solid var(--line,#3a2f28)} .pj-dash-note b{font-family:var(--f-head,'Sora',sans-serif); font-size:12.5px; color:var(--ink-dim,#c9bdaf)} .pj-dash-note p{margin:4px 0 0; font-size:13px; color:var(--ink-dim,#c9bdaf); line-height:1.5; white-space:pre-wrap} /* The Neck — per-note confidence heatmap on the Dashboard */ .pj-neck{margin:22px 0; padding:20px 22px; border:1px solid var(--border-subtle,#433730); border-radius:16px; background:var(--grad-surface, var(--surface-1,#2a231f)); box-shadow:var(--elev-2, 0 8px 24px rgba(0,0,0,.3)), 0 0 60px -24px rgba(232,195,107,.18)} .pj-neck .pj-dash-head{margin-bottom:8px} .pj-neck-sub{color:var(--ink-dim,#c9bdaf); font-size:13.5px; line-height:1.5; margin:0 0 14px; max-width:66ch} .pj-neck-board{background:#1d1712; border:1px solid var(--line,#3a2f28); border-radius:12px; padding:12px; margin-bottom:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 40px -12px rgba(232,195,107,.10)} .pj-neck-board svg{display:block; width:100%; height:auto} .pj-neck-board .afb-cell{cursor:pointer} .pj-neck-legend{display:flex; gap:15px; flex-wrap:wrap; font-size:12px; color:var(--ink-dim,#c9bdaf); margin-bottom:4px} .pj-neck-legend span{display:inline-flex; align-items:center; gap:6px} .pj-neck-legend i{width:12px; height:12px; border-radius:50%; display:inline-block} /* The Neck — collapsible header + read-only display */ .pj-neck .pj-dash-head, .pj-neck-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px} .pj-neck-toggle{background:transparent; border:1px solid var(--line,#3a2f28); color:var(--ink-dim,#c9bdaf); font-family:var(--f-body,'Mulish',sans-serif); font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:8px; cursor:pointer; flex:0 0 auto} .pj-neck-toggle:hover{color:var(--ink,#f5f1e8); border-color:var(--ink-faint,#8f7f72)} .pj-neck-collapsed-line{display:none; color:var(--ink-faint,#8f7f72); font-size:13px; margin-top:4px} .pj-neck-collapsed-line b{color:#57E39A} .pj-neck.collapsed .pj-neck-body{display:none} .pj-neck.collapsed{padding-bottom:16px} .pj-neck.collapsed .pj-neck-collapsed-line{display:block}