/* =====================================================================
   Tiltless — public profiles, Settings → Privacy, clickable leaderboard
   ===================================================================== */

/* leaderboard: a row opens that trader's profile */
.lb-click { cursor: pointer; }
.lb-click:focus-visible { outline: 2px solid rgba(var(--ac-rgb), 0.6); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .lb-click:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); } }

/* Settings → Privacy: two switches */
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.pv-row > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-row b { font-size: 13.5px; font-weight: 600; }
.pv-row small { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.pv-switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 40px; height: 23px; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 16%, transparent); cursor: pointer; transition: background-color 0.2s ease; }
.pv-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.22s var(--ease-out); }
.pv-switch:checked { background: var(--purple); }
.pv-switch:checked::before { transform: translateX(17px); }
.pv-switch:focus-visible { outline: 2px solid rgba(var(--ac-rgb), 0.6); outline-offset: 2px; }
.pv-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

/* the profile window */
.profile-modal { max-width: 580px; }
.pf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.pf-av { flex: none; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--text); background: color-mix(in srgb, var(--purple) 24%, var(--surface-2)); }
.pf-av.max { box-shadow: 0 0 0 2px #f5b942, 0 0 14px -2px rgba(245, 185, 66, 0.7); }
.pf-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-id b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 18px; }
.pf-id small { font-size: 12.5px; color: var(--text-muted); }
.pf-lv { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.pf-sec { margin-top: 18px; }
.pf-sec h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.pf-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pf-kpis > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 10px 12px; box-shadow: -1px 0 0 var(--border); min-width: 0; }
.pf-kpis span { font-size: 11.5px; line-height: 1.25; color: var(--text-muted); overflow-wrap: anywhere; }
.pf-kpis b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-since { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.pf-lock { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 13px; color: var(--text-muted); }
.pf-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pf-cal-head b { font-size: 14px; }
.pf-tot { font-size: 12.5px; color: var(--text-muted); }
.pf-nav { display: flex; gap: 6px; }
.pf-nav .icon-btn:disabled { opacity: 0.35; cursor: default; }
.pf-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pf-wd { padding-bottom: 2px; font-size: 10.5px; text-align: center; color: var(--text-muted); }
.pf-day { min-height: 56px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 5px 6px; border-radius: 8px; background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.pf-day b { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.pf-amt { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-day small { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-day.pos { background: rgba(52, 211, 153, 0.1); } .pf-day.pos .pf-amt { color: var(--green); }
.pf-day.neg { background: rgba(248, 113, 113, 0.1); } .pf-day.neg .pf-amt { color: var(--red); }
.pf-day.be { background: rgba(251, 191, 36, 0.1); } .pf-day.be .pf-amt { color: var(--be, #fbbf24); }
.pf-day.out { background: none; }
.pf-self { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-size: 13px; background: color-mix(in srgb, var(--purple) 9%, transparent); }
@media (max-width: 560px) {
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-kpis > div { box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); }
  .pf-day { min-height: 46px; padding: 4px; }
  .pf-day small { display: none; }
  .pf-amt { font-size: 10px; }
}

/* Settings → Privacy: your public link */
.pv-url { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--purple) 9%, transparent); }
.pv-url[hidden] { display: none; }
.pv-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent-text); }

/* Settings → Weekly summary */
.wk-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.wk-field input { width: 100%; height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.wk-field input:focus { outline: none; border-color: rgba(var(--ac-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--ac-rgb), .15); }
.wk-help { margin-top: 6px; font-size: 12px; }
.save-note.neg { color: var(--red); }

/* the import window: one line per platform, a file, or a pasted table */
.imp-how { list-style: none; margin: 4px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-dim); }
.imp-how b { display: inline-block; min-width: 92px; color: var(--text); }
.imp-paste { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.imp-paste textarea { width: 100%; resize: vertical; min-height: 92px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.imp-paste textarea:focus { outline: none; border-color: rgba(var(--ac-rgb), .6); }

/* first steps: "your journal is N% ready" */
.onb-card { margin-bottom: 16px; }
.onb-card[hidden] { display: none; }
.onb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.onb-head h3 { margin: 0 0 4px; }
.onb-bar { height: 8px; margin: 14px 0 16px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.onb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent-light)); box-shadow: 0 0 14px rgba(var(--ac2-rgb), .65); transition: width .8s var(--ease-out); }
.onb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
.onb-steps li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; }
.onb-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: var(--text-dim); background: color-mix(in srgb, var(--text) 8%, transparent); }
.onb-steps li.done .onb-dot { color: #04131a; background: var(--green); box-shadow: 0 0 12px rgba(52, 211, 153, .55); }
.onb-txt { min-width: 0; }
.onb-steps li.done .onb-txt { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(52, 211, 153, .6); }
.onb-steps .ghost-btn { margin-left: auto; flex: none; padding: 4px 11px; font-size: 12px; }

/* Settings → Mentor & accountability */
.men-add { display: flex; gap: 8px; margin-top: 12px; }
.men-add input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: 600 13px Inter, system-ui, sans-serif; }
.men-add input:focus { outline: none; border-color: rgba(var(--ac-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--ac-rgb), .15); }
.men-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.men-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.men-list li:last-child { border-bottom: 0; }
.men-list li > small { color: var(--text-muted); }
.men-list li > button, .men-acts { margin-left: auto; }
.men-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.men-list .primary-btn, .men-list .ghost-btn { padding: 5px 11px; font-size: 12px; }
.men-av { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--purple) 22%, var(--surface-2)); color: var(--text); }
.men-empty { color: var(--text-muted); font-size: 12.5px; }
.men-h { margin: 18px 0 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
/* reading someone else's journal: nothing that would write or speak as you */
.ro-view #add-trade-btn, .ro-view #add-trade-btn-2, .ro-view #mobile-add, .ro-view #trade-share, .ro-view #day-share,
.ro-view [data-share-range], .ro-view #today-card, .ro-view #onb-card { display: none !important; }

/* Owner → Full reset */
.owner-wipe { margin-top: 16px; border-color: color-mix(in srgb, var(--red, #ef4444) 35%, var(--f-line, rgba(255,255,255,.08))); }
.owner-wipe .muted-note { max-width: 68ch; line-height: 1.55; }
.owner-wipe-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.owner-wipe-row .form-field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.owner-wipe-row .form-field span { font-size: 12.5px; color: var(--text-muted); }
.owner-wipe-row input { width: 100%; }

/* Owner → Restore a backup */
.owner-restore { margin-top: 16px; }
.owner-restore .muted-note { max-width: 68ch; line-height: 1.55; }
.owner-restore-row { margin-top: 12px; }
.owner-restore-plan { margin-top: 14px; display: grid; gap: 8px; }
.owner-restore-plan[hidden] { display: none; }
.restore-from { font-size: 13px; color: var(--text-dim); margin: 0 0 2px; }
.restore-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.restore-acc input { width: 16px; height: 16px; accent-color: var(--accent, #38bdf8); }
.restore-acc small { font-size: 12px; }
.owner-restore-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Settings → Profile: See plans + Link Discord */
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.discord-link-btn { display: inline-flex; align-items: center; gap: 8px; }
.discord-link-btn svg { width: 18px; height: 18px; flex: none; color: #5865f2; }