/* ── My Reads page ─────────────────────────────────── */

.nav-active{opacity:1 !important;font-weight:600}

.rd-head{margin:2.5rem 0 .4rem}
.rd-head h1{margin:0}
.rd-lede{margin:.4rem 0 1.5rem;color:var(--muted);font-size:.95rem;line-height:1.5;max-width:640px}
.rd-loading,.rd-empty{color:var(--muted);font-size:.92rem;line-height:1.5}
.rd-loading{padding:4rem 0;text-align:center}
.rd-signin{text-align:center;padding:5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.rd-signin[hidden]{display:none}
.rd-signin h2{margin:0;font-size:1.4rem}
.rd-msg{margin:0 0 1rem;padding:.7rem .9rem;border-radius:10px;background:rgba(255,120,120,.08);border:1px solid rgba(255,120,120,.25);font-size:.9rem}
.rd-msg[hidden]{display:none}

/* The record */
.rd-record{margin:0 0 1.5rem;padding:1rem 1.1rem;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.rd-record[hidden]{display:none}
.rd-rec-head{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rd-rec-main{font-size:1.7rem;font-weight:500;margin:.25rem 0 0;font-variant-numeric:tabular-nums}
.rd-rec-main b{font-weight:700}
/* One cell per sport, name over record, two columns, with a hairline above (reads.js renderRecord). */
.rd-recgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
@media (min-width:640px){.rd-recgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rd-recgrid.rd-recgrid-3{grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}
.rd-rs{display:flex;flex-direction:column;gap:2px;min-width:0}
.rd-rs-k{font-size:.78rem;color:var(--muted);overflow-wrap:break-word}
.rd-rs-v{font-size:1.02rem;color:rgba(234,240,255,.62);font-variant-numeric:tabular-nums}
.rd-rs-v b{color:var(--text);font-weight:650}
.rd-rs-sub{font-size:.72rem;color:var(--muted);line-height:1.35}
.rd-rec-notes{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.rd-rec-note{margin:0;font-size:.78rem;color:var(--muted);line-height:1.5}
.rd-rec-note + .rd-rec-note{margin-top:4px}
.rd-rec-head + .rd-rec-note{margin-top:.5rem}

/* Tabs */
.rd-tabs{display:flex;gap:4px;margin:0 0 1.25rem;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto}
.rd-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:.95rem;font-weight:600;padding:.6rem .9rem;cursor:pointer;white-space:nowrap}
.rd-tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
[data-panel][hidden]{display:none}

/* Filters */
.rd-filters{display:flex;flex-direction:column;gap:.5rem;margin:0 0 1.25rem}
.rd-chiprow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;align-items:center}
.rd-chiprow::-webkit-scrollbar{display:none}
.rd-fchip{flex:none;appearance:none;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(157,180,255,.22);background:rgba(255,255,255,.02);color:var(--muted);white-space:nowrap}
.rd-fchip[aria-pressed="true"]{border-color:rgba(43,92,255,.75);background:rgba(43,92,255,.2);color:var(--text)}
.rd-time{flex-wrap:wrap;gap:8px;font-size:.85rem;color:var(--muted)}
.rd-time label{font-weight:600}
.rd-time select,.rd-time input{font:inherit;font-size:.85rem;color:var(--text);background:var(--card);border:1px solid rgba(157,180,255,.25);border-radius:8px;padding:.3rem .5rem;color-scheme:dark}

/* Sections and cards */
.rd-group{margin:0 0 2rem}
.rd-h{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem}
.rd-h span{display:inline-block;margin-left:.35rem;padding:0 .45rem;border-radius:999px;background:rgba(255,255,255,.08);color:var(--text);letter-spacing:0}
.rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem;align-items:start}
.rd-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:.85rem 1rem .75rem;min-width:0}
.rd-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.35rem .5rem}
.rd-where{font-size:.74rem;color:var(--muted);font-weight:600;letter-spacing:.02em;min-width:0;overflow-wrap:break-word}
.rd-badge{flex:none;font-size:.7rem;font-weight:700;padding:.14rem .55rem;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.rd-card.hit .rd-badge{background:rgba(94,226,160,.16);color:#7ef0b6}
.rd-card.miss .rd-badge{background:rgba(255,122,122,.14);color:#ff9d9d}
/* The read: what the AI chose, in the largest type on the card. */
.rd-pick{margin-top:.45rem}
.rd-pick-l{display:block;font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent2)}
.rd-title{font-size:1.12rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere;margin-top:.1rem}
.rd-sub{font-size:.88rem;font-weight:600;color:rgba(234,240,255,.82);margin-top:.05rem}
.rd-stats{display:flex;gap:1.4rem;margin-top:.7rem}
.rd-stats div{display:grid;font-size:.68rem;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.rd-stats b{font-size:1rem;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:0;margin-top:.05rem}
.rd-stats .edge b{color:#7ef0b6}
.rd-meta{font-size:.74rem;color:var(--muted);line-height:1.45}
.rd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.06)}
.rd-icons{display:flex;gap:.4rem;flex:none}
.rd-ib{appearance:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(157,180,255,.12);color:#dbe4ff;display:grid;place-items:center;cursor:pointer;list-style:none;position:relative}
.rd-ib::-webkit-details-marker{display:none}
.rd-ib:hover{background:rgba(157,180,255,.22)}
.rd-ib svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd-ib .i-check,.rd-sel.on .i-plus{display:none}
.rd-sel.on .i-check{display:grid}
.rd-ib span{display:grid}
.rd-sel.on{background:#2f5dff;color:#fff}
.rd-sel input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.rd-ask{display:inline-flex;align-items:center;gap:.35rem;height:34px;padding:0 .8rem 0 .65rem;border-radius:999px;background:rgba(157,180,255,.12);color:#dbe4ff;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap}
.rd-ask:hover{background:rgba(157,180,255,.22)}
.rd-ask svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd-menu{position:relative}
.rd-menu[open]>summary{background:rgba(157,180,255,.25)}
.rd-menu-list{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;min-width:min(220px, calc(100vw - 32px));display:grid;padding:6px;border-radius:12px;background:var(--panel,#121a33);border:1px solid rgba(157,180,255,.2);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.rd-mi{appearance:none;border:0;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--text);text-align:left;text-decoration:none;padding:.6rem .7rem;border-radius:8px;cursor:pointer}
.rd-mi:hover{background:rgba(157,180,255,.12)}
.rd-mi.on{color:#8dffcb}
.rd-mi:disabled{color:var(--muted, #8b93b0);cursor:default}
.rd-mi:disabled:hover{background:none}
.rd-mi-sub{display:block;font-size:.76rem;font-weight:500;color:var(--muted, #8b93b0);margin-top:.15rem}
.rd-why{margin-top:.55rem;font-size:.82rem}
.rd-why summary{cursor:pointer;color:var(--accent2);font-weight:600}
.rd-why p{margin:.35rem 0 0;color:var(--muted);line-height:1.5}
.rd-prices ul{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.25rem}
.rd-prices li{display:flex;justify-content:space-between;gap:1rem;color:var(--muted)}
.rd-prices li b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.rd-prices li b.best{color:#7ef0b6}
/* Progress bars: the game clock, and the read against its line */

/* The reader's own positions */
.rd-pos{margin-top:.75rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.06)}
.rd-pos-h{font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent2);margin-bottom:.1rem}
.rd-pos-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(2.9rem,auto));column-gap:.9rem;align-items:end;padding:.35rem 0}
.rd-pos-row+.rd-pos-row{border-top:1px solid rgba(255,255,255,.04)}
.rd-pos-who{min-width:0}
.rd-pos-who b{display:block;font-size:.88rem;font-weight:700;overflow-wrap:anywhere}
.rd-pos-who span{display:block;font-size:.74rem;color:var(--muted);overflow-wrap:anywhere}
.rd-pos-n{display:grid;text-align:right;font-size:.62rem;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.rd-pos-n b{font-size:.92rem;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.rd-pos-n.good b{color:#7ef0b6}.rd-pos-n.bad b{color:#ff9d9d}
.rd-pos-tag{display:inline-block;margin-left:.35rem;padding:0 .4rem;border-radius:999px;background:rgba(255,181,71,.14);color:#ffc970;font-size:.68rem;font-style:normal;font-weight:700}
.rd-pos-more{margin-top:.2rem}
.rd-pos-more summary{cursor:pointer;list-style:none;font-size:.78rem;font-weight:700;color:var(--accent2);padding:.3rem 0}
.rd-pos-more summary::-webkit-details-marker{display:none}
.rd-pos-more summary::after{content:" ›";display:inline-block;transition:transform .15s ease}
.rd-pos-more[open] summary::after{transform:rotate(90deg)}
.rd-pos-note{margin:-.75rem 0 1.25rem;font-size:.82rem;color:var(--muted)}
.rd-pos-note[hidden]{display:none}
.rd-pos-note a{color:var(--accent2)}
.rd-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.rd-act{appearance:none;font:inherit;font-size:.8rem;font-weight:600;padding:.35rem .65rem;border-radius:999px;border:1px solid rgba(157,180,255,.22);background:rgba(255,255,255,.02);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.rd-act:hover{border-color:rgba(157,180,255,.5)}
.rd-sel input{margin:0;accent-color:var(--accent)}
.rd-locked{opacity:.6}
.rd-rerun{margin-top:.6rem;padding:.6rem .7rem;border-radius:10px;border:1px solid rgba(157,180,255,.2);background:rgba(255,255,255,.03);font-size:.84rem;display:flex;flex-direction:column;gap:.45rem}
.rd-rerun select{font:inherit;font-size:.84rem;color:var(--text);background:var(--card);border:1px solid rgba(157,180,255,.25);border-radius:8px;padding:.2rem .4rem;margin:0 .25rem;color-scheme:dark}
.rd-rerun-email{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.rd-rerun-note{margin:0;font-size:.76rem;color:var(--muted)}
.rd-rerun .rd-actions{margin-top:.1rem}
.rd-rerun .btn{font:inherit;font-size:.84rem;padding:.4rem .8rem}
.rd-rerun-msg{margin:.35rem 0 0;font-size:.8rem;color:#ffc970}
.rd-rerun-msg a,.rd-rerun-done a{color:var(--accent2)}
.rd-rerun-done{margin-top:.55rem;font-size:.8rem;color:var(--muted)}
.rd-more{margin:1.25rem auto 0;display:block}

/* The parlay bar: sticks to the bottom of the screen while reads are selected */
.rd-selbar{position:sticky;bottom:12px;z-index:20;margin:1rem 0 0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.7rem .9rem;border-radius:14px;background:var(--panel);border:1px solid rgba(43,92,255,.55);box-shadow:var(--shadow)}
.rd-selbar[hidden]{display:none}
.rd-selbar-btns{display:flex;gap:.5rem}
.rd-selbar .btn{font:inherit;font-size:.9rem}
.rd-selbar .btn:disabled{opacity:.5;cursor:default}

/* The share window's frame. assistant.css defines it for the plans dialog; this page has none. */
.upgrade-backdrop{position:fixed;inset:0;z-index:100;background:rgba(11,16,32,.85);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.upgrade-backdrop[hidden]{display:none}
.upgrade-modal{width:100%;max-width:560px;background:var(--panel);border:1px solid rgba(34,48,94,.9);border-radius:20px;padding:28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
.upgrade-close{position:absolute;top:14px;right:16px;background:0;border:0;cursor:pointer;color:var(--muted);font-size:18px;line-height:1}
.upgrade-close:hover{color:var(--text)}

@media (max-width:560px){
  .rd-head{margin-top:1.5rem}
  .rd-grid{grid-template-columns:1fr}
}
/* Follow on lock screen (phone app only) */
.rd-act.on{color:#8dffcb;border-color:rgba(141,255,203,.45)}

/* In the phone app (styles.css carries the shared app look): a title and the list, without the
   website's explanations above them; the extra filters fold behind one "Filters" chip (reads.js). */
html.in-frame .rd-head{margin:6px 0 10px}
html.in-frame .rd-lede,html.in-frame .rd-pos-note{display:none}
html.in-frame .rd-record{border-radius:14px;padding:14px 16px}
html.in-frame .rd-fchip{border:0;background:rgba(255,255,255,.08);color:rgba(234,240,255,.8);font-size:13px;padding:7px 12px}
html.in-frame .rd-fchip[aria-pressed="true"]{background:#2f5dff;color:#fff}
html.in-frame .rd-more-chip{display:inline-flex;align-items:center;gap:5px}
.rd-fold{display:flex;flex-direction:column;gap:.5rem}
.rd-fold[hidden]{display:none !important}
html.in-frame .rd-more-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html.in-frame .rd-card{border:0;border-radius:16px}
html.in-frame .rd-grid{gap:10px}
html.in-frame .rd-h{font-size:12.5px;letter-spacing:.04em}
html.in-frame .rd-act{border:0;background:rgba(157,180,255,.12);color:#dbe4ff;font-size:13px;padding:8px 12px}
html.in-frame .rd-act.on{background:rgba(141,255,203,.14);color:#8dffcb}
html.in-frame .rd-sel input{accent-color:#2f5dff;width:16px;height:16px;margin:0}

/* The read a lock-screen game opened (/reads?read=<id>): a short glow so the eye finds it. */
.rd-card{transition:box-shadow .6s ease}
.rd-card.rd-focus{box-shadow:0 0 0 2px rgba(157,180,255,.75)}
@media (prefers-reduced-motion:reduce){.rd-card{transition:none}}