/* torwatch view styles — same tokens as index.html (:root vars cascade).
   index.html carries the verbatim yt-subtitles look; this file maps the
   torwatch view classes onto it plus the views' own widgets. */

/* --- input card extras (inputCardView renders section.card itself) --- */
#watch{display:block;width:100%;margin:1.1rem 0 0;padding:.7rem;font-size:1.02rem;font-weight:650;
color:#fff;background:var(--ink);border:0;border-radius:8px;cursor:pointer}
#watch:hover{background:var(--red)}
#watch:active{background:var(--red-d)}
#recent{font-size:.92rem;max-width:100%;margin:.5rem 0 0;padding:.4rem .5rem;color:var(--ink);
background:#fff;border:1px solid #cfc6b4;border-radius:6px}

/* --- stage (videoStageView renders .stage/.grip; mirrors yt #stage/#grip) --- */
.stage{position:relative;width:640px;max-width:100%;margin-top:1.25rem;
border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000}
.grip{position:absolute;right:8px;bottom:8px;width:22px;height:22px;cursor:nwse-resize;touch-action:none;
background:linear-gradient(135deg,transparent 50%,#f2ece1 50%,#f2ece1 55%,transparent 55%,transparent 65%,#f2ece1 65%,#f2ece1 70%,transparent 70%);
background-color:rgba(20,14,10,.55);border-radius:5px}

/* --- downloads row (downloadsRow renders .downloads; mirrors yt .dl) --- */
.downloads{margin-top:1.1rem}
.downloads a{display:inline-block;margin:0 .6rem .5rem 0;padding:.6rem 1.05rem;border-radius:8px;
text-decoration:none;font-weight:650;font-size:.95rem;border:1px solid var(--ink);color:var(--ink)}
.downloads a:first-child{background:var(--red);border-color:var(--red);color:#fff}
.downloads a:first-child:hover{background:var(--red-d)}
.downloads a:not(:first-child):hover{background:var(--wash)}

/* --- subtitles widget --- */
.subs-widget{margin-top:1.25rem}
.subs-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}
.subs-bar .subs-title{flex:1;min-width:12rem}
.subs-find,.subs-copy{font-size:.9rem;font-weight:650;padding:.5rem .8rem;border-radius:8px;cursor:pointer;
border:1px solid var(--ink);background:transparent;color:var(--ink)}
.subs-find:hover,.subs-copy:hover{background:var(--wash)}
.subs-status{font-size:.85rem;color:var(--muted);font-family:var(--mono)}
.subs-results{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.subs-result{font-size:.85rem;padding:.35rem .6rem;border-radius:6px;cursor:pointer;
border:1px solid var(--line);background:var(--wash);color:var(--ink)}
.cue-list{list-style:none;margin:0;padding:0;max-height:16rem;border:1px solid var(--line);
border-radius:10px;background:var(--wash)}
.cue{display:flex;gap:.6rem;padding:.4rem .7rem;cursor:pointer;border-bottom:1px solid var(--line);
font-size:.93rem}
.cue:last-child{border-bottom:0}
.cue:hover{background:rgba(188,58,33,.08)}
.cue.active{background:rgba(188,58,33,.16);font-weight:650}
.cue-time{font-family:var(--mono);font-size:.8rem;color:var(--muted);white-space:nowrap}
.cue-empty{padding:.6rem .7rem;color:var(--muted);cursor:default}

/* --- tracks menu popover --- */
.tracks-menu{position:relative;margin-top:.6rem}
.tracks-btn{font-size:.9rem;font-weight:650;padding:.5rem .8rem;border-radius:8px;cursor:pointer;
border:1px solid var(--ink);background:transparent;color:var(--ink)}
.tracks-btn:hover{background:var(--wash)}
.tracks-pop{position:absolute;z-index:5;left:0;top:calc(100% + .3rem);min-width:14rem;max-width:100%;
background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}
.tracks-head{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
color:var(--muted);margin:.4rem 0 .2rem}
.tracks-head:first-child{margin-top:0}
.tracks-empty{font-size:.88rem;color:var(--muted)}
.tracks-audio,.tracks-sub{display:flex;gap:.45rem;align-items:baseline;font-size:.93rem;
font-weight:400;margin:.15rem 0;cursor:pointer}

@media (prefers-color-scheme:dark){
#watch{background:#ece3d3;color:#161210}
#watch:hover{background:var(--red);color:#fff}
#recent{background:#221c15;border-color:#4a4034;color:var(--ink)}
.subs-find,.subs-copy,.tracks-btn{border-color:var(--ink)}
.subs-find:hover,.subs-copy:hover,.tracks-btn:hover{background:#221c15}
.downloads a:not(:first-child):hover{background:#221c15}
}